Electro How to Use Electro Cart Template
Theme: Electro · Section type: Template (Cart)
The cart page lists the products a customer has added, with quantities, prices and the order total, and sends them to checkout. You can style the page in the Cart page section and add more sections around it. Most cart options, such as the free shipping bar and the discount field, are set in Theme settings and also apply to the cart drawer.
Note: The Cart page section can't be removed from the cart template, but you can add other sections above or below it.
What you can do
- Open the cart template and style the page
- Choose what the cart shows
- Show a free shipping progress bar
- See what customers see
- Change the section settings
- Fix common problems
Open the cart template and style the page
- In the theme editor, open the template selector at the top and choose Cart.
- Click the Cart page section.
- Under General, choose a Color scheme and a Heading size for the "Your cart" heading.
- Under Checkout card, choose a Card color scheme for the box with the total and the checkout button.
- Click Save.
Tip: Give the checkout card a color scheme that contrasts with the page. It helps customers find the total and the checkout button.
Choose what the cart shows
- In the theme editor, click Theme settings > Cart.
- Choose a Cart type: Drawer opens a cart drawer when customers click the cart icon, and Page sends them to the cart page.
- Select the options you want on the cart, such as Show discount field, Show product vendor, Enable order notes, Enable dynamic checkout button and Show tax and shipping information.
- Choose an Image ratio for the product images.
- Click Save.
These settings apply to both the cart page and the cart drawer.
Show a free shipping progress bar
- In Theme settings > Cart, select Show free shipping notification.
- Enter the Minimum order price for free shipping.
- Optional: enter a Progress message, using [amount] for the amount still needed, and a Qualified message. Leave them empty to use the theme's default text.
- Optional: choose a Free shipping bar color.
- Click Save.
Caution: The bar only shows a message. It doesn't create free shipping. Set up a matching free shipping rate in Shopify admin under Settings > Shipping and delivery, so customers aren't misled at checkout.
What customers see
- Heading: "Your cart" with the number of items in brackets.
- Product rows: on large screens, each row shows the image, title, variant options, quantity buttons, a remove button and the line total. On mobile, the quantity sits under the product. Changing the quantity or removing a product updates the cart without reloading the page.
- Extra product info: line item properties, subscription plans, product discounts and unit prices show under the product title. Product disclosures you set up in Shopify admin for the cart also show here.
- Checkout card: on large screens it sits on the right and stays in view while customers scroll. It shows the free shipping bar, order discounts, the discount code field, the total, the Check out button, dynamic checkout buttons, a Continue shopping link and the tax and shipping note.
- Discount code: customers click Discount code, enter a code and click Apply. The total updates on the page.
- Order note: customers click Add order note under the products to write a note for the order.
- Empty cart: customers see "Your cart is empty" and a Continue shopping button. The cart upsell and empty cart suggestions in Theme settings > Cart show only in the cart drawer.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the page. |
Heading size | Sets the size of the Your cart heading: Headline, H1, H2 or H3. |
Checkout card
Setting | What it does |
|---|---|
Card color scheme | Sets the colors of the box with the total and the checkout button. |
Theme settings > Cart (options used on the cart page)
Setting | What it does |
|---|---|
Cart type | Opens a Drawer or goes to the Page when customers click the cart icon. |
Show discount field | Adds a discount code field to the checkout card. |
Show product vendor | Shows the vendor above each product title. |
Enable order notes | Adds an Add order note link under the products that opens a text box. |
Enable dynamic checkout button | Shows accelerated checkout buttons, such as Shop Pay, under Check out. |
Show tax and shipping information | Shows a note about taxes and shipping under the buttons. |
Image ratio | Sets the product image shape: Adapt to image, Square, Portrait (2:3) or Landscape (3:2). |
Show free shipping notification | Shows a progress bar toward free shipping. See "Show a free shipping progress bar" above. |
Minimum order price for free shipping | Sets the order total that qualifies for free shipping. Appears with Show free shipping notification. |
Progress message | Sets the message while the total is below the minimum. Use [amount] for the remaining amount. Appears with Show free shipping notification. |
Qualified message | Sets the message when the total reaches the minimum. Appears with Show free shipping notification. |
Free shipping bar color | Sets the color of the progress bar. Appears with Show free shipping notification. |
Troubleshooting
The free shipping bar doesn't show.
Select Show free shipping notification and enter a Minimum order price for free shipping. The bar doesn't show without a minimum.
Customers go to the cart drawer instead of the cart page.
Cart type is set to Drawer. Change it to Page in Theme settings > Cart.
The discount field is missing.
Select Show discount field in Theme settings > Cart. The field doesn't show on an empty cart.
I don't see product suggestions on the empty cart page.
The empty cart suggestions and cart upsell only show in the cart drawer.
Related articles
- Electro Theme settings
- How to use Electro Product template
- How to edit Electro Header
- How to use Electro Search template
Updated on: 30/10/2026
Thank you!