How to create a Cart Page with EcomSolid

In this article, we will demonstrate how to create a Cart page with EcomSolid.  

What is Cart page?

A Cart page is an essential part of an e-commerce website designed as a middle step between the product page and checkout page. It allows you to show the individual prices of each of the products customers choose to buy, the quantity, as well as the total amount of all the items before they proceed to checkout.



If you want to keep customers on the product page after adding an item to the cart, please consider using a Cart drawer. Click here for more details. 

How to edit a cart page with EcomSolid

Step 1: From the EcomSolid Dashboard, head to the Theme Editor


Step 2: Click the dropdown menu from the top bar and select “Cart page”.


Step 3: Make adjustments as you wish. Don’t forget to hit  “Save” and “Update Live”

Configure the Cart section settings

Locate the Cart section on the left sidebar of the Editor page. 


If you don’t have one, please go to the Library > Sections > Cart and insert your preferred Cart section to your page.


Click on the section to start configuring the settings. 

General settings

Background Banner: Select “Image” to add a background image for your cart section. Otherwise, select “Color”.

Background Color: Choose a color from the list or enter a hex color code for the background color of your Cart section.



Click on “More General Settings,” you will see more options to customize your cart section, including: 

  • Full-width: Enable this option to make the row stretch to both edges of your page.
  • Preview Warning Color: Toggle on the switch to see the highlighted color for your warning message. 


  • Preview Empty cart: Enable this option to see how your cart looks when it’s empty. 



You will see a list of atoms included in the Cart section. Each atom represents one element of your section.  Hover over the atom and click on the Eye icon to hide/show the atom then.



Please be noted that the product information used in the Editor is only for visual purposes. You may need to “Update Live” and check how it looks on the live page. 


How to enable the compared price on your Cart page

To show the compared price on the cart page, you will need to select the correct preset that supports this feature. 

Step 1: Under Current Preset, click on explore to see all the presets available. Locate the preset supports the compared price as below. Hit “Try this preset”  then.

Step 2: Click on the compared price on the Editor to reveal the configuration on the left sidebar. Make adjustments as you need. 



The compared price should be set up first from your Shopify Admin. Click here for the instruction from Shopify. 

Cross-sell on your cart page using the Featured collection section

Cross-selling is a popular element that should be included on the cart page. By using the Featured collection section, you will be able to showcase to customers the products in the same collection to boost your sales value. 


For more information about our Featured collection section, check out this article

Need more help? Feel free to reach out to our Customer Support Team via email and live chat!

Was this helpful?