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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400)
2 You can display the top reasons to buy from us icons with this option.
![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400)
3 Next up, you can disable all buttons except for the secure checkout with this option.
![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400)
6 Next, select a background color for the continue shopping button.
![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400)
7 Next, select a color for the continue shopping button text.
![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400)
8 Now, scroll down and select a background color for the continue shopping button on mouse hover.
![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400)
9 Next, select a color for the continue shopping button text on mouse hover.
![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400)
10 You can also display a discount code above the checkout button.
![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400)
11 Next, enter your discount code.
A customer will use this code on the checkout page.
Ex. 'SAVE5NOW'
![Step 11 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400)
12 Next, enter the discount code that you generated in the Shopify back end.
Ex. '5%'
![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400)
13 You can also enable a help page to show below the checkout button.
![Step 13 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=13&width=800&height=600&mobile_width=450&mobile_height=400)
14 Selected page content.
![Step 14 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=14&width=800&height=600&mobile_width=450&mobile_height=400)
15 Now, scroll down and click Display to display related items.
![Step 15 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=15&width=800&height=600&mobile_width=450&mobile_height=400)
16 Next, click Select collection.
![Step 16 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=16&width=800&height=600&mobile_width=450&mobile_height=400)
17 Here you can choose to display the discount code box on the slide out cart.
![Step 17 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=17&width=800&height=600&mobile_width=450&mobile_height=400)
18 Next, click Highlight to show Login buttons if a customer is not logged in.
![Step 18 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=18&width=800&height=600&mobile_width=450&mobile_height=400)
19 Next click Enable cart notes to show a "Special instructions for seller" input field.
![Step 19 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=19&width=800&height=600&mobile_width=450&mobile_height=400)
20 Click Show product vendor, If you wish to show a product vendor column on the cart page.
![Step 20 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=20&width=800&height=600&mobile_width=450&mobile_height=400)
21 Here you can enable/disable the shipping calculator.
![Step 21 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=21&width=800&height=600&mobile_width=450&mobile_height=400)
22 Next, you can enter a heading text for the Shipping Calculator.
![Step 22 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=22&width=800&height=600&mobile_width=450&mobile_height=400)
23 Next, enter a default country.
This country will be selected as the default in the shipping calculator country dropdown.
![Step 23 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=23&width=800&height=600&mobile_width=450&mobile_height=400)
24 Enter submit button text.
Default is 'Calculate Shipping'.
![Step 24 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=24&width=800&height=600&mobile_width=450&mobile_height=400)
25 Enter submit button text, when calculating.
Ex. 'Calculating...'
![Step 25 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=25&width=800&height=600&mobile_width=450&mobile_height=400)
26 Here you can enable/disable the cart page timer.
![Step 26 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=26&width=800&height=600&mobile_width=450&mobile_height=400)
27 Next, enter a Timer Title.
Ex. 'Cart will expire in'.
![Step 27 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=27&width=800&height=600&mobile_width=450&mobile_height=400)
28 Next, enter countdown timer value in seconds.
Note: enter a number only without any prefix or suffix.
![Step 28 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=28&width=800&height=600&mobile_width=450&mobile_height=400)
29 Now select the color for timer text.
![Step 29 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=29&width=800&height=600&mobile_width=450&mobile_height=400)
30 Next, click Enable Cart Shipping Threshold.
it will show above Cart total price.
![Step 30 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=30&width=800&height=600&mobile_width=450&mobile_height=400)
31 Enter your Free Shipping Text.
![Step 31 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=31&width=800&height=600&mobile_width=450&mobile_height=400)
32 Next, enter your Free Shipping Achieved Text.
Ex. 'You Have Qualified for Free Shipping'.
![Step 32 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=32&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=33&width=800&height=600&mobile_width=450&mobile_height=400)
34 Enter Shipping Estimation Text.
Ex. 'Order in the next'.
![Step 34 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=34&width=800&height=600&mobile_width=450&mobile_height=400)
35 Enter Shipping Estimation text.
Ex. 'to get it by'.
![Step 35 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=35&width=800&height=600&mobile_width=450&mobile_height=400)
36 Next, click save to save your theme config and preview your changes.
That's it. You're done.
![Step 36 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584657&step_number=36&width=800&height=600&mobile_width=450&mobile_height=400)
Here's an interactive tutorial for the visual learners
https://www.iorad.com/player/1584657/DemoStore---CartPage
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.