Product
In this section, you can find general settings for the quick shop on the Collection page.
Enable "Add to cart" button
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:
Badges
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.
Show discount
The "Sale" badge will be added to the product card by checking the box.
Custom badges
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 get acquainted with creating 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.
Product card badges
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.
Product page badges
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.
Time countdown
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.
To change the default colors of the time countdown, use the "Background", "Border", and "Text" color pickers. Set the hex code for the corresponding item or use the paint palette.
Last updated
