Badges
Use various badges built into the theme to highlight specific product features.
Change the background color of the "Sale" badge and "Time countdown" using the "Discount" color picker.
Note! By combining the discount badge with the countdown and specifying the color in the "Time countdown" global section, the countdown settings take priority, and the color from the current section won't appear for the badge.
Product card
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.
Show sold out
Activate the option to place the "Sold out" badge on the product card. It will be displayed for products with zero quantity and inventory tracking enabled in your admin.
Custom badges on Product card
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 ensure they work as expected with your theme configurations.
Change the size of badges on product cards from 30 to 150 pixels in the "Width" scale. This option works only for large screen sizes.
Custom badges on Product page
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 ensure badges display as expected.
The "Width" 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.
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. Custom images can be configured in the theme using the Metafileds. Check out the following documentation to learn how to create custom badges in the admin using Metafields.
You can either operate the Theme badges or upload your images to 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.
Last updated