Product cards
In this section, you can find general settings for the quick shop on Collection pages and sections that include collections.
Use custom image height Activate the 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! On desktop devices, hover over a product card to reveal navigation arrows and browse product images. The arrows are hidden when a product variant is selected from the product card options. By default, image navigation is not displayed on mobile devices.
Show image controls Activate the option to display the navigation arrows on product cards.
Control position Determine the position of navigation arrows by using one of the options in the drop-down:
Center:
"On the sides". This option displays overlay arrows on product cards, which are centered on the right and left sides.
Bottom:
"Right". This option allows you to place navigation buttons on the bottom right of product cards.
"Center". Position buttons at the bottom center of product cards using this option.
"Left". Sets buttons at the bottom left overlaid on the product cards.
Button layout
Note! The "Add to Cart" button, "Quick View" button, and "Quantity selector" should be enabled individually in the current section to appear on product cards throughout the entire store. Additionally, enable the "Compare" functionality in Theme settings -> 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", and "Add to Compare" buttons appear as overlays on a product card when you hover 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", or "Add to Compare" buttons.
"Icon only". This option displays only the icons for "Add to Cart", "Quick View", and "Add to Compare" when hovering over a product card and positions two items in a row. To highlight the selected button, it is 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 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.
"Compare": Positioning of the buttons can be specified in the "Button placement" picker under the "Compare" subsection of the current global section.
Show buttons on mobile
Use the option to display the "Add to Cart" and "Add to Compare" 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 "Button layout" drop-down.
Show selector Activates the selector in desktop view.
Show on mobile Allows the display of the quantity selector on mobile devices.
Add to cart button
Show button Enable or disable the "Add to Cart" / "Pre-order" button for collections and on collection pages using the current option. This option also enables other button-related settings. Note! The "Pre-Order" button is displayed for out-of-stock items, provided all conditions are met. Read the details here.
Background / Icon Set the inactive button's colors using the color pickers.
Background on hover Change the button color of the active button. Depending on the selected background color, use the "Contrast on light" or "Contrast on dark" color pickers in Theme settings -> Colors -> Primary colors to modify text and icon colors when hovering over the button.
Quick view button
Show button Use this option to add the "Quick View" button to product cards on collection pages and collections. The button can be shown on hover over the product image, product details, or the full product card. The color settings appear once the option is enabled.
Background / Icon Set the inactive button colors using the color pickers.
Background on hover Changes the color of the active button. Depending on the selected background color, use the "Contrast on light" or "Contrast on dark" color pickers in Theme settings -> Colors -> Primary colors to modify text and icon colors when hovering over the button.
Compare
Note! The "Button placement" picker can be shown only after selecting the "Add to cart below" option in the "Button layout" drop-down of the current global section.
Buttons placement Specify the position of the button using the provided picker:
"Media". Shows the button over the product image on hover.
"Below". Displays the button below the product card.
Background Set the inactive button colors using the color pickers.
Set the inactive background button color using the "Background" item.
Icon Use the color picker to adjust the icon color. Useful when the "Media" option is selected, which overlays the icon on product cards.
Background on hover Specify the desired background color of an active button. Note! If a product has already been added to the "Compare" list, the button background will remain the same color as when you hover over it.
Last updated