Shop Cart Module

It is possible to find the Cart Button Module when editing your header, under Global Styling. Click on the Modules menu to find E-Commerce and then just drag the Cart Button Module to your preferred position within the header. This module allows your clients to have an overview of the products they are purchasing and it directs them to the checkout flow so they can finalize the order.

 

Overview

The Shop Cart is composed by two different elements - the icon and the amount. The icon refers to the actual cart icon and the amount is a small indication of the amount of products in the cart, next to the icon.

 

1. Cart Button

1.1. Icon Color

In this section you'll be able to define the color of the Cart Icon. You can select a general color for all states or by clicking on the option, a dropdown menu with two other options will appear in which you can define a specific color for each state - Normal or Hover State (when visitors hover the mouse over the Cart Icon).

 

1.2. Font Size

The Font Size refers to the cart icon size. Write down the specific size you wish your icon to be or use the slider option, moving it to the left or right to decrease or increase, respectively, the size of the icon.

 

2. Amount

2.1. Width and Height

It is possible to customize the width and height of the icon where the amount is in. Define a specific width and height by typing them down or use the slider option, moving it to the left or right to decrease or increase, respectively, the dimensions of the icon.

 

2.2. Font Family and Size

Here you can choose the font and size of the number representative of the amount of products in the car. Choose a Font by selecting it from the dropdown menu in front of the Font Family option and define its size by typing it down on the field or using the slider option.

 

2.3. Amount Color and Background

With these options, you'll be able to define the color of the amount and the background of the icon. Much like the icon, you can define one general color or specify it if someone is hovering over the module or not.

 

2.4. Border

In this section you can define the color, width, radius - which makes the element round - and margin - which allows you to position the element as you wish - of the amount icon.

 

3. Spacing

When styling the Shop Cart Module there are two spacing settings available: margin - which adjusts the space outside of the element; and padding - which adjusts the space inside of the element.

 

4. Global Styling

Along with these design options, the editor also offers you additional Global Styling options. To read more about the Cart Global Styling click here!

 

Important Note!

We recommend you to check our practical example to fully master the product implementation process on the editor. Click here to see the practical example!

 

Anything we’ve not covered?

Contact Us