Cart

Group name

Purpose

Cart (General settings)

Configure basic cart functionality and appearance, including minicart

Cart custom field

Add custom input fields to collect additional order information.

Cart upsell

Display personalized product recommendations to increase order value.

🤔 How to set up a basic Cart?

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.

🤔 How to add a cart custom field to the cart?

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.

🤔 How to display the estimated shipping cost in the cart?

Please check out this guide for detailed guidance.

🤔 How to show a Free shipping bar on the cart?

Want to show shipping rates based on the customer's address automatically? Here's how:

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

STEP 1:

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

STEP 2:

Toggle Enable to activate the feature.

Free shipping threshold is the minimum order amount customers need to reach to qualify for free shipping. To set up:

Under Free shipping settings > Order amount for free_shipping, enter the amount to qualify for free shipping. Amount entry formats include:

⚠️ 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, showcase how the bar communicates the achievement.

🤔 How to configure Cart upsell at Mini cart?

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. This name will be visible in the product detail page in the Shopify Admin. We recommend using "Cart Upsell" as the name to avoid confusion.
• Namespace and Key: These are identifiers for the metafield in the database and will be used to display upsell products in the frontend. The key must be "cart.upsell" for the metafield to work.
• Description: This field is optional, and you can add text here to describe the purpose of the field.
• Select Type: Choose "Product" and then select "List of Products" to add multiple upsell products.

• After setting up the metafield, go to each product page in the Shopify Admin. Scroll down to the bottom of the page and click on Metafield > Cart Upsell. Here, you can select a list of products to be the upsell products.

⚠️ Note: For instance, if you add products B, C, and D as upsell products for product A, whenever a customer adds product A to the cart, products B, C, and D will appear in the Cart Upsell section. If the metafield is filled, it overrides other methods.

2. Manual selection

• In the Product field, manually select upsell products (e.g., "SlidePro All-Mountain Skis").

⚠️ Note: If you are utilizing a product metafield to add upsell products (as explained in the above this guide), you should leave this field blank. This customization lets you create a personalized list of products to display prominently in the Cart Upsell section.

3. Dynamic recommendations (lowest priority)

• Uses Shopify's auto-generations if no metafield/manual list is set. The theme will automatically showcase suggested products in the Cart Upsell section. This feature relies on Shopify's inherent "related products" rule, taking into account the customer's purchase history and product descriptions.
• This seamless integration ensures that your Cart Upsell section presents products based on relevant data, enhancing the shopping experience for your customers.

⚠️ Note: Please check out the Shopify guide for more information: Show related products on product pages

STEP 4:

• Set Number of products shown (1 to 20) to limit recommendations. You should use 3–6 products for optimal visibility.
• Change Section label to customize the upsell title (e.g., "Complete your kits!"). You should use action-oriented language to encourage clicks.
• Toggle Share cart link on to allow customers sharing their cart with others. This feature is useful for gift purchases or team approvals.

STEP 5:

Click "Save" when done.