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%.
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.
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 "Add to Cart" and "Quick View" button colors can be arranged in Theme settings -> Colors -> .
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.
You can either operate 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" button in the picker and specify one from the Store library or upload it from your device. Each image corresponds to the Metafield built 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 in 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. The parameters will only be applied to the desktop.
Use the “Position” drop-down to control where the badge appears over the main image in the product gallery. Choose from “Top left,” “Top right,” “Bottom right,” or “Bottom left.” Since this setting applies across all screen sizes, preview it on various devices to display badges as expected.
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.
Tip: For the "Button" type, decide the button style in Theme settings -> .
The examples of custom badges on the Collection and Product pages can be viewed on the .
Use settings from the current section to set up custom badges on product cards and product pages for a specific product. Custom images can be configured in the theme using the Metafileds. Check out the following to learn how to create custom badges in the admin using Metafields.
The "Time countdown" feature requires individual customizations in your admin using Metafields. For how to apply settings in a store, read the following .
