Overlay group
Overlay group
Overlay group
1. What is Age Verification Popup? The Age Verification Popup section provides a dedicated solution for websites with age-restricted products or content, ensuring compliance with legal requirements. This popup prompts users to confirm their age before accessing certain areas of your website, helping maintain regulatory compliance and responsible marketing practices. 2. Section Components Section Age Verification Popup Displays age verification requirements for restricted content and products. Available Blocks Content Used to show age verification message, headings, and explanatory text. Buttons Used to create action buttons for age confirmation or denial. 3. Location & Setup To add & set up the Age Verification Popup section: Open the Shopify Theme Editor (Online store > Themes > Customize) Navigate to the Overlay Group (for sitewide display) or Template Group (for specific pages) Click "Add Section" Select "Age Verification Popup" 4. Highlight Features Legal Compliance: Ensures age verification for restricted content Flexible Placement: Display sitewide or on specific pages only Custom Styling: Background images, overlay opacity, and color options Reappearance Control: Set how often dismissed popups return (1-30 days) Responsive Design: Optimized display for both desktop and mobile Dual Actions: Separate handling for qualified and unqualified users 5. Common Use Cases 🤔 How to set up basic age verification quickly? STEP 1: Add Age Verification Popup section to Overlay Group for sitewide protection STEP 2: Add Content block and enter verification message into Heading and Text fields. (e.g., "Are you 18 or older?") STEP 3: Add a Buttons block with a confirm and a denial button. For example, "Yes, I'm 18+" and "No, I'm under 18" options STEP 4: Back to the Age Verification Popup setting panel, and set "Reappear after" from 1 to 30 days to avoid frequent prompts STEP 5: (Optional) Add a Background image to cover your website’s content. STEP 6: (Optional) Adjust the Overlay opacity to cover your website’s content. STEP 7: Save and preview. 🤔 How to create age verification for specific product pages? This setup is perfect for you to handle different age restriction requirements for different products. Just with a few steps: STEP 1: In Theme Editor, navigate to the specific product template you want to protect using the drop-down menu on the top bar. 👉 Note: You might need: Learn more about the Template. STEP 2: Add Age Verification Popup section to that template's Template Group STEP 3: Add Content block explaining the age restriction for that product category. STEP 4: Configure Buttons block with appropriate age threshold messaging STEP 5: Set background image and overlay opacity for visual appeal STEP 6: Save and preview. 6. Support Information Need help? Contact our support team at Omni Themes Support.
Overlay group
1. What is Store Selector? The Store Selector allows customers to select a specific store location for order pickup, improving the customer experience by offering flexibility in where they can pick up their orders. 2. Section Components Section Store Selector Creates a location picker on the header that displays available store locations with pickup details. Available block Store Used to add a store location's information. 3. Location & Setup To add & set up the Store Selector section: Open the Shopify Theme Editor (Online store > Themes > Customize) Navigate to the Overlay group section. Click “Add Section”. Select “Store Selector”. ⚠️ Prerequisites: Your store has been all set with multiple locations - in Shopify Admin > Settings > Locations (or check this guide from Shopify) Your store offers pickup in store for online orders - in Shopify Admin > Settings > Shipping and delivery > Pickup in store (or check this guide from Shopify) 4. Highlight Features Multi-Location Support: Manage and show multiple store locations easily on the header. Pickup Pricing: Set different pickup costs for each location Timing Information: Display pickup availability windows Visual Elements: Add store images and custom icons Product Integration: Show pickup availability on product cards Targeted Display: Control which products/collections show pickup info 5. Common Use Cases 🤔 How to set up the store selector? Before jumping into the steps to bring up this feature, make sure you have completed the PREREQUISITES above. Then, follow these steps: STEP 1: Add the Store Selector section to the Overlay group. STEP 2: This is an important step: In the Store selector setting panel, turn on "Enable" to make this picker show on the header. STEP 3: Click on a Store block to open its settings panel and set up: Name: The location’s name Pickup price: The cost that customers need to pay when picking up in that location. Pickup time: The time frame when picking up is available at that location. Store details: Other detailed information that customers can see when expanding the tab, including an image under this description, use the Store detail image setting. Store image: Show an image of the store on the left. STEP 4: Add more Store blocks and repeat the steps above. STEP 5: Click "Save" and preview. 💡 Note: Ensure all information matches your Shopify Admin (Settings > Locations) location settings to avoid customer confusion. 🤔 How to customize the location icon? STEP 1: In Store Selector settings, find "Custom icon image". STEP 2: By default, the theme shows a Location pin on the header; to change it, upload your custom icon image OR paste SVG code in "Custom icon (SVG code)". STEP 3: Expand the Theme Setting tab, and you can adjust the edges, base size, icon style for the location pin, and hover animation. STEP 4: Click "Save" and test the icon appearance on your header. 🤔 How to show pickup availability on the product cards? 🔎 This feature will let you show a small text under each product card, indicating the availability for pickup of that product at the selected location. STEP 1: Ensure Pickup in store is enabled in Shopify Admin > Settings > Shipping and delivery → Or check out this guide from Shopify for more information. STEP 2: In the Store Selector section setting panel, toggle ON "Show on product cards." STEP 3: Choose your display scope: If you want the pickup availability text is shown on: All products: Leave collection/product fields empty Specific collections: Select up to 50 collections in "Apply to collections" setting. Specific products: Select up to 50 products in "Apply to products" setting. STEP 4: Save changes and test the pickup availability display. 6. Support Information Need help? Contact our support team at Omni Themes Support.
Overlay group
1. What is a Quick view? Quick View is a feature that allows customers to quickly preview product details without leaving the current page. Typically, when users hover over a product image or click on a designated button, a modal window or pop-up appears, displaying essential product information such as name, price, variants, and a brief description. Quick View enables customers to make faster purchasing decisions by providing them with essential product details without navigating to a separate product page. This feature enhances the user experience by reducing the number of clicks required to view product information, ultimately streamlining the browsing and shopping process. ✍️ How to locate the Quick view section in Theme Editor: Open the Theme Editor in your Shopify admin (Online store > Themes > Customize). In the left-side panel, scroll down to find the Overlay group. Click on the Quick view section. From here, you can customize its settings such as Quick View button's color, media size, transition style, and more. 2. How to show a Quick view button on the product cards? Quick view allows users to quickly preview a product without having to navigate away from the current page or go to the full product detail page.To show the Quick View button on the product cards, follow these steps: Open the theme editor and navigate to the overlay group section. Then, enable the Quick View section. Configure the settings in the Product card group. These settings will apply to all product cards and include: Enable the "Show Quick view button" configuration, which opens a popup displaying product details without leaving the current page. Customize the Quick view button label. Configure button styles such as button color. When "Show Quick view button" is enabled, it will display only one button. 3. How to show a Quick add button on the product cards? Quick add (or Quick buy) allows customers to add a product to their shopping cart directly from the product cards. To show the Quick add button on the cards, open the theme editor and navigate to the overlay group section. Then, enable the Quick View section.Configure the settings in the Product card group. These settings will apply to all product cards and include: Enabe the "Show Quick add button" Adjust the Quick add desktop/mobile position: Select whether to display it on top of the product image or at the bottom of the product card on desktop/mobile. Here is the logic of this section: When both "Show Quick add button" and "Show Quick view button" are enabled, two buttons will be displayed. The Quick add text will display as: "Choose options" when the product has options "Add to cart" when there are no options "Sold out" (with the button disabled) when the product is unavailable. When "Choose options" is clicked, content will slide up to allow the selection of options and adding the product to the cart. 4. How to set up Quick view content? To set up Quick View content, follow these steps: a) Setup display: Choose the product to preview in the Quick View. This is just a preview, and the settings will apply to all products. Adjust the title size, heading tag, and decide whether to show the vendor name. Configure how media is displayed within the popup. This is similar to setting up media in the product info section. You can refer to the guide for setting up media here. b) Organize product information in the Quick View popup: Organize the product information similarly to how it's done in the product information section, excluding certain blocks that are only applicable on the product page, such as back in stock, complementary products, and sticky add to cart. 5. How to set up Quick Add Variant Picker and Quantity Selector When Quick add is enabled, all product variants are shown automatically. You can choose to show variants as either a dropdown menu or buttons in theme settings. Type: Dropdown Type: Button Add Quantity Selector block to enable customers to specify the quantity of the product they wish to purchase. You can select the style of the block with 4 options: Adapt to edge setting, Rounded, Square, Rounded corners. 6. How to show the Payment method on quick view? By following these steps, you can customize the display and organization of information in the Quick View popup for your products. In Theme Editor, scroll down to the Overlay area at the bottom. Click on Quick View section. Tap on Add block, seach and select the block named Payment methods. Click Save when done. From here, you can change the heading, and description, add payment icons, and customize the colors in the Style area. 7. How to customize the “View product details” button? ✍️ What is the purpose of “View product details” button? When clicked, this button takes customers to a page where they can learn more about the product: features, specifications, and customer reviews. This button can be especially useful in sections that have limited space. ✍️ How to add and customize the “View product details” button? In the Quick view section, add a new block called View product details, you will have 3 style choices to choose from: Style choice Example look of the button Primary Secondary Text link You can freely change the button, text, or hovering color for the button as you want. You can enable “Show add to cart” toggle optionally, then an “Add to cart” button will appear next to the “View product details” button. 8. How to customize the “Buy buttons” Block? ✍️ How to add and customize the Buy buttons block? In the Quick view section, add Buy buttons block. You can: 👉 For the overall look of the block: Choose the Button style: Primary or Secondary Enable “Show dynamic checkout buttons” toggle to display the "Buy it Now" button and any other dynamic checkout buttons provided by payment methods like PayPal or Apple Pay. Enable “Show add to cart” toggle to display the button. Customize colors for both primary and secondary buttons. 👉 Pre-order: When a product is available for pre-order, the "Pre-order" button replaces the "Buy it now" button. You can customize: Button label: Enter the text you want to show on the button. The default is “Pre-order” Message: Enter additional information about the item shown under “Pre-order” button. Enable to show dynamic checkout buttons for pre-orders Choose content box type (Square, Round) Adjust color for background and text.
Overlay group
1. What is a cookie banner? A cookie banner is a notification that appears on a website, informing visitors that the site uses cookies and seeking their consent before collecting any data. It serves as a tool for compliance with privacy regulations, particularly in regions where asking for user consent before collecting data is mandatory for online merchants. ✍️ How to locate the Cookie banner section in Theme Editor: Open the Theme Editor in your Shopify admin (Online store > Themes > Customize). In the left-side panel, scroll down to find the Overlay group. Click on the Cookie banner section. From here, you can customize its settings. 2. How to set up the cookie banner with the Eurus theme? Firstly, activating the Cookie Banner: Activate the default Shopify cookie banner by following the steps provided here: Configuring customer privacy settings. After that, you can set up the banner in two ways: a) Approach 1: Using Eurus Theme's Cookie Banner (Recommended): Eurus Theme provides advanced customization options for the cookie banner, allowing you to tailor its style, buttons, and message to match your brand identity. To do this, follow these simple steps: Step 1: In the Overlay group section, locate the Cookie Banner section. Step 2: Enable the cookie banner feature.Step 3: Once enabled, you can customize various aspects: Set up the cookie message: Craft a clear and concise message that informs users about your site's cookie usage. If you want to time the appearance of the popup from when a visitor enters the site, use the “Delay” config (measured in seconds). Configure buttons: Customize the buttons to align with your brand or encourage specific actions. Style adjustments: Tailor the banner's appearance to match your website's overall design. b) Approach 2: Using Shopify's Banner: Alternatively, you can create a cookie banner within the Shopify admin. Once set up, this banner will override the theme’s cookie banner by default. Refer to this document by shopify to set this banner up.
Overlay group
1. What is Popup? The Popup section provides an effective way to capture user attention and convey important messages or promotions through customizable overlay windows. It offers unlimited popups in both minimal and full styles, with features like countdown timers, scheduling options, and trigger conditions to create engaging campaigns that enhance user engagement and drive conversions. 2. Section Components Section Popup Creates customizable overlay windows for promotions, newsletters, and user engagement. Available Blocks Countdown Timer Used to create urgency with standard or evergreen countdown timers. Heading Used to show prominent titles and headlines for your pop-up. Text Used to provide detailed descriptions and promotional content. Button Used to create call-to-action buttons for user interaction. Email Form Used to collect newsletter subscriptions and lead generation. Social Icons Used to show social media links for easy contact. 3. Location & Setup To add & set up the Popup section: Open the Shopify Theme Editor (Online store > Themes > Customize) Navigate to the Overlay Group (for all pages) or Template group (for specific pages). Click "Add Section." Select "Popup" 4. Highlight Features Smart Triggers: Delay, scroll, exit-intent, and copy-to-clipboard activation Dual Display: Full popup and minimal sticky styles Advanced Timers: Standard and evergreen countdown options Scheduling: Automated show/hide based on dates Reappearance Control: Customizable return frequency (1-30 days) Style Options: Position, alignment, and color customization Audience Targeting: Guest-only and mobile-specific display rules 5. Common Use Cases 🤔 How to create a basic pop-up quickly? Don't know where to start with your Popup section? Just follow the steps in this guide to bring it up: STEP 1: Add the Popup section to the Overlay Group. STEP 2: Edit the Heading block with your main message. STEP 3: Click on the Text block and enter the supporting details (Enter a working code into Coupon code to show a copiable discount code). STEP 4: Click on the Button block and add a link to your desired page STEP 5: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type. STEP 6: Still in the Popup section setting panel, scroll up to the Image setting and assign an image. (To change the image position on desktop, use the Content position setting.) STEP 7: Click “Save” when done. 🤔 How to set up a newsletter signup popup? STEP 1: Add the Popup section. STEP 2: In the Heading block, enter a compelling headline about newsletter benefits STEP 3: Click “Add block” under the Popup section, and add the Email form block for subscription collection. STEP 4: (Optional) Add Social Icons block to encourage social media following. STEP 5: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type. 📌 Pro tip: Use exit-intent trigger to maximize conversion without being intrusive during browsing. STEP 6: Still in the section setting panel, find the Display rules setting group, and turn on "Show for guests only" to avoid showing to existing customers. STEP 7: Click “Save” when done. 🤔 How to create a flash sale popup with a basic countdown timer? STEP 1: Add the Popup section. STEP 2: Add the textual content: In the Heading block, enter the sale announcement (e.g., "Flash Sale - 50% Off!") In the Text block, enter the description, if needed, and enter a Coupon code (make sure the code works in your admin). STEP 3: Click “Add block” under the Popup section, and add the Countdown timer block. STEP 4: Set up the countdown timer block: Choose the Countdown timer to be Standard timer. Choose the correct Time zone. Set the exact Start date (enter a future time if you want to schedule your popup for later; otherwise, it will go live now). Set the exact End date (must be a future date) 👉 For details about how to schedule the pop-up, read the use case below. STEP 5: Add a Button block linking to the sale collection STEP 6: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type. 📌 Pro tip: Set trigger to "Scroll" at 25% to engage browsing visitors STEP 7: Click “Save” when done. 🤔 How to create a popup with an evergreen countdown timer? Want to show a countdown timer that always looks urgent, no matter when visitors land on your store? An evergreen countdown timer is your best choice. STEP 1: Add the Popup section. STEP 2: Add the textual content: In the Heading block, enter the sale announcement (e.g., "Flash Sale - 50% Off!") In the Text block, enter the description, if needed, and enter a Coupon code (make sure the code works in your admin). In the Button block, enter the label and link. STEP 3: Click “Add block” under the Popup section, and add the Countdown timer block. STEP 4: Select Evergreen timer as the Countdown type - and make sure to set the right Time zone. STEP 5: Set Duration (per loop) with the Unit (e.g., 2 days) to set the amount of time until the countdown restarts. STEP 6: Configure Start date for when the timer should begin (requires "Enable schedule” in Popup section settings) 👉 For details about how to schedule the pop-up, read the use case below. STEP 7: Set the End date to automatically hide the pop-up when your actual promotion ends STEP 8: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type. 📌 Pro tip: Set trigger to "Scroll" at 25% to engage browsing visitors STEP 9: Click “Save” when done. ✍ Why use an evergreen timer instead of a regular countdown? A standard timer (regular timer) counts down to one fixed date, for example, a sale that ends in 7 days. But that can backfire. If someone visits your site today, they’ll see “168 hours left.” That doesn’t feel urgent. With an evergreen timer, you can create urgency for every visitor. For example: The timer can show “24 hours left.” When the 24 hours run out, it resets and starts counting down again This loop keeps repeating until your promotion ends. 🤔 How to show popups in a minimal style? Don't worry about users closing the pop-up! Our minimal design keeps it sticky in the corner, so it's always there if they want to re-open the full view without taking up much space. STEP 1: In the Popup setting panel, scroll down and find the Minimal popup setting group. STEP 2: Toggle on "Enable on desktop" and/or "Enable on mobile" for minimal style STEP 3: Set Title and Subtitle for each minimal popup preview STEP 4: (Optional) Set the Default style on desktop and Default style on mobile to be Full style or Minimal style. STEP 5: Set up the minimal popup’s position (bottom left/right) in Theme Settings > Design > Popup > Minimal popup position. 💡 Note: If you have multiple popups (a.k.a. minimal popups), toggle on Show popup overlay to make them appear on top of each other. To prevent covering important elements like 'back to top' buttons or chat widgets, make sure to configure both your minimal and main pop-ups carefully. STEP 6: Click “Save” when done. 🤔 How to schedule when the pop-up shows or hides? You are in preparation state for a big sales day and don’t want your pop-up to show up now, let’s schedule it: STEP 1: In the Popup setting panel, scroll down and find the Display rules setting group. STEP 2: Toggle on "Enable schedule”. STEP 3: Click “Add block” under the Popup section, and add the Countdown timer block. STEP 4: Select the right Time zone and set up the Start date to be a future date. 💡 Note: If you don’t want to show a countdown on the popup, just hide it; the scheduling still works. STEP 5: Click “Save” when done. 🤔 How to set up the Popup Triggers? STEP 1: Access the Popup Trigger Settings Under the Overlay setting group > click on the Popup section. You will see the Popup triggers setting section inside the section setting panel. STEP 2: Set up the Trigger Intent Find the Trigger intent setting and select how the popup should be triggered from the dropdown menu. Delay – The popup appears after a set number of seconds. Scroll – The popup appears when users scroll down a certain percentage of the page. Exit – The popup appears when the user is about to leave the page. (The exit intention will be detected when the mouse is moving toward the browser’s navigation bar). Copy to Clipboard – The popup appears when a user copies specific elements on the site, such as a discount code or other selected text. STEP 2.1: Set the Delay (For Delay Trigger) If you choose Delay in step 2, adjust the Delay slider to set how many seconds the popup waits before appearing. ⚠️ Note: Delay is disabled for previewing in the Theme Editor. STEP 2.2: Set the Scroll Height (For Scroll Trigger) If you choose Scroll in step 2, use the Scroll height slider to define how far down the page (as a percentage of screen height) users must scroll before the popup appears. STEP 3: Click “Save” to apply the changes. 🤔 How to display popups in different pages? ✍️ To display pop-ups on All Pages: Adding the Popup section to the Overlay group will show the popup on any page on the site (all pages except the Checkout page): ✍️ To display pop-ups on Specific Pages: Navigate to that specific page template using the dropdown menu on the top bar. Then add the Popup Section to the Template group of that page: 6. Support Information Need help? Contact our support team at Omni Themes Support.
Overlay group
1. What are labels and badges? Product labels and badges in the Eurus Theme are visual indicators added on product cards and product pages, presenting key information and ongoing promotions. These labels aim to assist customers in quickly identifying important details about the products. ✍️ How to locate the Product labels and badges section in Theme Editor: Open the Theme Editor in your Shopify admin (Online store > Themes > Customize). In the left-side panel, scroll down to find the Overlay group. Click on the Product labels and badges section. From here, you can customize its settings. 2. Types of product labels and badges in Eurus theme: There are 6 types of labels available in the Eurus Theme, each serving a specific purpose: Sale Label: Automatically displayed for products currently on sale. Sold Out Label: Automatically displayed for products that are out of stock. Image Label: Allows the upload of custom images to be used as labels. Text Label: A customizable text input for various purposes. Pre-order Label: Indicates products available for pre-order. New product label: Show a label on the product and set an expiration date for it. 3. How to set up labels and badges? a) Setting up all types of labels and badges: To configure labels, navigate to Theme editor > Overlay group > Product labels and badges > Add a label block. Key setup features include: Content: Admin can add content to the label by inputting text into the content field and selecting an icon in the Icon configuration. In addition to text, admin can also use the following codes in the content: {sale} for the discount percentage. {sale_amount} for the discount amount. {qty} for the total quantity in inventory. <br /> to insert a line break. <b>your content</b> for bold text. Sale label automatically displays on all discounted products (The products are set “Compared at price”). For example: You use the code Save {sale} for the sale label. The product “Solid Wood Side Table” is 25$ for price and 30$ for “Compared at price” (discount 17%). Using the {sale} variable in the content will lead to this result on the storefront’s sale label: Example Content: "20% off today only!" Result: OrExample Content: "Hurry! Only 15 items left in stock" Result: Icon Configuration: 3 options: Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Display Options: For each product card, you can decide to put the label ON the product image, or OUTSIDE the product image, with several options: ON the product image: Top left Bottom left Top right Bottom right Custom position OUTSIDE the product image: Below image Bottom of card Next to price (for Sale label only). For more details of how to customize the position of product labels, please refer to our video guide. Admin also can preview these adjustments in real-time within the theme editor, ensuring seamless customization and a visual understanding of the label positions on their storefront. Styles: Admin has the flexibility to customize label styles (square/rounded corners/rounded). Additionally, admin can adjust font size scale, label size, label opacity, and color according to their preferences. These customizable features empower administrators to tailor the visual appearance of labels on their storefront.Please refer to our video guide to customize label styles. b) Select products/collections to apply Image and Text labels: When selecting products or collections to apply Image and Text labels, there are two key configuration options: Apply to Products: Choose specific individual products to which you want the Image and Text labels to be applied. Useful when you have particular products that require custom labels. Apply to Collections: Select specific collections to which you want the Image and Text labels to be applied. Ideal for applying consistent labels to an entire collection of products. Note: If both collections and individual products are selected, the labels will appear on items that meet either of the criteria. This follows a logical OR configuration. This provides a flexible and targeted approach, allowing you to precisely control where your Image and Text labels are displayed c) Set up Schedule for Text label & Image label Admin also can schedule to display text labels and image labels on selected products by using the config group “Schedule”. Check the “Enable schedule” box to enable schedule, then you can choose the time zone you want to set the schedule on and set up exact time to start/stop showing the text/image labels. d) Set up Pre-order label To set up the Pre-order label, please follow these steps: Set up the icon: 3 options Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Enter the text for the Pre-order label. You can use special codes such as {sale} for discount percentage, {qty} for total quantity, {price} for product price, etc. Use HTML tags like <br /> to break lines or <b>your content</b> for bold text. Select the label type (Square/Rounded corners/Rounded). Set the font size scale for both desktop and mobile versions by using settings “Desktop font size scale” or “Mobile font size scale” Upload images if you prefer to use a visual label instead of text. Adjust the size and opacity settings for both desktop and mobile versions. Choose the label’s position on the product image (Top left/Bottom left/Top right/Bottom right/Custom position) and customize horizontal and vertical position as needed (Used with Custom position only). Configure the background, text, and border colors for both light and dark modes to match your store's theme. By following these steps, you will be able to successfully set up and customize Pre-order labels for your Shopify store. e) Set up New Product Label The New Product Label helps highlight recently added products based on the activation date. Follow these steps to enable and customize it: Step 1: Add the block In the theme editor, under Overlay > Product labels and badges section > Add the New Product Label block. Step 2: Set the duration & position of the label: On the New product label setting panel: ⭐ For duration: Under Show label within the number of days since, you can set the start date of your label by choosing: Option 1: Product creation date (default): Counts from when the product was first created in Shopify Admin. Option 2: Product activation date: Counts from the most recent activation date (useful if a product was deactivated and reactivated). Set the Number of days (e.g., 30) to display the label. ⭐ For position: Toggle Show on product card and Show on product page as needed. Step 3: Apply the Label Select specific Products or Collections where the label should appear in the Apply to products and Apply to collections settings. Step 4: Customize label content Icon: 3 options Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Content: Add a custom label text like “New” and use dynamic codes such as {sale} for discounts. Step 5: Adjust display settings Label type: Choose the shapes of the label: Square, Rounded corner, or Rounded. Font size & label size: Adjust for desktop and mobile views. Positioning: Select a preset position or define custom horizontal and vertical placements. Opacity: Adjust transparency for visibility. Color: Define background, text, and border colors for both light and dark mode. Step 6: Save the changes & preview. 4. How to show labels and badges on product cards? Enable the display of labels on product cards by activating in the section and enabling each label block. Step 1: Enable it in the section by clicking the Enable product labels and badges checkbox. Step 2: Tick the Show on product card config for each label block (sale label, sold out label, etc.). Tips: Keep in mind that due to the limited space on product cards, it's recommended not to display more than three labels on a single product card to avoid covering the product image. 5. How to show labels and badges on product pages? By adding the block in the Product labels and badges section, the labels only show on product thumbnails. In order to show labels on product page and other product sections (Quick view, Feature product), follow these steps: Step 1: Enable it in the section by clicking the Enable product labels and badges checkbox. Step 2: Enable the Show on product page config for each label block Step 3: Go to the needed section, add a 'Labels and badges' block anywhere you'd like, then click Save. 6. Using metafields for labels & badges. To learn more about setting up the product labels & badges with metafields, check out this guide. For more details of how to set up product labels, please refer to our video guide.
