Maximize - Overlay group
Maximize - Overlay group
Maximize - Overlay group
1. What is Store locator section? The Store locator allows you to display a map with store locations on your Shopify store. It is ideal for showcasing a physical store's location, offering directions to customers, or highlighting multiple business addresses. 2. Section Components Section Showing the locations of the store with a map for the online store. Available blocks Add a single store location. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Navigate to the Overlay settings group. Click "Add Section" Search for Store locator Click on it to add. 4. Highlight features Integrated Info Display: Show essential details like contact information or working hours. Actionable Button: Allow users to click and get directions or access other features. Mobile-Friendly Design: Ensure responsiveness and accessibility on any device. Customizable Labels: Adjust the text for your button and information fields. 5. Common Use Cases 🤔 How to set up the Store locator section? Don’t know where to start with your Store locator section? Start with this: STEP 1: Add & set up the Store locator section Add a Store locator section to the store. STEP 2: Add & set up the blocks Under Store locator section, add Store location blocks then: Add a Store image. Enter Location address, Pickup fee, Ready time message or Location details info like phone number/opening hours. At Button settings group, set up button to redirect customers to Google Maps for the store address. Enter button label and choose its style. Repeat this step with other blocks to set up multiple store locations. STEP 3: Refine the section look Click on Store locator section to open its settings panel: Adjust Content position. Enter Pickup button label. Choose Color scheme for the section. Enable Automatically select the first store to auto-select the first available store location by default. STEP 4: Click “Save” when done. Need help? Contact our support team at Omni Themes Support.
Maximize - 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. 2. Section Components Section Quick view Displays essential product information for quick preview. Available block Displays the name of the product. Shows the product's price. Displays the name of the product vendor. Shows the average customer rating and review stars. Indicates if the product is in stock, low stock, or out of stock. Displays the product's unique identifier code. Shows tags like "Sale", "New", or "Featured". Offers an option for gift wrapping service. Allows customers to select product variations (size, color, etc.). Enables customers to add the product directly to cart from the quick view. Shows a brief summary or key features of the product. Allows you to add custom text content, such as promotional messages or additional product details. Inserts a horizontal line to visually separate different sections of content within the quick view. Adds an empty space or adjusts the padding to control the spacing between elements. Allows advanced customization by inserting your own HTML code for unique features or integrations. Allows customers to sign up for notifications when an out-of-stock product is available again. Displays additional product customizations (e.g., engraving). Highlights a key feature with an icon (e.g., "Free Shipping"). Presents short information points with accompanying icons. Displays accepted payment icons (e.g., Visa, PayPal). Provides a link to navigate to the full product page. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Find the Overlay setting group on the left side. Search for Quick view (this section is added by default). 4. Core Features Customizable Information Display: Choose exactly which product details to show (title, price, rating, inventory status, etc.) by toggling blocks on/off. Direct Purchase Option: Enable Buy buttons to allow instant adding to cart without navigating to the product page. Back-in-Stock Alerts: Increase conversion by allowing customers to sign up for notifications when out-of-stock items are replenished. 5. Common Use Cases 🤔 How to set up a Quick view? Want to set up a Quick view but don't know where to start? Here are simple steps: STEP 1: Search for Quick view (this section is added by default). STEP 2: Add the blocks to show the information you want There are multiple types of blocks available for the Quick View. Here's how to set up the blocks: Block name How to set it up? Product title Adjust Heading size (Small, Medium, Large). Price Show tax/shipping info, adjust text size Configure sale label with dynamic codes like sale, sale_amount, qty, or price. Vendor name Link vendor to collection or select a page to open in a popup. Paste a custom link and choose to open in a new window. Product rating Install a product rating app to display ratings. Inventory status Automatically displays stock status (no settings). SKU/Barcode Automatically displays the product's SKU or barcode (no settings). Labels and badges Set label position (inline or on product media). Gift wrap Add gift wrapping label and set light/dark color icons. Variant picker Choose Type (Dropdown, Button). Enable color swatches to display color swatches for color variants Customize size chart with an option to link to a page. Buy buttons Toggle quantity selector, dynamic checkout, pickup availability. Customize pre-order labels, messages, and button style. Description Choose between tab or inline layout, add your product description. Customize the icon and expandable text labels for optimal content presentation. Text Enter text; use [brackets] for highlights. Set text transform, default content height, and "Read more" labels. Separator Inserts a dividing line (no settings). Space Adjust spacing. Custom HTML Insert custom code for advanced features. Back in stock alert Set heading, text, button label, and success message. Toggle shows only when product is unavailable. Customizable options Add text field, dropdown, file upload, date, etc. Set customizable options according to chosen option type. Featured icon Add up to 5 feature points with icon, heading, and text. Configure display rules per collection, choose icon sizes, borders, color schemes for light/dark modes, and set content alignment. Each feature can include custom icons, headings with optional links, and descriptive text. Text with icon Choose icon, set icon size, and enter text with highlight options. Customize background and text colors for light/dark modes. Payment methods Add heading and descriptive text. Enter payment method codes (e.g., apple_pay, google_pay) to custom payment icons. View product details Set button style (Primary/Secondary/Text link). STEP 3: Customize the overall look Click on the Quick view section to open its settings panel and: Choose how media carousel is displayed on mobile devices in Mobile carousel option. Choose Image ratio like Square (1:1), Landscape (4:3), Portrait (2:3), Wide (16:9), Standard (3:4). Set navigation buttons style. STEP 4: Click "Save" when done. 🤔 How to set up variant-specific images in Quick view? Want to display multiple images per product variant in Quick view but don't know where to start? Here are simple steps: STEP 1: Access your product in Shopify In Shopify admin, go to Products. Select an existing product or click "Add Product" to create a new one. STEP 2: Upload images & update variants In the Media field, click "+" and upload all the images you need. In the Variants section, choose Add options like size or color (product don't have any initial product) or Add another option (product have initial variant). Enter the option name and option values for your product. STEP 3: Edit ALT text Click the image to edit the ALT text The ATL Text is the same with Option value you set above, MUST follow this format: #option-value #: hashtag character option-value: written in lowercase, replace spaces with - Example: Inside the option name "Color", there is an option value called "Mint blue", then for all images representing this Mint blue option, enter #mint-blue for your alt tag and click "Save". All images related to one Option value use the same ALT text STEP 4: Setting up the Maximize Theme Click on the Quick view section to expand its settings. On the right panel, scroll down and enable Only show media associated with the selected variant. Fill in the Option name in Option to classify variant media. Example: Color STEP 5: Click "Save" when done. 🤔 How to show the Quick View button when hovering over a product card? Want to show the Quick View button when hovering over a product card but don't know where to start? Here are simple steps: STEP 1: Search for Quick view (this section is added by default). Click on the Quick view section to expand its settings. STEP 2: In the settings panel, scroll to the Product card settings. Toggle ON the Show Quick view button option. STEP 3: Customize the button label (Optional) In the Quick view button label field, enter your preferred text. If left empty, the default label "Quick view" will be used. ⚠️ Note: The Quick view button label is displayed on Desktop 🖥️ only, specifically on collection pages using the list view layout. STEP 4: Click "Save" when done. 🤔 How to show the Quick View button on Mobile? Want to show the Quick View button on Mobile but don't know where to start? Here are simple steps: STEP 1: Go to Theme Settings > Product cards. Find Overlay settings. STEP 2: Configure Mobile quick add button In the Overlay settings, enable the Show Quick add button and locate the Quick add mobile position option. Select your preferred position: Bottom of product card (displays below product info) On product image (overlays on product image) STEP 3: Customize the Button style. STEP 4: Click "Save" when done. 6. Common Questions Q: What about my ALT text for SEO purposes? A: Simply type your desired text in the ALT field before the # symbol, like this: Example: Super attractive and comfortable #mint-blue. Need help? Contact our support team at Omni Themes Support.
Maximize - Overlay group
1. Overview 1.1. What are product labels & badges? Product labels & badges are small but powerful visual indicators that appear on your product cards and product pages. They help highlight key information – like discounts, low stock, or new arrivals – so customers can make faster buying decisions. Increase conversion rate: Highlight what makes products special (new arrivals, discounts, etc.) to encourage faster purchase decisions. Improve store navigation: Help customers quickly differentiate products, or allow merchants to categorize products when multiple promotions or brands are involved. 1.2. Where can labels & badges appear? On product cards (both product media and product information). On product pages (both product media and product information). Please take a look at these examples to have a better understanding of how labels and badges look in different places: In this first example, they appear on the product cards. But here, we see them on the product media and product information section. Similarly, the labels and badges may also be shown in other sections that are related to products, such as Product Showcase, Product comparison grid, etc. 2. How to enable Product labels & badges? IMPORTANT: To begin using product labels in your store: Go to "Online Store" > "Themes" > "Customize". In Section settings > Overlay group > click on Product labels & badges section. In the section settings panel, turn on Enable product labels and badges. From here, you can start adding different label blocks to display them on product cards and product pages. 3. Section Components Section Displays labels and badges on the product cards and product pages. Available blocks (Each block is a type of label you can use) Automatically displays a label with a custom discount message and icon. Displays a label with a custom message and icon. Displays a label with a custom image. Highlights newly added products with a custom message and icon. Automatically displays a label for pre-ordered products with a custom message, image, and icon. Automatically displays a label for out-of-stock products with a custom message, image, and icon. 4. How to set up Labels (by Type) Some labels share the same setup flow. Use the guide below based on the type of label you want to show: 🤔 4.1. For: Sale label, Sold out label, or Pre-order label. These labels appear automatically based on the product’s status (e.g. discounted, sold out, or available for pre-order). Here’s how to bring them to life: STEP 1: Add the corresponding block under the section Under the Product labels and badges section, click “Add block” and choose the type of block you want (for example: Sale label) STEP 2: Add an icon(optional): Choose from the dropdown list. For custom icons, select “Use another icon” and either: Paste an icon name from the theme icon list, or Insert an SVG code. STEP 3: Customize the label content: To use TEXT as the label: Enter your wanted label text into the Content field. To show dynamic content for the labels, use these placeholders or formatting texts: {sale} discount percentage (e.g. 50%) {sale_amount} discount amount (e.g. $5 off) {qty} total inventory quantity {price} product price <br /> line break <b>text</b> bold text {metafield_key} display custom metafield (single line text only)(Read more about setting up Labels using Metafield) For example: {sale} OFF ⇒ 50% OFF, Only {qty} items left ⇒ Only 5 items left. Note: For the Sold out label type, you can only use <br/>, <b>, and {metafield_key}. To use IMAGE as the label: Scroll down to the Image setting, and upload the image to make it the label. STEP 4: Change the label’s position Scroll down to the Display setting group to find the Label position setting. 👉 For a detailed explanation, check the “5. Label positions settings” section below. STEP 5: Style your label In the Display & Color settings group, customize: Label shape (square, rounded corner, or circle) Text size (desktop & mobile) Opacity Background, text, and colors STEP 6: Click “Save” when done. 🤔 4.2. For: New product labels The New Product Label highlights newly added items based on how recently they were published. The setup steps are similar to the labels in 4.1, with a few key differences: STEP 1: Add the New Product Label blockIn the Product labels and badges section, click “Add block” → select New Product Label. STEP 2: Define the "new" time frame To automatically determine which products should show this label: Use the “Show label within the number of days since” dropdown to choose a reference point: Product creation date (default): Counts from when the product was first created in Shopify Admin. Product activation date: Counts from the most recent activation date (useful if a product was deactivated and reactivated). Then, enter a value in the “Number of days” field (e.g., 30) 📌 This means any product that falls within that number of days from the selected date will be considered "new." STEP 3: Choose how to apply the rule (important!)There are two ways to apply this label: ✅ Apply storewide: Leave both “Apply to products” and “Apply to collections” blank Result: The New Label will apply to all products that fall within the defined time frame (based on step 2) ✅ Apply to specific products or collections: Use the “Apply to products” and/or “Apply to collections” fields to select specific items Result: The New Label will only appear on matching products and only if they fall within the time frame STEP 4: Customize icon & label content Choose an icon from the dropdown, or select “Use another icon” to paste your favorite icons from this theme icon list, or upload an SVG. STEP 5: Adjust label appearance You can customize: Label position (e.g., top left, custom position) Shape: Square, Rounded corner, or Circle Font size & label size for desktop and mobile Opacity Color settings for both light and dark modes STEP 6: Click “Save” when done. 🤔 4.3. For: Image Labels Use Image Labels to visually highlight certain products or collections using a custom uploaded image (e.g. “100% Natural”, “Hot Pick”, etc.). STEP 1: Add the Image Label block Go to the Product labels and badges section → click Add block → select Image label. STEP 2: Apply the label to products or collections You have two targeting options: Apply to products – Select specific individual products. Apply to collections – Apply the label to all products in selected collections. STEP 3: Upload your label image Scroll to the Image setting and click Upload to add your custom image. 💡 Use PNG files with transparent backgrounds for the best appearance. STEP 4: Style your label In the Display & Color settings group, customize: Label shape (square, rounded corner, or circle) Text size (desktop & mobile) Opacity Background, text, and colors STEP 5: Schedule the label (optional) Toggle Enable schedule to show or hide the label within a specific timeframe. Set the start and end time using your preferred time zone. STEP 6: Click “Save” to apply your settings 🤔 4.4. For: Text Labels Use Text Labels to display messages like “Cruelty-free”, “Made in Vietnam”, or dynamic info (e.g. stock level, discounts) directly on product cards or pages. STEP 1: Add the Text Label block Go to the Product labels and badges section → click Add block → select Text label. STEP 2: Apply the label to products or collections You have two targeting options: Apply to products – Select specific individual products. Apply to collections – Apply the label to all products in selected collections. STEP 3: Add icon (optional) Choose an icon from the list OR choose “Use another icon” and either: Paste a name from the icon list Add a custom SVG code STEP 4: Customize label content Enter your message in the Content field. You can include dynamic variables and basic HTML: {sale} discount percentage (e.g. 50%) {sale_amount} discount amount (e.g. $5 off) {qty} total inventory quantity {price} product price {count_down} show a countdown timer inside the label. (Must enable schedule in STEP 6) <br /> line break <b>text</b> bold text {metafield_key} display custom metafield (single line text only)(Read more about setting up Labels using Metafield) 📝 Example: <b>{qty}</b> left in stock! → 5 left in stock! STEP 5: Style your label In the Display & Color settings group, customize: Label shape (square, rounded corner, or circle) Text size (desktop & mobile) Opacity Background, text, and colors STEP 6: Schedule the label (optional) You can schedule when labels appear and disappear based on your preferred timeframe. Toggle Enable schedule. In Repeat, choose the way you want your countdown timer to work & when the label appears: If you choose... How it works Example None - For label: Labels are shown on start time and hidden after a specified end time. - The label is shown from 8:30 AM of Jan 1st 2026 to 8:30 PM of Feb 1st 2026. - For countdown: The countdown runs from the start date to the end date (if you use {count_down} in Content field - as mentioned in Step 4) - The countdown shows the remaining time till end date & time. Weekdays - For label: It appears during that selected timeframe of the day only, then disappears and shows up again during that time the next day. Repeating this pattern until the End date. - The label is shown from 8:30 AM to 8:30PM daily, from Jan 1st 2026 (Start date) to Feb 1st 2026 (End date). - For countdown: Runs the countdown every day (or selected weekdays) between the Start Date and End Date, starting and ending at the times you set. (if you use {count_down} in Content field - as mentioned in Step 4) - The countdown shows the remaining time till end time Note: If you want the above pattern just happen on some day of the week, enter that day into the Display on field. If you enter [Monday, Wednesday] into the Display on field, then: - The label is shown from 8:30 AM to 8:30 PM on Monday and Wednesday only, from Jan 1st 2026 to Feb 1st 2026. - Every Monday and Wednesday, the countdown timer automatically starts at 8:30 AM, and shows the remaining time till 8:30 PM. STEP 7: Click “Save” to apply your settings 5. Label positions settings: This section covers how to control where labels and badges appear on your store. 🤔 5.1. How to display Labels in the Quick View section? To display labels and badges in the Quick view section, just follow these simple steps: STEP 1: In the Section setting > Overlay setting group > click on the Quick view section (this section is added by default). STEP 2: Add the Labels and badges block Under the Quick view section, click on “Add block.” Select Labels and badges from the dropdown to add this block. STEP 3: Customize the Labels and badges block Click on the Labels and badges block In the setting panel, set Label position to be Content inline or On product media. STEP 4: Click “Save” to apply your settings 🤔 5.2. How to display Labels in the Product Information section (Product page)? To display labels and badges in the Product information section, just follow these simple steps: STEP 1: Click on the Homepage dropdown menu > Collection > Default product. Enable the Product Information section to display it (this section is enabled by default). STEP 2: Add the Labels and badges block Under the Product Information section, click on “Add block.” Select Labels and badges from the dropdown to add this block. STEP 3: Customize the Labels and badges block Click on the Labels and badges block In the setting panel, set Label position to be Content inline or On product media. STEP 4: Click “Save” to apply your settings 🤔 5.3. How to display & customize Sale Labels in Product Cards To display sale labels in the product cards, just follow these simple steps: STEP 1: Go to Theme settings > Product cards. STEP 2: Display the sale label Scroll down to the Sale labels setting group. Enable the Show sale label. STEP 3: Customize the Sale label appearance Still at the Sale labels setting group: Fill the Sale label content field. Customize the color and text color in both light and dark mode. STEP 4: Click “Save” to apply your settings Need help? Contact our support team at Omni Themes Support.
Maximize - Overlay group
1. What is Popup? The Popup feature is a powerful tool for grabbing user attention and sharing key messages or promotions. The Maximize theme supports unlimited popups in both minimal and full-display styles, with customizable designs, countdown timers, and scheduling to create timely, high-converting promotional campaigns. 2. Types of Popups Promotion Popup: Great for highlighting promotions, sales events, or time-limited deals. You can include a countdown timer and a coupon code to motivate purchases. Newsletter Signup Popup: Makes it easy for visitors to join your mailing list. A simple way to collect leads and grow a loyal audience by offering updates and promos straight to their inbox. Minimal popup: Displays as a small sticky note at the bottom of the screen so it doesn’t cover the page. Users can click to expand for full details or actions. 3. Section Components Section Used to show a Popup with key messages and promotions. Available blocks Provide heading text to the popup. Provide additional information in a paragraph and optionally add a coupon code. Provide CTA buttons like “Shop Now” or “Subscribe.” Provide a visual time limit for promotions. Provide fields to collect user emails. Show icons that link to your social media platforms. 4. Location & Setup Go to "Online Store" > "Themes" > "Customize". Find the Overlay setting group on the left side. Click "Add Section". Search for Popup. Click on it to add. 5. Core Features Customizable layouts: Support minimal and full-display popup styles to match your preference. User engagement: Designed to capture attention and drive actions through clear CTAs and time-limited offers. Email collection: Built-in form to grow your subscriber list directly from the popup. 6. Common Use Cases 🤔 How to set up a promotional Popup? Want to set up a promotional Popup but don’t know where to start? Here are simple steps: STEP 1: Add the section Add the Popup section. STEP 2: Add blocks to show the information you want There are 6 types of blocks (see above). When you add the section, the 3 blocks Heading, Text, and Button are added by default. Add, edit, or delete blocks as needed. Block name How to set it up? Heading Enter the Heading and Subheading text. Choose the text color. Text Enter additional text. Optionally add a coupon code (e.g., SIMPLY10) and choose its color. For further info on coupons, see How to add a copyable coupon code to the Popup? Button Set the Button label (e.g., SHOP NOW), paste a Button link, and choose the button color. Countdown timer Set your Start & End time for the timer. For more details, see How to add a countdown timer to the Popup? Social icons Add this block to show social icons (especially useful on mobile). Email form Add this block to display a form to collect customer emails. STEP 3: Add image & adjust position Open the Popup section settings. Add an Image to the popup. Choose the Popup position for desktop display (e.g., Bottom left). STEP 4: Click “Save”. 🤔 How to set up the display rules for the Popup? Follow these to set up when and how the Popup will be shown on your site: STEP 1: Open the section settings and scroll to Display rules. STEP 2: Set up WHO sees it Turn on Show for guests only to show the popup only to non-logged-in users. Turn off to show to everyone. STEP 3: Set up WHEN it shows Enable schedule: Turn on to schedule show/hide (use the Countdown timer block to set start & end time). Delay: Set a delay (seconds) before the popup appears. Reappear after: Choose how many days later the popup should reappear for the same user. STEP 4: Set up WHERE it shows All pages (except Checkout): Add the Popup section to the Overlay group. Specific pages: Add the section to the Template group of that page. STEP 5: Click “Save”. 🤔 How to add a countdown timer to the Popup? STEP 1: Under the section, add a Countdown timer block. STEP 2: Click the block and set: Timezone (e.g., GMT-4:00) Start and End time STEP 3 (Optional): Customize colors for Background, Time, and Text (light & dark mode). STEP 4: Click “Save”. 🤔 How to add a copyable coupon code to the Popup? STEP 1: Add a Text block and open its settings. STEP 2: Add the coupon In the Text field, write your promotional message and place coupon_code where the code should appear. In the Coupon code input, enter your code (e.g., 100OFF). Edit the coupon color for light & dark modes. ⚠️ Note: To make the coupon redeemable, set it up in your Shopify admin. STEP 3: Click “Save”. 🤔 How to show Popup in minimal style? STEP 1: Open the section settings and scroll to Minimal popup. STEP 2: Enable and choose style Toggle Enable on desktop and/or Enable on mobile. Choose Default style on desktop/mobile: Full or Minimal. STEP 3: Enter the text shown on minimal popup (fields Title & Subtitle). STEP 4: Set position & overlay Go to Theme Settings > Design > Popup > Minimal popup position (Left/Right). Check Show popup overlay to add an overlay. STEP 5: Click “Save”. 🤔 What more customization options can you give your Popup? For the whole section What you can change ✨ Color scheme Choose the overall scheme for light and dark mode in Color scheme. ✨ Content alignment Change Heading alignment to Left, Right, or Center. ✨ Content position Set Content position to Left or Right. Need help? Contact our support team at Omni Themes Support.
Maximize - Overlay group
1. What is Product comparison? The Product comparison is designed to compare multiple products from your store. This feature helps shoppers quickly see which product offers the most advantages. 2. Section Components Section Displays multiple products’ details at once for comparison purposes. Available blocks Displays the product’s description from its product detail page in the Admin editor. Displays the product's unique identifier code. Displays the product vendor’s name. Shows the average customer rating and review stars. Displays details of a product metafield. Displays non-selectable product variations (size, color, etc.). Adds action buttons for the comparison table. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Enable comparison globally: In Theme settings > Product, scroll down to the Product comparison group and enable Enable product comparison. This adds “Add to Compare” buttons to product cards (collection/search pages) and product pages. Add the overlay section: In the Theme editor, open the Overlay group > click Add section > choose Product comparison. 4. Core Features Display customizable information: Choose exactly which product details to show (title, price, rating, inventory status, etc.). Showcase multiple products: Allow customers to see multiple product details at once. Increase conversion rate: Highlight which products are best suited to a customer’s needs for easier purchase decisions. 5. Common Use Cases 🤔 How to customize the Product comparison section’s overall look? STEP 1: In the Theme editor, open the Overlay group > select “Add Section” and click on Product comparison to add this section. STEP 2: Adjust the section’s overall look In the first setting group, customize Subheading, Heading, Text, and Grid. In Colors, choose the Color scheme for light and dark mode. STEP 3: Click “Save” when done. 🤔 How to set up the details of the comparison table? STEP 1: Search for the Product comparison section in the editor. STEP 2: Add and customize blocks Click on Add. Customize each block as needed: Block name How to set it up? Product description Change the Title. SKU Change the Title. Vendor name Change the Title. Optionally link the vendor to a collection and choose to open in a new window. Product rating Change the Title. Product metafield Change the Title. Display a product’s metafield detail by adding its metafield key. Variant option Change the Title. Show color variants as color swatches. Buttons Change the Button style to Primary, Secondary, or Text link. STEP 3: Click “Save” when done. 🤔 How to adjust the amount of products compared? You can compare up to 5 products. Follow these steps: STEP 1: In Theme settings > Product, scroll down to the Product comparison group. STEP 2: Drag to adjust Maximum products in compare (2–5). STEP 3: Click “Save” when done. Need help? Contact our support team at Omni Themes Support.
