CSS Styling

Each of the element of Cart Convert has a CSS class. These can be used to apply your own bespoke styling. These can be added at the top of your cart.liquid file or in your own style sheet, e.g:

<style>
.esc_offersTitle {
    color: green
}
</style>

Will create a title like this:


Image styling:

If your product images are of different heights you can make the image container have a fixed height using css selector div.esc_productImage. For example, the following CSS will give all the images a fixed height of 200px:

<style>

div.esc_productImage {

height: 200px

}

</style>

Here are the other classes that can be used:


.esc_productsContainer

This is the container of all the Cart Offer products.

.esc_offersTitle

This is the heading of the Cart Offers container.

.esc_offersIntro

This is the sub heading of the Cart Offers container

.esc_product

This is the containter of a Cart Convert product

.esc_productImage

This is the image of a Cart Convert product

.esc_offerPrice 

This is the price of a Cart Convert product

.esc_addOfferProduct

This is the add to cart button for a Cart Convert product

.

Still need help? Contact Us Contact Us