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 on a scale from 0% to 170%.
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.
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" and "Quick View" buttons appear as overlays on the product card after hovering over it, with "Quick View" positioned below "Add to Cart" by default. The option is designed to display text for an inactive button and an icon with text when hovering over the "Add to Cart" or "Quick View" buttons. On mobile devices, both buttons remain hidden.
"Icon only". This option displays only the icons of the "Add to Cart" and "Quick View" when hovering over a product card positioned next to each other in a line. To reveal the selected button, the icon will be scaled on mouse hover. Both buttons are hidden on mobile.
"'Add to cart' below".
"Add to Cart" button: Use the option to move the button underneath the product card. This option displays text for an inactive button and shows an icon with text on hover in desktop mode. On mobile, an icon with text is displayed.
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 using 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 can be viewed by hovering over the product card. This button is not displayed on mobile devices.
Quantity selector
Note! Settings from the current subsection will be unavailable until you activate the "Add to Cart" button.
Enable selector
Activate the option to display the feature on all pages of a store. Additional settings will appear to configure the quantity selector on mobile after activating this option.
To display the quantity selector on mobile devices, turn on the "Enable on mobile" option.
"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 colors of the inactive button 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.
Use the "Enable on mobile" option to display the "Add to Cart" button on mobile.
Note! This option works only for the "'Add to Cart' below" buttons layout. For other layouts, products will be shown as a catalog with a button hidden by default. The product can be added to the cart by pressing the product card and navigating to the corresponding product page.
"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 will be displayed when you hover the mouse over the product description and product card. The color settings will appear after activating the option.
Set the colors of the inactive button 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.
Last updated