Miniature Shopping Cart (Desktop and Tablet)

This content element is used in the webstore header only for the desktop and tablet layouts, including desktop and tablet sticky headers.

The Miniature shopping cart content element is used to add shopping cart miniature to the webstore header for the desktop and tablet layouts. Customers can see the shopping cart icon and the number of products in the shopping cart. They can click on it to open the shopping cart. When customers hover over it, they can see the first three products in the shopping cart, total price, and the Checkout button.

Although you can add the Miniature shopping cart content element to any page, we recommend to use it in your webstore header.

Content Tab

The table below provides the description of the Miniature shopping cart content element settings on the Content tab.

Field	Description
Dropdown button
Layout	Use this setting to specify how the shopping cart miniature icon and text should be presented in the webstore header. The available options are: Show text right of icon Show text left of icon Show text below icon Show number of products as badge
Show miniature on shopping cart page	Use this setting to show or hide shopping cart miniature on the shopping cart page.
Font family	Enter the name of the font family for the shopping cart miniature link text. If you leave this field empty, the default value will be used.
Font size	Enter the necessary font size for the shopping cart miniature link text. If you leave this field empty, the default value will be used.
All caps	Enable this option, if you need all letters in the shopping cart miniature link text to be capitalized.
Icon color	Specify the shopping cart miniature icon color. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Icon hover color	Specify the shopping cart miniature icon hover color. When a user hovers over the shopping cart miniature icon in the Sana webstore, the icon color changes to the one specified in this field. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Font color	Specify the font color for the shopping cart miniature link text. This color will be used for the shopping cart miniature link text, when there are some products in the shopping cart. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Empty cart font color	Specify the font color for the shopping cart miniature link text. This color will be used for the shopping cart miniature link text, when the shopping cart is empty. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Badge background color	Specify the background color of the shopping cart miniature badge. The badge with the number of products added to the shopping cart is shown at the top right corner of the shopping cart miniature icon. You can enable the shopping cart miniature badge using the Layout setting. The badge is not shown if the shopping cart is empty. You can change the badge background color using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Dropdown content
Show expand icon	Enable this option if you want to show the expand icon in the shopping cart miniature.
Show prices and subtotal	Use this option to show or hide the subtotal of the order amount in the shopping cart miniature. If this option is enabled, every time a customer adds a product to the shopping cart, the shopping cart miniature appears in the upper right corner of a Sana webstore.
Price per item line	It is applicable only if the option Show prices and subtotal is enabled. Use this setting to specify how to show product prices in the shopping cart miniature. The available options are: Show line total: The product price is shown as a total price per item line. Show sales price per unit: The product price is shown as a sales price per unit of measure.
Font size	Enter the necessary font size for the texts in the shopping cart miniature dropdown.
Font color	Specify the font color for the texts in the shopping cart miniature dropdown. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Background color	Specify the background color of the shopping cart miniature dropdown. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Border color	Specify the color of the shopping cart miniature dropdown border. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Separators color	Specify the color of the separators in the shopping cart miniature dropdown. Separators are used to separate product lines and texts in the shopping cart miniature dropdown. You can change the separators color using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Show thumbnails	Use this setting to show or hide the product thumbnails in the shopping cart miniature dropdown.
Shopping cart heading
Font family	Enter the name of the font family for the shopping cart miniature heading shown at the top of the dropdown. If you leave this field empty, the default value will be used.
Font size	Enter the necessary font size for the shopping cart miniature heading shown at the top of the dropdown. If you leave this field empty, the default value will be used.
All caps	Enable this option, if you need all letters of the shopping cart miniature heading to be capitalized.
Font color	Specify the font color for the shopping cart miniature heading shown at the top of the dropdown. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Shopping cart footer
To shopping cart link style	Use this setting to style the link shown at the bottom of the shopping cart miniature dropdown. This link opens the shopping cart page in the Sana webstore. The available options are: Show as link Show as button Show as action button Hide
To checkout link style	Use this setting to style the link shown at the bottom of the shopping cart miniature dropdown. This link opens the checkout page in the Sana webstore. The available options are: Show as link Show as button Show as action button Hide
Swap links position	Use this option to interchange position of the shopping cart and checkout links.
Link font color	Specify the font color of the shopping cart and checkout links. The font color is applied, only if the Show as link option is selected in the link style setting for the shopping cart and checkout links. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.
Link hover font color	Specify the hover font color of the shopping cart and checkout links. The hover font color is applied, only if the Show as link option is selected in the link style setting for the shopping cart and checkout links. When a user hovers over the shopping cart or checkout link in the shopping cart miniature dropdown in the Sana webstore, the font color changes to the one specified in this field. You can change it using the color picker, or by entering the color hex code, RGB or HSL values. If you leave this field empty, the default value will be used.

Advanced Tab

On the Advanced tab of the Miniature shopping cart content element, you can configure height, width, and spacing settings.

For more information about advanced settings, see Content Elements.

Change the Miniature Shopping Cart Icon

The Miniature shopping cart icon can be changed in Themes. In Sana Admin click: Design & Layout > Themes. Click Edit on your webstore theme and open the Icons tab. In the Shopping cart icons section, find the Shopping cart miniature icon. You can change the default icon.