Cart

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

Want to enable a quick-view shopping cart that slides out when customers add items to cart? Here's how:

STEP 1:

Go to Theme Settings > Cart.

STEP 2: Configure cart icon & display

• Cart icon: Choose between Shopping cart or Bag icon in the header.
• Image ratio: Set product image aspect ratio in the mini cart (e.g., Natural, Square (1:1), Landscape (4:3), Portrait (2:3), Wide (16:9), Standard (3:4)).
• Toggle Show vendor to display product brand names.

STEP 3: Enable key features

• Enable cart note: Allow customers to add special instructions (e.g., gift messages).
• Enable "View cart" button: Redirects users to the full cart page.
• Enable payment icons: Display trusted payment logos (e.g., Apple Pay).
• Custom payment icons SVG: Add specific payment methods (e.g., apple_pay, google_pay).

STEP 4: Set up cart behavior

• Continue shopping link: Customize the text link to the "Continue shopping" button.
• Enable discount code field: Let customers apply promo codes in the mini cart.
• Show savings amount: Display discount totals to highlight value.
• Enable terms and conditions: Add a checkbox for legal compliance and choose the Terms and conditions page.

STEP 5:

Click "Save" when done.

Want to collect additional information from customers (like gift messages or special instructions) directly in the mini cart? Here's how:

STEP 1: Navigate to the settings panel

Go to Theme Settings > Cart > Cart custom field.

STEP 2: Activate the feature

Toggle Enable Custom field to activate the feature.

STEP 3: Configure field settings

• Field label: Enter a clear title (e.g., "Gift message," "Special instructions"). Required to enable the field.
• Mark custom field as required: Toggle if customers must fill it out before checkout.
• Validation regex (Advanced): Use regex patterns for specific input rules (e.g., email format). Leave blank if unsure.

STEP 4: Click "Save" when done.

Please check out this guide for detailed guidance.

Want to motivate customers to add more items by showing a free shipping progress bar? Here's how:

Prerequisite: Before using the Free shipping bar, set up a free shipping rule in your Shopify admin. Refer to the Shopify documentation for detailed instructions.

STEP 1:

Go to Theme Settings > Shipping and Delivery > Free shipping.

STEP 2:

Toggle Enable to activate the feature.

Under Order amount for free_shipping, enter the minimum order amount. Supported formats:

⚠️ Note: Add one rule per line only.

STEP 3:

Click "Save" when done.

STEP 4: Check the storefront display in Mini cart:

• Case 1: When the cart doesn't meet the free shipping threshold, the bar prompts customers to add more items.

• Case 2: When the cart qualifies for free shipping, the bar communicates the achievement.

Want to show personalized product recommendations in the mini cart to increase average order value? Here's how:

STEP 1:

Go to Theme Settings > Cart > Cart upsell.

STEP 2:

Toggle Enable in minicart to activate the feature.

STEP 3: Configure upsell priority settings

Cart upsell recommendations are displayed based on this priority:

1. Product metafield (highest priority)

For more advanced customization, enabling you to tailor the Cart Upsell section for each product, you can utilize metafields. Follow the guide below to add metafields:

• Create a Metafield: Navigate to your store and go to Settings > Metafields and metaobjects > choose Products.

Click "Add definition" to create a metafield for the product.

• Fill in the following information:
  • Name: Provide a name for the metafield. We recommend using "Cart Upsell" to avoid confusion.
  • Namespace and Key: The key must be "cart.upsell" for the metafield to work.
  • Description: Optional.
  • Select Type: Choose "Product" then select "List of Products".

• After setting up the metafield, go to each product page in the Shopify Admin. Scroll down to Metafield > Cart Upsell and select the upsell products.

⚠️ Note: If products B, C, and D are set as upsell products for product A, they appear in the Cart Upsell section whenever A is added to cart. Metafield takes priority over other methods.

2. Manual selection

• In the Product field, manually select upsell products.

⚠️ Note: Leave this field blank if you are using product metafields.

3. Dynamic recommendations (lowest priority)

• Uses Shopify's auto-generated suggestions if no metafield or manual list is set. Based on purchase history and product descriptions.

⚠️ Note: See the Shopify guide for more information.

STEP 4:

• Set Number of products shown (1–20). We recommend 3–6 for optimal visibility.
• Change Section label to customize the upsell heading (e.g., "Complete your kit!").
• Toggle Share cart link on to let customers share their cart - useful for gift purchases or team approvals.

STEP 5:

Click "Save" when done.

To hide the cart:

In Theme settings > Cart > Catalog mode > Toggle Hide cart ON.

When Hide cart is enabled:

• Cart icon will not be displayed in the Header.
• Quick add options will be hidden.
• Add-to-cart button will not be shown on product pages, featured products, or quick view.

By default, the cart drawer slides open every time a customer adds a product. If you prefer customers to navigate to the full Cart page instead, you can disable this behavior.

STEP 1:

Go to Theme Settings > Cart > Cart drawer.

STEP 2: Find and adjust the Enable cart drawer toggle.

STEP 3:

Click "Save" when done.

Applied discount codes now appear as individual removable chips in the cart's discount section - in both the cart drawer and the Cart page. No additional setup is needed; this works automatically when Enable discount code field is turned on.

What it looks like: Each applied code appears as a labeled chip (e.g., SUMMER20 ×). Code names longer than 20 characters are truncated with "…".

How to remove a discount code: Click the × button on the chip. The code is removed and the order total is recalculated automatically.

⚠️ Notes:

• Only manually applied discount codes (entered by the customer) show the × button. Automatically applied discounts do not.
• Only one code can be removed at a time. A loading indicator appears on the chip while removal is being processed.
• If removal fails, the following error appears below the chips: "An error occurred, please refresh the page and try again."
• Removals are synchronized between the cart drawer and the Cart page.