Product cards

In this section, you can find general settings for the quick shop on Collection pages and sections that include collections.

Activate the "Set image height" option to display the height settings.

Height

The image height of product cards in collections and images in a product gallery on product pages can be adjusted using a scale from 0% to 170%.

Note! The product card image navigation works on the desktop view. Hover over a product card to see the arrows. The navigation will be hidden once a product variant is selected under a product card.

By default, the arrows are hidden on mobile.

Activate the "Show image control buttons" option to display the navigation arrows on product cards.

Determine the position of navigation arrows by using one of the options in the "Control button position" drop-down:

Center:

• "At the sides". Select the option to display centered arrows at the right and left sides of a product card.

Bottom:

• "Right". This option allows you to place the buttons on the bottom right of product cards.

• "Center". Position buttons at the bottom center of product cards using this option.

• "Left". Set buttons at the bottom left by selecting the current option from the drop-down list.

Buttons layout

Note! The "Add to Cart" button, "Quick View" button, and "Quantity selector" should be activated individually in the current section to display for product cards on the entire store.

Additionally, enable the "Favorites" and "Compare" options in Theme settings -> Favorites & Compare.

Use the current drop-down to set the layout of the buttons displayed for product cards of the entire store that fits your store design:

• "Icon with text". The "Add to Cart", "Quick View", "Add to Compare", and "Add to Favorites" buttons appear as overlays on a product card after hovering over it, with "Quick View", "Add to Compare", and "Add to Favorites" positioned below "Add to Cart" by default. The option displays text for an inactive button and an icon with text when hovering over the "Add to Cart", "Quick View", "Add to Compare", or "Add to Favorites" buttons.

• "Icon only". This option displays only the icons for the "Add to Cart", "Quick View", "Add to Compare", and "Add to Favorites" when hovering over a product card and positions two items in a line. To reveal the selected button, the icon will be scaled on mouse hover.

• "'Add to cart' below".

"Add to Cart" button: Use the option to move the button below the product card. This option displays text for an inactive button and shows an icon with text on hover in desktop mode.

Using the "Add to Cart" button and quantity selector, the design and position of buttons in sections with collections are predefined and can not be changed in the Theme settings. The "Add to Cart" button is located below or next to the quantity selector, depending on the section or screen size.

"Quick View" button: On the desktop, the icon appears when hovering over a product card. This button is not displayed on mobile devices.

"Favorites" & "Compare": Positioning of the buttons can be specified in the "Buttons placement" picker under the "Favorites & Compare" subsection of the current global section.

Enable buttons on mobile

Use the option to display the "Add to Cart", "Add to Compare", and "Add to Favorites" icons below a product card on mobile.

Quantity selector

Note! Settings from the current subsection will be unavailable until you activate the "Add to Cart" button and select the "Add to cart" below" option in the "Buttons layout" drop-down.

Enable selector

Activate the option to display the feature on all store pages. On mobile devices, the quantity selector remains hidden.

"Add to cart" button

Enable button

Allow or deny displaying the "Add to Cart" button for collections and on collection pages using the current option. Additionally, this option activates other button-related settings.

Set the inactive button's colors using the "Background" and "Icon" color pickers.

The "Hover background" item changes the button color of the active button. Depending on the selected background color, use the "Light contrast" or "Dark contrast" color pickers in Theme settings -> Colors -> Primary colors to modify text and icon colors when hovering over the button.

"Quick view" button

Enable button

The "Quick View" button can be added over the product image card on collection pages and collections by activating the option. The button can be displayed when you hover over the product description and product card. The color settings will appear after activating the option.

Set the inactive button's colors using the "Background" and "Icon" color pickers.

The "Hover background" item changes the button color of the active button. Depending on the selected background color, use the "Light contrast" or "Dark contrast" color pickers in Theme settings -> Colors -> Primary colors to modify text and icon colors when hovering over the button.

Favorites & Compare

Note! The "Buttons placement" picker can be shown only after selecting the "Add to cart" below" option in the "Buttons layout" drop-down of the current global section.

In the "Buttons placement" picker, specify the position of the "Favorites" and "Compare" icons:

• "Media". The buttons will be overlaid on top of the product card when it is hovered over.

• "Below". Use the option to show icons below product cards.

Set the inactive background button color using the "Background" item.

Use the "Icon" color picker to adjust the color of icons. The color can be applied to the icons overlaid on product cards when the "Media" option is selected.

Specify the desired background color of an active button in the "Hover background" picker.

* If a product has already been added to the "Favorites" or "Compare" list, the button background will remain the same color as when you hover over it.