In this guide you can find the HTML parameters for adding the shopping cart to all pages on your site. The parameters are part of the embed code of your online shop and look like this:
cartType: 'overlay'
cartColor: '#56AAD8'
showMobileCart: true
flatBackgroundColor: 'transparent'
overlayBackgroundColor: '#F3F3F3'
mobileBackgroundColor: '#FFFFFF'
overlayPosition: 75
If you want to show the cart in your Website Builder site, then you can use the code component to insert it.
The placement of the code component should be Normal or Before the closing </body> tag. If you place the code component in the template, it will become visible on all pages that use that template.
What parameters can I change?
You can change the following parameters:
- Select cart type
- Set cart colour
- Show cart on mobile
- Background colour of the flat cart
- Background colour of the overlay cart
- Background colour of the mobile cart
- Overlay position on page
We have listed what each parameter does and how you can adjust it.
Select cart type
You can choose between two cart types to show on your page:
- overlay - sticks to the page on the position that you select. It stays visible when you scroll up and down the page.
- flat - the icon is placed in a specific location on your page where it will stay. It is not visible if you scroll down.
Choose between 'overlay' or 'flat'. If you don't select anything, it will revert to the default setting 'overlay'.
Example:
cartType: 'overlay'
Set cart colour
This determines the colour of the cart used on all types of carts; flat, overlay and on mobile. The default value is #56AAD8, but you can replace it with any HTML colour code that you want.
Example:
cartColor: '#56AAD8'
Show cart on mobile
This option allows you to disable the cart on mobile devices. Set the value to true, to show the cart on mobile or false to hide it.
Example:
showMobileCart: true
Background colour of the flat cart
This option will change the background colour of the flat cart. It will put a small square around the cart icon. The default setting is transparent, but you can replace it with any HTML colour code that you want.
Example:
flatBackgroundColor: 'transparent'
Background colour of the overlay cart
This option will change the background colour of the overlay cart. It will put a small square around the cart icon. The default setting is light grey (#F3F3F3), but you can replace it with any HTML colour code that you want.
Example:
overlayBackgroundColor: '#F3F3F3'
Background colour of the mobile cart
This option will change the background colour of the mobile cart. It will put a small square around the cart icon. The default setting is white (#FFFFFF), but you can replace it with any HTML colour code that you want.
Example:
mobileBackgroundColor: '#FFFFFF'
Overlay position on page
This option specifies the vertical position of the overlay cart from the top of the page, the higher the percentage, the lower the cart is placed on the page. The percentage is calculated based on screen height. Choose a number between 1-100.
Example:
overlayPosition: 75
Related articles:
