Cart, Checkout, and Purchase Flow

Estimated reading: 4 minutes 3 views

Firefly supports Shopify’s native cart data and three storefront cart presentations: Drawer, Page, and Notification. The theme can display and update cart lines, but shipping eligibility, taxes, discounts, payments, and the hosted checkout remain governed by Shopify configuration.

Choose a Cart type

Open Theme settings > Cart and choose:

  • Drawer — opens a cart panel without leaving the current page.
  • Page — sends customers to the Cart template.
  • Notification — confirms an addition while keeping the customer near the current context.

Test the selected type from the Header, Product page, Featured product, collection quick add, and Bundle deals. Products that need option or selling-plan selection can take a different path from simple products.

Global Cart settings

  • Show vendor
  • Enable cart note
  • Show payment badges
  • Trust badges image and width
  • Cart drawer collection
  • Enable free-shipping progress bar, threshold, progress message, success message, and icon
  • First and second cart upsell: enable, product, heading, description, and button label

An empty cart drawer can show products from the selected Cart drawer collection. Cart upsells are optional and should be relevant; a product already present in the cart is hidden from the corresponding upsell.

Cart page sections

Cart items

Cart items settings include Color scheme, desktop/mobile image size, Continue shopping link, mobile item layout (Dividers or Cards), mobile heading layout, and padding.

Cart footer

The Cart footer includes Color scheme, desktop/mobile alignment, content width, spacing, and these blocks:

  • Applied discounts
  • Subtotal
  • Buttons
  • App
  • Custom Liquid

Keep the subtotal, discount summary, cart note where used, and checkout action easy to find. App and Custom Liquid blocks can add their own behavior and should be tested independently.

What Firefly displays from Shopify

Where Shopify supplies the data, cart drawer and cart page can show:

  • product, selected variant, image, price, and quantity;
  • line-item properties, including product personalization submitted to the cart;
  • selling-plan allocation;
  • line discounts and cart-level discounts;
  • unit price and measurement;
  • quantity minimum, maximum, increment, and current cart quantity;
  • Shopify-formatted totals and currency.

Quantity controls follow the selected variant’s rules. If a customer enters a value that is below the minimum, above the maximum, or outside the required increment, Shopify can reject the update and the theme should present the resulting error.

Free-shipping progress messaging

The optional progress bar compares cart subtotal with the merchant-entered threshold. The message can replace [amount] with the remaining amount and can show a success message when the threshold is reached.

The progress bar does not create a shipping rate or guarantee free shipping. Taxes, discounts, market, delivery address, product eligibility, shipping profiles, and Shopify Shipping settings can change the real checkout result. Set the threshold and wording to match the store’s actual policy, and link to full terms when conditions apply.

Cart upsells

Firefly provides two optional upsell slots. Select a product and write a factual heading, description, and button label. Check:

  • simple and multi-variant upsell products;
  • availability and selling-plan requirements;
  • behavior when the product is already in the cart;
  • accurate price and option selection;
  • mobile focus and drawer height after adding.

An upsell block does not create a discount. If the offer requires a discount, configure that rule in Shopify and confirm the actual cart or checkout result.

Discount codes

Firefly displays discounts that Shopify has applied to cart lines or the cart. The theme does not provide a manual cart discount-code input. Customers enter eligible discount codes in Shopify Checkout, unless a Shopify feature or installed app provides another supported path.

Checkout handoff

The cart checkout action submits the current cart to Shopify’s hosted checkout. Firefly cannot control checkout payment methods, address validation, delivery rates, duties, taxes, discount acceptance, fraud checks, accelerated wallets, or new customer account pages. Configure and test those systems in Shopify Admin.

Payment icons or a trust-badge image are presentation only. They do not activate a gateway, guarantee eligibility, or modify store policy.

Test the purchase flow

  • Empty cart, first add, repeated add, and removal of the final item.
  • Variant changes, sold-out/unavailable variants, required selling plan, and line properties.
  • Quantity minimum, maximum, increment, native volume pricing, and unit prices where used.
  • Line discount, cart discount, market currency, and compare-at pricing.
  • Cart note, drawer collection, both upsells, progress bar before/at/over threshold.
  • Keyboard focus when opening/closing the drawer and after asynchronous cart updates.
  • Network or Shopify validation errors and retry behavior.
  • Handoff to checkout with the exact selected variant, quantity, properties, and selling plan.

For the product form that feeds this flow, see Product Pages and Merchandising. For quick answers, see FAQ and Troubleshooting.

Share this Doc

Cart, Checkout, and Purchase Flow

Or copy link

CONTENTS
Scroll to Top