Product
In this section, you can find general settings for the quick shop on the Collection page.
Last updated
In this section, you can find general settings for the quick shop on the Collection page.
Last updated
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%.
Enable "Add to cart" button
Note! This option enables displaying the "Add to Cart" button on the desktop view only. On mobile, products will be shown as a catalog with a button hidden by default. The product can be added to the cart by navigating to the corresponding product page.
Allow or deny displaying the "Add to cart" button over the image for collections and on collection pages using the current option:
Enable quick view
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 button's color can be arranged in Theme settings -> Colors -> Button colors.
Variant picker type (Collection item)
Tip: For the "Button" type, decide the button style in Theme settings -> Variant picker.
The current option allows choosing the product variant type on collection pages and for collections in sections using settings from the list: "Dropdown" or "Button". To remove the product variants, use "Hide".
For the "Hide" option, the "Choose options" button emerges for products with more than one item variant.
In the following examples, you can view each option:
Use the badges listed below to add in the top-left corner of the product card on collection pages and in collections:
Show sold out
Activate the option to place the "Sold out" badge on the product card. It will be displayed for products with 0 quantity and inventory tracking enabled in your admin.
Show discount
The "Sale" badge will be added to the product card by checking the box. The badge will appear for products/product variants with a comparison price set in your admin.
The examples of custom badges on the Collection and Product pages can be viewed on the DEMO.
Use settings from the current section to set up custom badges on product cards and product pages for a specific product. To display custom badges in the theme the functionality of Metafields has been used. Check out the following documentation to learn how to create custom badges in the admin using Metafields.
You can either use the Theme badges or upload your images in the Theme Editor.
The Unicorn provides eight badges built into the theme. Here is an example of the Theme badges:
First badge - Fourth badge
To display badges from images, press the "Select image" in the picker and specify the one from the Store library or upload it from your device. Each image corresponds to the Metafield build in your admin. Example: First badge = custom_badge_1, Second badge = custom_badge_2, and so on.
Change the size of badges on product cards from 30 to 150 pixels using the "Width" scale. This option works for the large screen sizes only.
In the "Position" drop-down, specify the badge placement on the product card that can be shown at the "Top right", "Bottom right", or "Bottom left". These settings will apply to desktop and mobile, so make sure they work as expected with your theme configurations.
The "Width on large screens" option sets the badge size on product pages. Use the scale to fix the size from 30 to 200 pixels.
Control the badge position overlayed the main image in the product gallery using the "Position" drop-down. Select the desired option "Top left", "Top right", "Bottom right", or "Bottom left" by hitting the drop-down list.
The "Time countdown" feature requires individual customizations in your admin using Metafields. For how to apply settings in a store, read the following help page.
After you have added all the changes in your admin, you can use the described options to display the sale countdown on the storefront:
Show time countdown
Activate the option to show the timer on product cards of collection pages and collections.
Combine with discount badge
This option lets you display the "Sale" badge and sale timer in a line on the product card of the collection listing.
Use the "Background" and "Text" pickers to colorize a badge on product cards.
To change the default colors of the time countdown on product pages, use the "Background", "Border", and "Text" color pickers. Set the hex code for the corresponding item or use the paint palette.
