Welcome To Our Help Center 👋

Cart Page Settings

Includes details on how to configure all of the different cart page options including the cart coupon code and shipping calculator.
Written by PJ Guerrero
Updated 7 months ago

The cart page is where your customers land before they get to checkout and purchase. Shoptimized checkout pages contain a tried and true design that is proven to help boost conversions, create comfort and ease of use.

1 The first step is to open the theme settings area of your Shopify theme config and go into the Cart Page section.

Step 1 image

2 You can display the top reasons to buy from us icons with this option.

Step 2 image

3 Next up, you can disable all buttons except for the secure checkout with this option.

Step 3 image

4 Here you can select the background color for the title background.

You can change title text color from 'Title Font Color' setting.

Step 4 image

5 You can enable/disable the continue shopping button here.

It will show a continue shopping button which will redirect to the all collections page.

Step 5 image

6 Next, select a background color for the continue shopping button.

Step 6 image

7 Next, select a color for the continue shopping button text.

Step 7 image

8 Now, scroll down and select a background color for the continue shopping button on mouse hover.

Step 8 image

9 Next, select a color for the continue shopping button text on mouse hover.

Step 9 image

10 You can also display a discount code above the checkout button. 

Step 10 image

11 Next, enter your discount code.
A customer will use this code on the checkout page.

Ex. 'SAVE5NOW'

Step 11 image

12 Next, enter the discount code that you generated in the Shopify back end.

Ex. '5%'

Step 12 image

13 You can also enable a help page to show below the checkout button.

Step 13 image

14 Selected page content.

Step 14 image

15 Now, scroll down and click Display to display related items.

Step 15 image

16 Next, click Select collection.

Step 16 image

17 Here you can choose to display the discount code box on the slide out cart.

Step 17 image

18 Next, click Highlight to show Login buttons if a customer is not logged in.

Step 18 image

19 Next click Enable cart notes to show a "Special instructions for seller" input field.

Step 19 image

20 Click Show product vendorIf you wish to show a product vendor column on the cart page.

Step 20 image

21 Here you can enable/disable the shipping calculator. 

Step 21 image

22 Next, you can enter a heading text for the Shipping Calculator.

Step 22 image

23 Next, enter a default country.

This country will be selected as the default in the shipping calculator country dropdown.

Step 23 image

24 Enter submit button text.

Default is 'Calculate Shipping'.

Step 24 image

25 Enter submit button text, when calculating.

Ex. 'Calculating...'

Step 25 image

26 Here you can enable/disable the cart page timer. 

Step 26 image

27 Next, enter a Timer Title.

Ex. 'Cart will expire in'.

Step 27 image

28 Next, enter countdown timer value in seconds.

Note: enter a number only without any prefix or suffix.

Step 28 image

29 Now select the color for timer text.

Step 29 image

30 Next, click Enable Cart Shipping Threshold.

it will show above Cart total price.

Step 30 image

31 Enter your Free Shipping Text.

Step 31 image

32 Next, enter your Free Shipping Achieved Text.

Ex. 'You Have Qualified for Free Shipping'.

Step 32 image

33 Next, enter currency notification text.

This is to inform customers about currency conversion.
You'll probably want to leave the default here.

Step 33 image

34 Enter Shipping Estimation Text.

Ex. 'Order in the next'.

Step 34 image

35 Enter Shipping Estimation text.

Ex. 'to get it by'.

Step 35 image

36 Next, click save to save your theme config and preview your changes.

That's it. You're done.

Step 36 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1584657/DemoStore---CartPage

39 STEPS


1 The first step is to open the theme settings area of your Shopify theme config and go into the Cart Page section.

Step 1 image

2 You can display the top reason to buy from us icons with this option.

Step 2 image

3 Next up, you can disable all buttons except for secure checkout with this option.

Step 3 image

4 Here you can select the background color for the title background.

You can change title text color from 'Title Font Color' setting.

Step 4 image

5 You can enable/disable the continue shopping button here.

It will show a continue shopping button which redirect to all collections page.

Step 5 image

6 Next, select a background color for continue shopping button.

Step 6 image

7 Next, selec a color for continue shopping button text.

Step 7 image

8 Now, scroll down and select a background color for continue shopping button on mouse hover.

Step 8 image

9 Next, select a color for the continue shopping button text on mouse hover.

Step 9 image

10 You can also display a discount code above the checkout button. 

Step 10 image

11 Next, enter your discount code.
A customer will use this code on checkout page.

Ex. 'SAVE5NOW'

Step 11 image

12 Next, enter code value.

Ex. '5%'

Step 12 image

13 Now, click Display to enable the display of a help page.

Step 13 image

14 Next, select the page to display.

This page will show below the checkout button.

Step 14 image

15 Selected page content.

Step 15 image

16 Now, scroll down and click Display to display related items.

Step 16 image

17 Next, click Select collection.

Step 17 image

18 Here you can choose to display the discount code box on the slide out cart.

Step 18 image

19 Next, click Highlight to show Login buttons if a customer is not logged in.

Step 19 image

20 Next click Enable cart notes to show a "Special instructions for seller" input field.

Step 20 image

21 Click Show product vendorIf you wish to show a product vendor column on the cart page.

Step 21 image

22 Here you can enable/disable the shipping calculator. 

Step 22 image

23 Next, enter heading text for the Shipping Calculator.

Step 23 image

24 Next, enter a default country.

This country will be selected as default in the shipping calculator country dropdown.

Step 24 image

25 Enter submit button text.

Default is 'Calculate Shipping'.

Step 25 image

26 Enter submit button text, when calculating.

Ex. 'Calculating...'

Step 26 image

27 Here you can enable/disable the cart page timer. 

Step 27 image

28 Next, enter Timer Title.

Ex. 'Cart will expire in'.

Step 28 image

29 Next, enter countdown timer value in seconds.

Note: enter number only without any prefix or suffix.

Step 29 image

30 Select the color for timer text.

Step 30 image

31 Next, click Cart Shipping Threshold Enable.

it will show above Cart total price.

Step 31 image

32 Enter Free Shipping Text.

Step 32 image

33 Enter Free Shipping Text.

Step 33 image

34 Next, enter your Free Shipping Achieved Text.

Ex. 'You Have Qualified for Free Shipping'.

Step 34 image

35 Next, enter currency notification text.

This is to inform customer about currency conversion.
You'll probably want to leave the default here.

Step 35 image

36 Enter Shipping Estimation Text.

Ex. 'Order in the next'.

Step 36 image

37 Enter Shipping Estimation text.

Ex. 'to get it by'.

Step 37 image

38 Next, click save to save your theme config and preview your changes.

That's it. You're done.

Step 38 image

39 That's it. You're done.

Step 39 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1584657/DemoStore---CartPageTitle Background – Changes the color of the title background strip directly above the item list.

Title Font Color– Changes the font color of the cart list titles.

 

General Settings

Display Cart Page Logo – Displays your logo on the cart page

Make Checkout Buttons Sticky – Makes the checkout button sticky.

Bottom Sticky Cart – Toggles the bottom sticky cart on or off.

Code Above Checkout Button – Displays a sales code above the product price. (Remove this code to hide this option)

Percentage Discount – Specify the percent off the order customers will receive. (Remove this code to hide this option)

Help Page – Display a help page underneath the cart for any last minute questions and concerns.

Related Items – Displays related items or a collection you specify underneath the cart. A different method of cross/upselling.

 

Cart General

Enable Cart Notes – Toggle cart notes on or off. Allows customers to leave a note about their order.

Show Product Vendor – Shows the product vendor of items.

Cart Type – Choose the type of cart you want. Drawer or Page.

Cart Shipping Threshold Enable – A final reminder to save on shipping by meeting your threshold.

 

Shipping Calculator

Display – Displays the shipping calculator.

Heading Text – Insert heading text to display with the shipping calculator.

Default Country Selection – Type in your default country here.

Submit Button Label – Insert submit text here. Ex: “Calculate Shipping.”

Submit Button Label When Calculating – Insert calculation text. Ex: “Calculating…”

 

Cart Page Timer

Enable – Toggles the cart timer on or off.

Timer Title – Displays text above the timer. Ex: “Cart will expire in”.

Cart Timer– Sets the amount of time before the cart clear. NOTE: The visitor’s cart will clear all items out of the cart! Be careful with this feature.

Cart Timer Color – Pick the color of your cart timer. We recommend an alerting color.

Did this answer your question?