Sections & Blocks
Sections & Blocks
Sections & Blocks
1. What is Quiz? The Quiz section lets you build a multi-step interactive product finder that guides shoppers to the right product based on their answers. Instead of browsing through your catalog, customers answer a short series of questions - and the section automatically recommends the best-matching products based on how each answer is configured. 2. Section Components Section Quiz Adds a multi-step interactive product finder that recommends products based on shopper answers. Available blocks Question Adds a question step to the quiz. Each Question block holds one or more Option sub-blocks as its answer choices. Option Adds an answer choice inside a Question block. Configures which products to match, partially match, or exclude when this option is selected. ⚠️ Note: Option blocks must be added inside a Question block — they cannot be added directly to the Quiz section level. 3. Location & Setup To add and set up the Quiz section: Open the Shopify Theme Editor (Online store > Themes > Customize). Navigate to the page where you want the quiz to appear. Click "Add section". Select "Quiz". 4. Highlight Features Multi-step flow: Shoppers move through one question at a time with Previous and Continue navigation buttons and a built-in progress indicator. Three-tier product matching: Each answer option can assign products as Strong match, Partial match, or Exclude (removed from results entirely) - giving you precise control over recommendations. Skip logic for branching paths: Configure any option to skip specific questions when selected, so the quiz adapts dynamically to each shopper's path. Fallback products: Set Default recommended products to display when no products match a shopper's answers. 5. Common Use Cases 🤔 How to build a product finder Quiz from scratch? Follow these steps to set up a complete quiz — from the intro screen to the results page. STEP 1: Add the Quiz section Add the Quiz section to your desired page (as guided in 3. Location & Setup). STEP 2: Set up the start screen Click on the Quiz section to open its settings panel. Fill in: Heading - the main title shoppers see before starting (e.g. "Find your personalized recommendations"). Subheading - a short supporting line (e.g. "2 minutes · 4 questions"). Description - a brief intro explaining what the quiz does. Note - optional small-print text, such as a privacy note. Button label - the call-to-action to begin (default: "START THE QUIZ"). STEP 3: Configure the results screen Scroll down to the Result settings group and fill in: Heading and Subheading - shown above the recommended products. Description - supporting copy on the results screen. Reset button label - the label for the retake button (default: "Reset Quiz"). Leave blank to hide the button. Maximum number of recommended products - controls how many results to display (1–5, default: 3). Default recommended products - fallback products shown if no answers produce a match. STEP 4: Add a Question block Under the Quiz section, click "Add block" and select Question. In the block settings: Enter a unique Question ID (e.g. q1, q2) - required if you plan to use skip logic (further guide in the next use case 🤔 How to use skip logic to create branching quiz paths?) Enter the Heading - the question text shoppers will see (e.g. "Who are you shopping for?"). Optionally add a Description for extra context below the question. STEP 5: Add Option blocks inside the question Under the Question block, click "Add block" and select Option. Repeat for each answer choice. For each Option block, configure: Heading - the answer label shoppers see (e.g. "For me", "As a gift"). Strong match - select products that are the best fit for this answer. These receive the highest recommendation weight. Partial match - select products that are a good-but-not-perfect fit. These receive a lower weight than Strong matches. Exclude product - select products that must never be recommended if this answer is chosen. STEP 6: Repeat for additional questions Add more Question blocks under the Quiz section and populate each with its Option blocks. Aim for 3–5 questions for the best completion rates. STEP 7: Click "Save" and preview. 🔍 Information: The scoring system works as follows - each time a shopper selects an option, all Strong match products receive +2 points and all Partial match products receive +1 point. Any product set as Exclude in a selected option is removed from the results entirely, regardless of its score from other questions. The top-scoring products (up to the Maximum number of recommended products) are shown on the results screen. 🤔 How to use skip logic to create branching quiz paths? Skip logic lets the quiz jump over certain questions based on what a shopper selects - so different shoppers see a different path through the quiz. This is useful when some questions are only relevant to a subset of your audience. 🔍 Information: Skip logic works by matching Question IDs. When a shopper selects an option that has Question IDs in its Skip questions field, those questions are hidden for the rest of that quiz session. Questions can only skip forward - you cannot skip back to a previous question. Skipped questions do not count toward product scoring. STEP 1: Assign Question IDs to your questions Click on each Question block and enter a short, unique Question ID in its settings (e.g. q1, q2, q3). You only need to assign IDs to questions that you may want to skip. STEP 2: Configure the skip on the relevant Option block Click on the Option block where selecting it should trigger a skip. In its settings, find the Skip questions field and enter the Question IDs of the questions to skip, separated by commas (e.g. q3, q4). STEP 3: Click "Save" and test the path in preview. Walk through the quiz as a shopper would - select the option with skip logic configured and confirm the target questions are hidden. Then go back and select a different option to confirm those questions reappear correctly. ⚠️ Note: If a shopper goes back and changes an answer that was previously triggering a skip, the skipped questions will reappear - and any answers they had selected in those questions will be cleared automatically. 🤔 How to add icons or images to answer options? Making answer options visual helps shoppers scan and select more confidently. You can add a theme icon, a custom image, or an SVG to each Option block. STEP 1: Open the Option block settings Inside a Question block, click on the Option block you want to customize. STEP 2: Choose your icon type In the Icon setting, select from: None - no icon displayed. Use another icon - pick from the theme's built-in icon library. Any other value - upload a Custom icon image or paste a Custom icon (SVG code). STEP 3: Adjust icon appearance Use Icon position to control where the icon appears relative to the option text. Use Icon size to set how large the icon renders. STEP 4: Click "Save" when done. 💡 Tip: Keeping icon sizes consistent across all options in the same question gives the quiz a cleaner, more polished look. 6. Support Information Need help? Contact support@omnithemes.com or visit omnithemes.com.
Sections & Blocks
1. What is Buy your own bundle? Buy your own bundle section (available from Eurus 9.5 version) allows customers to create a custom product bundle by selecting items step-by-step in a logical and thoughtful process. It also helps increase average order value by encouraging customers to purchase multiple complementary items in a single transaction. 2. Section Components Section Buy your own bundle Create a custom product bundle by selecting step-by-step. Available blocks Step Add a single bundling step with product display for each step. 3. Location & Setup To add and set up the Buy your own bundle section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add section". Select "Buy your own bundle". 4. Highlight Features Step-by-step bundling flow: Guide customers through creating their own bundle, one step at a time, with clear progress indicators. Flexible product selection: Choose products from collections or hand-pick items for each step. Flexible bundle discount: Support Quantity-based and Purchase amount-based automatic discounts. Easily syncs discount tiers created in Shopify Admin. Bundle summary panel: A dedicated summary block shows selected products, pricing, and applied discounts—fully customizable in layout and color. Promotion highlight per step: Showcase images, videos, messages, and CTAs to promote offers or featured products inside any step. 5. 🚨 MUST READ: Before you start Setting up the Buy your own bundle requires TWO ESSENTIAL PROCESSES: Process 1: Set up bundling steps (set up bundling steps and how products/collection are displayed in each step) Process 2: Set up Bundle discount (how the discount works when bundling) The Bundle discount supports two types of discount codes: ✅ Quantity-based Discounts Discounts are triggered when customers buy a certain number of items. Example: Buy 10+ items → Get $5 off, Buy 20+ items → Get $10 off → Go to Process 2.1: How to set up bundle discount using QUANTITY OFF DISCOUNT? to learn more ✅ Purchase Amount Off Discounts Discounts are triggered when customers spend a certain amount of money. Example: Spend $100 → Get 5% off, Spend $200 → Get 10% off → Go to Process 2.2: How to set up bundle discount using PURCHASE AMOUNT OFF DISCOUNT? to learn more 6. Step-by-step Setup 🤔 Process 1: How to set up bundling steps? The first process is to set up bundling steps. Follow this: STEP 1: Add the section & blocks Add Buy your own bundle section. Under the section, you can add up to 5 Step blocks, with each block representing 1 bundling step. STEP 2: Set up the display of the step label Click on the Step block to open its settings panel. Enter Step title. Choose Step icon. STEP 3: Select products for the bundling step At Bundle settings group: Select collection or hand-pick up to 50 individual products at Select products, whether they belong to a set or complement each other. (Only for collection select) Choose the Maximum number of products shown. Note: If you select both individual products and collections, the individually selected products will override any chosen collections. Set the Maximum number of products per load to control how many products are loaded at a time. A Load more button will appear, allowing customers to load more products. STEP 4: Additional bundle setup Still at Bundle settings group: Enable Show highlighted features to show custom text on product cards. (To create highlighted features, follow this guide). For the checkbox "Each product can be added to bundle once": Yes (Default): Each product can be added to the bundle only once, but if the product has multiple variants, each variant can also be added once. For example, if Product A has variants 1A, 1B, 1C, and 1D, you can add each variant - 1A, 1B, 1C, and 1D - once to the bundle. Each variant is treated as a separate product. After adding a specific variant, the "Add to bundle" button will be disabled for that variant. No: Show quantity selector settings will appear to let customers adjust the quantity of each product they want to add to the bundle. For example, if product A has variants 1A, 1B, 1C, and 1D, you can add 1A twice, 1B four times, 1C once, and 1D six times to the bundle - no limits. Enter Minimum products required and Maximum products allowed to set limits for the number of products added at the step. If you don’t want to set limits, leave this blank. STEP 3: Click "Save" to apply changes. Repeat these steps for setting up other bundling steps. 🤔 Process 2.1: How to set up bundle discount using QUANTITY OFF DISCOUNT? 1. Create discount codes in Shopify Admin STEP 1: Go to Shopify Admin → Discounts → Create discount STEP 2: Choose the "Amount off products" discount type. STEP 3: Make sure you choose "Automatic discount". STEP 4: Set the Discount value (this will be displayed in your bundle discount), and the Eligibility of the discount. STEP 5: Set the Minimum purchase requirements > tick Minimum quantity of items > fill in the required number (this will be displayed in your bundle discount as well). STEP 6: Click "Save". STEP 7: Repeat for each tier (create a separate discount for each goal) Example setup: If you want 3 discount tiers, create 3 automatic discounts: Discount 1: $5 off when buying 10+ items Discount 2: $10 off when buying 20+ items Discount 3: $15 off when buying 30+ items 2. Set up the bundle discount in Theme editor STEP 1: Open the settings Click on Buy your own bundle section to open its settings panel. STEP 2: Set up the discount type & goal message Scroll down to Bundle discount settings group: At Calculate discount by, choose the Items quantity option. Enter Pre-goal message (Message shown BEFORE goal is reached). You need to use these placeholders to add dynamic value: [x] = automatically shows the remaining quantity needed. [goal_label] = automatically shows the goal label you entered. Enter Post-goal message (Message shown AFTER goal is reached). STEP 3: Match the goals Scroll down to the Goal 1 section and fill in the values: Field name What to fill in? Goal 1 Enter the exact threshold you set earlier in Shopify admin (e.g., 10) Goal 1 label Enter discount description for the tiers table (e.g., "$5 off each") Discount type Choose the exact discount type (Percentage or Amount) set in Shopify admin. Discount value Fill in the exact discount percentage or amount of your discount rule in Shopify admin. Only apply discount once per order (Only for Amount Discount type) Enable this if you want the discount to apply only once to the order. If disabled, the discount applies per eligible item and multiplies based on the quantity of qualifying products. STEP 4: Repeat these steps for goals 2,3. STEP 5: Click "Save" when done. 🤔 Process 2.2: How to set up bundle discount using PURCHASE AMOUNT OFF DISCOUNT? 1. Create discount codes in Shopify Admin STEP 1: Go to Shopify Admin → Discounts → Create discount STEP 2: Choose the "Amount off products" discount type. STEP 3: Make sure you choose "Automatic discount". STEP 4: Set the Discount value (this will be displayed in your bundle discount), and the Eligibility of the discount. STEP 5: Set the Minimum purchase requirements > tick Minimum purchase amount > fill in the required number (this will be displayed in your bundle discount as well). STEP 6: Click "Save". STEP 7: Repeat for each tier (create a separate discount for each goal) Example setup: If you want 3 discount tiers, create 3 automatic discounts: Discount 1: 5% off when spending $100 Discount 2: 10% off when spending $200 Discount 3: 15% off when spending $300 2. Set up the bundle discount in Theme editor STEP 1: Open the settings Click on Buy your own bundle section to open its settings panel. STEP 2: Set up the discount type & goal message Scroll down to Bundle discount settings group: At Calculate discount by, choose the Items purchase amount option. Enter Pre-goal message (Message shown BEFORE goal is reached). You need to use these placeholders to add dynamic value: [x] = automatically shows the remaining quantity needed. [goal_label] = automatically shows the goal label you entered. Enter Post-goal message (Message shown AFTER goal is reached). STEP 3: Match the goals Scroll down to the Goal 1 section and fill in the values: Field name What to fill in? Goal 1 Enter the exact threshold you set earlier in Shopify admin (e.g., 100) Goal 1 label Enter discount description for the tiers table (e.g., "5% off") Discount type Choose the exact discount type (Percentage or Amount) set in Shopify admin. Discount value Fill in the exact discount percentage or amount of your discount rule in Shopify admin. Only apply discount once per order (Only for Amount Discount type) Enable this if you want the discount to apply only once to the order. If disabled, the discount applies per eligible item and multiplies based on the quantity of qualifying products. STEP 4: Repeat these steps for goals 2,3. STEP 5: Click "Save" when done. 7. Other Customizations 🤔 How to set up promotion highlight for each bundling step? With each bundling step, you can add a promotion highlight for a further promo message, like this: Here’s how to set up the promotion highlight: STEP 1: Open the settings Click on the Step block that you want to display a promotion highlight. STEP 2: Enable promotion highlight Scroll down to Promotion highlight settings group, toggle Enable promotion highlight ON. The setup configs will open right after. STEP 3: Set up promotion highlight Click on the block to open its settings panel: For media content, upload Image or Video based on your preference. For text content, you can enter Heading, Subheading, or further Description. For navigation, enter Button label and paste a link to redirect customers. Choose colors for promotion highlight block elements. STEP 4: Customize the promotion highlight display Still at the Desktop layout/Mobile layout settings group: Choose the Number of columns wide (Adjust the width of the promotion highlight block) Choose the Number of rows tall (Adjust the height of the promotion highlight block) STEP 5: Click “Save” when done. Repeat these steps for setting up Promotion highlight at other Step blocks. 🤔 How to customize Buy your own bundle section’s general look? STEP 1: Open the settings Click on Buy your own bundle section to open its settings panel. STEP 2: Customize general elements Enter Heading, Subheading, or further Description. Enter a label for the button “Add to bundle” Adjust Step icon size. STEP 3: Customize Variant picker display In the Variant picker settings group, you can choose how the variant picker displays on each bundled product card. At Type settings, choose among: Adapt to variant type in theme settings (Default): The variant picker style follows the setting configured in Theme Settings > Product > Variant picker. Dropdown: All variant pickers on bundle product cards display as a dropdown, regardless of the theme setting. Button: All variant pickers to display as buttons, regardless of the number of options or the theme setting. You can also set the maximum number of variants displayed in button form; variants exceeding this limit will automatically switch to dropdown form. STEP 4: Enable carousel for the section At Carousel settings group: Toggle Enable carousel on desktop and Enable swipe on mobile ON. STEP 5: Customize section layouts At Desktop layout/Mobile layout: Adjust Block spacing and padding. Enable section divider if you wish. For Mobile layout, choose how many products are shown on each row. STEP 6: Customize Bundle summary look Still at Buy your own bundle section, scroll to Bundle summary: Choose bundle layout for desktop devices. Enter Bundle heading Choose colors for Bundle summary elements STEP 7: Click “Save” when done 8. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is Flexible area? The Flexible area is a powerful new design feature that gives merchants complete freedom to arrange content without being limited by rigid section structures. Instead of being locked into fixed section layouts, you can mix and match blocks—like text, images, products, or videos—and place them with more flexibility. Even more, Flexible area supports Item group, allowing you to combine multiple elements (e.g., Image + Heading + Button) into a reusable mini-block. 2. Section Components Section Flexible area Add a section with customizable, flexible layouts. Available blocks Button Used to add a call-to-action button. Collapsible tab Used to organize content into expandable tabs, allowing users to reveal or hide details easily. Collection Used to showcase a product collection. Countdown timer Used to show remaining time for the sale with customizable display options. Discount code Used to display or highlight a discount code that customers can apply in the cart and at checkout. HTML Used to insert custom HTML code. Heading Used to add a heading. Icon Used to place an icon for visual emphasis. Image Used to upload and display an image. Rich text Used to insert styled text content. Text with icon Used to add a combination of icon and short text snippets. Video Used to embed a video. Media with text Used to combine media with supporting text. Separator Used to add a separator line to distinguish between different sections. Item group Used to group multiple elements (e.g., Image + Heading + Button) into a reusable mini-block. 3. Location & Setup To add and set up the Flexible area section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add section". Select "Flexible area". 4. Highlight Features AI integration: Use AI-powered content blocks directly inside the section. Rich in blocks: Mix product, image, text, and video blocks freely. Nested item groups: Group multiple blocks (e.g., Image + Heading + Button) into reusable mini-blocks for more structured design control. Section in section: Add Media with text section right into Flexible area section. 5. Common Use Cases 🤔 How to group multiple elements (e.g., Image + Heading + Button) into a reusable mini-block? The Item group block is used to group multiple elements (e.g., Image + Heading + Button + Icon) into a reusable mini-block. This block feature is new and easy to follow in just a few steps: STEP 1: Add the Item group block Under Flexible area section, add an Item group block. STEP 2: Add the sub-level blocks Under Item group block, add any blocks that you want to 'nest' in, even another Item group block! Not only can you add, but you can also drag and drop blocks to nest. STEP 3: Click "Save" to apply changes. 🤔 How to adjust the width of the blocks in the section? Each block in the Flexible area section (except for the HTML block) can adjust its width. This lets you control how much horizontal space a block takes up, so you can create layouts to your preference. To customize the width of the blocks: STEP 1: Inside the Flexible area section, click on the block you want to customize to open its settings panel. STEP 2: Adjust its Desktop width and Mobile width. 📊 Suggested block width options: Width Option Column Layout Equivalent Best Use Case / Recommendation Full Width (100%) 1 column Large images, banners, hero sections, or anything that should span the entire row. 50% 2 columns Pairing an image with text, side-by-side content blocks, or evenly split layouts. 30% 3 columns Creating a three-column layout (e.g., feature highlights, service cards). 25% 4 columns Four equally sized blocks (e.g., product categories, quick links). 20% 5 columns Narrow blocks, good for icon grids or small visual elements. 16% 6 columns Very small blocks, useful for multi-item icon or stat displays. 66% 2:1 split Pair with a 33% block for a layout with a dominant content area and a sidebar. STEP 3: Click "Save" to apply changes. 🤔 How to generate a block using AI in the Flexible area section? To generate a block utilizing AI, follow this, it's super easy: STEP 1: Add Generate block Under Flexible area section, click Add block and choose Generate. STEP 2: Enter the prompt At Generate block, enter a prompt in the box, describing the block you want to build. For example: An interactive vertical timeline that highlights as the user scrolls. STEP 3: Wait for the block to be generated and customize it as you need STEP 4: Click "Save" to apply changes. ⚠️ Limitations when generating a block with AI Prompt quality matters: You need to provide a clear and detailed prompt to get results close to what you expect. Possible bugs from Shopify: This AI generation is an early version of the Shopify Summer Edition 2025 release that might create some glitches or unexpected outputs. 🤔 Suggested layout: Image with features Here’s Image with features layout you can create by using Flexible area section. This use case will guide you through how to recreate it: STEP 1: Add the section Add the Flexible area section (as guided in 3. Location & Setup) STEP 2: Enter the heading for the section Click on Flexible area section to open its settings panel: At Heading, enter "Wet food is the healthy choice" Choose Heading alignment - Center and adjust its size. STEP 3: Add the blocks Under Flexible area section, add blocks following this layer order: Item Group (for left column features) Image (for the center image) Item Group (for right column features) STEP 4: Adjust the layout To make the blocks under Flexible area section look balanced, set the Desktop width for each block: Column Block name Width Left Item group 25% Center Image 50% Right Item group 25% STEP 5: Customize the blocks 👉 With each Item group nested block: Click on Icon block: Upload Custom icon image, adjust Alignment, and Icon size. Click on Heading block: Enter Heading, choose size, and Alignment. Click on Rich text block: Enter Text, choose size, and Alignment. 👉 With the Image block: Upload Image, choose Image style - Rounded and Image ratio - Square (1:1). STEP 6: Click "Save" when done. 🤔 Suggested layout: Pricing plans Here’s the Pricing plans layout you can create by using Flexible area section. This use case will guide you through how to recreate it: STEP 1: Add the section Add Flexible area section (as guided in 3. Location & Setup) STEP 2: Enter the heading for the section Click on Flexible area section to open its settings panel, enter Heading and Text for the section. STEP 3: Add the blocks To create the Pricing plans layout above, under Flexible area section, you need to add 4 Item group blocks. Inside each Item group block, add these blocks: Rich text Heading Rich text Separator Rich text Separator Button STEP 4: Customize the blocks 👉 With each Item group nested block: Click on Heading block: Enter Heading, choose size, and alignment. Click on Rich text block: Enter Text, choose size, and alignment. Click on Separator block: Choose Desktop with, and alignment. Click on Button block: Enter Button label, Button link, then adjust its color and alignment. STEP 5: Adjust the layout To make the blocks under Flexible area section look balanced, set the Desktop width for each Item group block to 25%. Adjust the top/padding and background color. STEP 6: Click "Save" when done. 🤔 Suggested layout: Cards Here’s the Cards layout you can create by using Flexible area section. This use case will guide you through how to recreate it: STEP 1: Add the section Add Flexible area section (as guided in 3. Location & Setup) STEP 2: Enter the heading for the section Click on Flexible area section to open its settings panel, enter Heading and Text for the section. STEP 3: Add the blocks To create the Pricing plan layout above, under Flexible area section, you need to add 3 Item group blocks. Inside each Item group block, add these: Image Image Rich text Heading Rich text Button STEP 4: Customize the blocks 👉 With each Item group nested block: Click on Image block: Upload Image, choose its ratio, width, and alignment. Click on Heading block: Enter Heading, choose size, and alignment. Click on Rich text block: Enter Text, choose size, and alignment. Click on Button block: Enter Button label, Button link, and choose Text link button style. Adjust its color and alignment. STEP 5: Adjust the layout To keep the blocks in the layout balanced on desktop: Set the Desktop width of each inner Item group block to 30%. Wrap these three Item group blocks inside a parent Item group block. Set the parent Item group block’s Desktop width to 100%. Adjust the top/padding and background color. STEP 6: Click "Save" when done. 6. Support Information Need help? Contact support@omnithemes.com or visit omnithemes.com.
Sections & Blocks
1. What is Featured categories? The Featured Categories section allows you to display key product categories or collections in an eye-catching layout. This section is perfect for helping customers navigate your store by showcasing your top product types using large headings and visually engaging category images. 2. Section Components Section Featured Categories Showcases selected product categories as clickable cards with images and titles. Available block Category Used to add a category card with a title, collection link, and optional custom image. 3. Location & Setup To add & set up the Featured Categories section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add Section”. Select “Featured Categories”. 4. Highlight Features Custom Images: Use different visuals for each category to match branding or seasonal campaigns. Image Style Control: Choose between rounded or square thumbnails. Independent Layout Settings: Adjust padding, alignment, and image size for desktop and mobile views. Minimalist or Detailed: Show or hide item counts and dividers depending on your design preference. 5. Common Use Cases 🤔 How to set up the Featured categories? Don’t know where to start with this Featured categories section? Just follow these steps: STEP 1: Add the section Under Template, click “Add section” and choose Featured categories STEP 2: Add & set up the category blocks Under the Featured category section, there are 3 Category blocks by default. To add more, just click “Add Category”. Then: Click on a Category block to open its settings panel. You can: Choose a Category (a collection) Enter a name in the Category title field. Repeat the steps for other Category blocks. STEP 3: Customize the overall look of the section: Tap on the Feature categories section to open its settings panel, and: Give your section a title under the Heading field. You can highlight part of the title by wrapping it with square brackets, e.g. [Shop] by Category. Adjust layout options like title, image, border, and item counts under the Category card group settings. STEP 4: Click “Save” and preview. 🤔 How to display custom images for each category? STEP 1: Under the Featured categories section, click on a Category block to open its settings panel. STEP 2: Click “Select” under Custom image to upload a specific image representing the category. STEP 3: Repeat for each block with different categories and images. STEP 4: Click “Save” when done. 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is Video looping? The Video looping section is the feature that showcases videos with the choice to feature products in those videos, allowing customers to shop directly while watching intuitive videos. Besides, a looping effect is added to videos, making them catchy, dynamic, and hard to ignore. Video shopping vs Video looping: What's the difference? Basically, these two sections serve the same purpose, but the video looping provides a more dynamic sliding effect for the videos, making the center video more eye-catching. The video shopping section’s look: 2. Section Components Section Video looping Showcase videos with a looping effect. Available block Shoppable video Used to add a separate video and products for users to shop directly. 3. Location & Setup To add and set up the Video looping section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add Section". Select "Video looping". 4. Highlight Features Auto-looping videos: Capture attention with videos that play on repeat. Shop the look: Integrate products and sell directly from the videos. Add social proof: Attach social media info like username, post link, caption and more. 5. Common Use Cases 🤔 How to set up Video looping section? Want to set up Video looping section? Here's how: STEP 1: Add the section Add the Video looping section. STEP 2: Set up a Shoppable video block Click on a Shoppable video block to open its settings panel, and: Click "Select" to add your Video (or embed a video from YouTube or Vimeo). (Optional) If you want to feature your products on the video: Assign your Product under the First product setting group. You can add up to 5 products for a video under the Second product, Third product, Fourth product, and Fifth product setting groups. Repeat this step for other blocks. Note: YouTube Shorts links must be modified before embedding. You can’t use the original link directly. Here's how: Replace shorts/ with watch?v= in the URL. For example: Original link: https://www.youtube.com/shorts/UCMeqidhew Updated link: https://www.youtube.com/watch?v=UCMeqidhew STEP 3: Customize the section's overall look. Click on the Video looping section to open its settings panel, and: Edit the Heading, Subheading, and Text if you want to. Under the Shoppable video setting group: Choose where to place your product card in the Product card position. Toggle Apply black‑and‑white effect on non-focused video ON to display non-focused videos in black and white while keeping the currently focused video in full color. Change the Colors of the section elements you want. Choose to show the section divider, adjust the padding, block spacing, and make the section full-width for desktop 🖥️ and mobile 📱 layout. STEP 4: Click "Save" when done. 🤔 How to adjust the carousel effect of Video looping? Click on the Video looping section and find the Carousel setting group in the setting panel: To enable carousel on mobile: The Video looping section automatically showcases in a carousel layout on desktop. However, to enable carousel on mobile devices, in the Video looping settings panel, you need to Enable swipe on mobile. Video looping on mobile Video looping when enabling swipe on mobile To make the videos slide automatically: Turn on Enable auto-play. To show the arrows so customers can click to see the next videos: toggle "Next/Previous arrows". To show pagination at the bottom of the video: toggle "Show pagination". Click "Save" when done. 🤔 How to use Shop the look feature inside Video looping section? In the Shoppable video block, if you have more than 1 product, the list of products will be shown in a pop-up instead of covering the video card. Therefore, the customers can experience the products more easily with a Shop the look feature inside this pop-up. STEP 1: Click on the Video looping, under Shoppable video, and turn on Enable hotspots in the look. STEP 2: Click on a Shoppable video block, then find the Shop the look in video, and upload an Image you want to use as the main image. STEP 3: Adjust the hotspot position for each product on both 🖥️ Desktop and 📱 Mobile by changing these four settings under the right group: Hotspot desktop horizontal position Hotspot desktop vertical position Hotspot mobile horizontal position Hotspot mobile vertical position STEP 4: (Optional) Choose colors for hotspot Still in the Video looping section > go to Colors setting group > choose your Hotspot color (light/dark). STEP 5: Click "Save" when done. 🤔 How to add social media information to the Video looping pop-up? Want to showcase social media information in the pop-up when customers click on the video? Here's how: STEP 1: Click on the Shoppable video block, and find the Social accounts setting group. STEP 2: Choose the Integrated social media from the list to show its platform icon. STEP 3: Type in your Account username. STEP 4: Add a link to your Social account URL. STEP 5: Add the content to the Social post field. STEP 6: Click "Save" when done. 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is Social Feeds? The Social Feeds feature lets you upload social media images/videos on their storefront, creating an engaging gallery that doubles as authentic testimonials, helping build trust and highlight product quality through real customer feedback. Merchants can also attach social account details like social avatar, username, social platform, post link, post content, and integrate the products shown in the post as well. 💡 Note: Social posts require manual upload and can't auto-sync with your social accounts. If you want to create an Instagram feed that can auto-sync your Instagram posts to the storefront, check this guide. 2. Section Components Section Social Feeds Display a gallery of social media images/videos with rich interaction and product integration. Available block Social Post Used to add individual social media posts with avatar, username, caption, link, and tagged product (if any). 3. Location & Setup To add & set up the Social Feeds section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section Click "Add Section" Select "Social Feeds" 4. Highlight Features Rich Media Support: Showcase real customer feedback through social post galleries. Attach post details: Social avatar, username, caption, platform, and links. Product Tagging: Tag and display products directly on the post image. Interactive Elements: Clickable posts with expandable content and social links. 5. Common Use Cases 🤔 How to set up the Social feeds section? Want to display Social feeds on your store? Here's how: STEP 1: Add the Social Feeds section to the desired position. STEP 2: Set up the Social Post blocks By default, your Social Feeds section includes 4 Social Post blocks. You can add more if needed. Click on a Social Post block to customize: Upload Social post image or Social post video. Toggle "Enable video autoplay" for autoplay on scroll. Enter Social post content (appears when clicked). Add Social post link (for example: redirect to original post). STEP 3: Customize the section appearance: Add a Heading (use [ ] for highlight effect) Add Subheading and Text Set a CTA Button: label, link, and social media icon Select Media ratio: 1:1, 2:3, 3:4, 9:16, or original Choose Columns per row for desktop 🖥️ and mobile 📱 STEP 4: Click “Save” when done. 🤔 How to enable carousel for the Social feeds section? Want to make the social posts auto-switch? Here's how: STEP 1: Click on the Social Feeds section to open settings. STEP 2: Under Carousel settings: Enable carousel: 🖥️ Toggle "Enable carousel on desktop" 📱 Toggle "Enable swipe on mobile" Toggle "Show navigation" for arrows Set "Change slides every" for timing STEP 3: Click “Save” when done. 🤔 How to show social account information when clicking on a social image? Want to show your customer's social avatar and username like this? Here's how: STEP 1: Click on the Social Post block to open settings. STEP 2: Under Social Account settings: Select Integrated social media (platform logo) Enter Username Upload Avatar STEP 3: (Optional) Repeat for other blocks. STEP 4: Click “Save” when done. 🤔 How to add products to each social post? If you want to integrate products into the post for better sales, like this: Here's how to do it: STEP 1: Click on the Social Post block to open its settings panel. STEP 2: Under Products settings: Select products (up to 4) Toggle "Show products on images" to overlay them STEP 3: Click “Save” when done. 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is Timeline? Timeline feature allows merchants to showcase important milestones in their brand, products, or projects’ development journey. The feature is a powerful storytelling tool that builds trust and helps visitors quickly understand your brand’s evolution and values. 2. Section Components Section Timeline Creates a chronological display of important milestones in your brand, product, or project journey. Available block Milestone Add individual entries with a title, date, description, and image/video. 3. Location & Setup To add & set up the Timeline section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add Section”. Select “Timeline”. 4. Highlight Features Chronological Display: Present milestones in sequential order for clear storytelling Rich Media Support: Add images, Shopify-hosted videos, or embedded videos from URLs Carousel Mode: Auto-advance through milestones with customizable timing Interactive Navigation: Timeline axis with clickable milestone labels Responsive Design: Adapts beautifully across all device sizes 5. Common Use Cases 🤔 How to set up Timeline section? Want to set up a Timeline to highlight your brand’s milestones? Here's how: STEP 1: Add the Timeline section to your desired location STEP 2: Set up each Milestone block By default, your Timeline section includes 3 Milestone blocks. If you want more, you can add up to 50. Click on the Milestone block to open its settings panel and customize these: Add Image or Video (Shopify-hosted or embedded via URL). If both are added, the image is shown as the thumbnail for the video. Under Content settings group, you can: Add Navigation label (milestone name on the timeline axis, e.g., 2022) Add Subheading, Heading, and Description Add a Button label and Button link STEP 3: Customize the Timeline section look Add a Heading — wrap text in [ ] to add a highlight effect Add Subheading and Text Choose the Media ratio: 1:1, 4:3, 16:9, or Adapt to media STEP 4: Click “Save” when done. 🤔 How to enable carousel for the Timeline section? Want to make the milestones auto-slide every few seconds? Here's how: STEP 1: Click on the Timeline section to open its settings panel. STEP 2: Under the Carousel setting group: Adjust Change milestones every to set timing for auto-switching Toggle Pause on hover to stop sliding when hovered Toggle Next/Previous arrows to show navigation buttons STEP 3: Click “Save” when done. 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is Testimonial with cards? Testimonial with cards is a section that contains statements or endorsements given by customers, clients, or users of a product or service, expressing their satisfaction and positive experiences. The testimonials use a card-based layout to make the content more engaging and easier to scan. 2. How to set up Testimonial with cards section? Want to set up the section but don’t know where to start? Follow these steps: STEP 1: Add a section: In Theme Editor, under Template, click “Add block” to add the Testimonial with cards section to your desired place. STEP 2: Customize the section: Click on Testimonial with cards section to open its setting panel, and then: Add a Heading and choose its alignment, or size. Enter Subheading and Text for further content. (Optional) Add a text highlight effect to the heading. Choose the Image style for the testimonial cards. Choose the Colors for the elements of the section. (Optional) Choose to show the section divider and adjust padding for desktop 🖥️ and mobile 📱 layouts. STEP 3: (Optional) Set up auto-play for the section: Toggle Enable auto-play to make the testimonial cards swipe automatically. Adjust Change slides every setting to set how long each card is displayed before switching to the next one. STEP 4: Click “Save” when done. 3. How to add and set up each testimonial card? Each Testimonials block presents a Testimonial card. To know how to set it up, follow these steps: STEP 1: Add the blocks to the section. By default, you will have 3 Testimonial blocks added. If you need more, under the Testimonial with cards section, click “Add Testimonial”. STEP 2: Customize each card (a.k.a each block). Click on the Testimonial block to open its settings panel, then you can: 🖼️ To set up the Images: In the Card image setting, upload an image to show it next to the card content, like this: Note: If you don’t need the image, just leave the setting blank. In the Image setting, upload an image to show it as an avatar for the customer who left the review, like this: If you don’t need that small avatar image, toggle off the Show image setting. 📝 To set up the content: Select a testimonial Icon. You can choose a quote icon or a star-rating icon. Or using SVG code to show a custom icon. Enter the testimonial content, including the Title, Text, Caption, and Additional text. STEP 3: Click “Save” when done. 4. How to add a product to the testimonial with cards? ✍️ Why add a product to the testimonial? Including a product in the testimonial block helps build trust and increase sales. When customers see positive reviews, they can quickly access the featured product, making the decision-making process quicker and smoother and leading to higher conversions. ✍️ Steps to add a product to the testimonial: Step 1: In the Theme Editor, add the Testimonial with cards section. Step 2: Under that section, add a Testimonial block. Step 3: Scroll down to the Product setting. Step 4: Click the "Select" button and choose the product you want to feature. Step 5: Click “Save” when done.
Sections & Blocks
1. What is Product Highlight? The Product Highlight section is designed to feature a single product with strong visual storytelling. It combines product details, media, and supporting text in one layout to create a high-converting showcase. Perfect for featuring hero products, new launches, or bestsellers that deserve the spotlight with professional-grade presentation and strategic positioning. 2. Section Components Section Product Highlight Comprehensive product showcase combining media, product information, and benefit highlights in one layout. Available Block Text Columns with Icons Used to display up to 4 product benefits or key selling points with matching icons and descriptions. 3. Location & Setup To add & set up the Product Highlight section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section (commonly used on the home page) Click "Add Section." Select "Product Highlight." 4. Highlight Features Single Product Focus: Dedicated spotlight for maximum product impact Rich Media Support: Images, videos, and embedded content with flexible ratios Benefit Highlighting: Up to 4 icon-supported selling points per block Visual Storytelling: Lifestyle imagery combined with product details 5. Common Use Cases 🤔 How to set up the product highlight section? Don't know where to start with your Product highlight section? Just follow these steps to bring it up: STEP 1: Add the Product Highlight section to your desired location. STEP 2: In the section setting panel: Scroll down to find the Product cards setting group. "Select" your featured product using the Product setting. Enable to show product rating/Quick view button/vendor/product highlighted features/highlighted attributes. STEP 3: Scroll up, find the settings and upload an Image or Video for the product showcase. STEP 4: Add a compelling Heading (use brackets [ ] for highlighting effects). STEP 5: Click "Add Block" and select Text Columns with Icons to highlight key benefits. STEP 6: Configure your first benefit block with an Icon and Heading + Text. STEP 7: Save your changes. 🤔 How to add compelling product media? STEP 1: Upload your main Image for desktop display. STEP 2: Add a Mobile image (optional). STEP 3: Choose your Media ratio or set Desktop height. STEP 4: Optionally, add a Video or embed video from URL. STEP 5: Preview across devices. 📌 Pro tip: Use lifestyle images that show the product in use rather than plain product shots for a better emotional connection. 💡 Note: If both Media ratio and Desktop height are set, height takes priority. 🤔 How to create persuasive benefit highlights? (a.k.a each Text columns with icons block) STEP 1: Click "Add Block" > select Text Columns with Icons block. STEP 2: Under the Icon setting group, you have 4 ways to set up the icon: Choose from the built-in Icon list. Choose Use another icon option from the Icon list, then paste the icon name from this theme icon list. Upload Custom icon image. Add Custom SVG code. STEP 3: Under the Content setting group, then enter Heading and supporting Text. STEP 4: Repeat the steps above for the other Text columns with icons blocks. STEP 5: Click "Save" when done. 6. Support Information Need help? Contact support@omnithemes.com or visit omnithemes.com.
Sections & Blocks
1. What is Highlight Text with Image? The Highlight Text with Image section lets you put pictures right inside your words. It's a way to make important messages or stories more interesting by mixing text and images together. Ideal for marketing campaigns, product highlights, or brand storytelling, this section enhances readability and engagement, ensuring your content stands out. When you scroll over the section, the text is shown with the interactive black highlighting effect. 2. Section Components Section Highlight text with images Highlight text with effects and images when scrolling. Available block Image Add an image in between the texts. 3. Location & Setup To add and set up the Highlight text with image section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add section". Select "Highlight text with image". 4. Highlight Features Interactive highlighting effect: Text is revealed with a dynamic highlight as users scroll, creating an eye-catching browsing experience. Inline image integration: Embed images directly within your text. Flexible text styling: Customize heading elements, line spacing, and options to emphasize keywords using [[ ]]. 5. Common Use Cases 🤔 How to set up the Highlight Text with Image section? STEP 1: Add the section Add the Highlight text with image section. STEP 2: Add Image blocks Under the section, add Image blocks to integrate them into the text. At each Image block: Select an Image and paste a link to redirect customers if you prefer. Choose Image style, ratio and width. STEP 3: Add text Click on the Highlight text with image section. At the Text setting group, enter your heading text and insert images within the text using placeholders like [img1], [img2], etc. For example: Be your [img1] own eurus. Feeling confident [img2] in the skin [img3] you are in. STEP 4: Click "Save" when done 🤔 How to highlight some words in the Highlight Text with Image section? To highlight some text in the section, like the word 'Feeling' in the image below, follow these steps: STEP 1: Click on Highlight text with image to open its setting panel STEP 2: Wrap the text to highlight Under Text setting group, at Heading: Wrap some words between [[ ]] to highlight them, like this: Be your [img1] own eurus. [[Feeling]] confident [img2] in the skin [img3] you are in. 💡 Note: Don't forget to choose Heading highlight color at the Color setting group. STEP 3: Choose the highlight style There are 2 types of highlight Marker to choose: Underline Font highlight STEP 4: Click "Save" when done. 🤔 How to customize Highlight Text with Image section's look and effect? This use case shows you how to transform the section into a dynamic, eye-catching layout with customizable height, smooth animations, balanced spacing, and branded text styling. STEP 1: Click on Highlight text with image to open its setting panel STEP 2: Customize the overall display and animation Choose the Section height to fit the content or display in fullscreen. Adjust the Animation speed (Slow, Medium, Fast). Note that the animation speed only applies to fullscreen height. Turn on Enable equal line height to keep line spacing consistent. STEP 3: Customize the Text look At Text setting group: Adjust the Heading size with the slider, choose the Heading tag (H1-H6), and add a Subheading if needed. Choose the Text alignment (Left, Center, or Right). Optionally, you can display a button and edit Button text, Button link, and Button style. STEP 5: Adjust the Color & Layout Set color for section elements. Enable or disable the section divider for better visual separation. Adjust other Desktop layout and Mobile layout settings if needed. STEP 6: Click "Save" to apply changes 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is the Multiple Stores? The Multiple Stores section allows you to display a list of store locations, complete with addresses, contact details, and links to view more details. A perfect section for you to show all your physical locations in one place! 2. How to set up the multiple stores section? Step 1: Add a new Multiple stores section to the position you want. Step 2: By default, you have 3 Location blocks. Each block will show a location. You can delete or add more blocks for your needs. Click on a Location block to open its settings panel: Upload the main Image for the slide. Enter the Heading, Address, and Address Detail. Change the Button “Get directions” text if needed. (When clicked, it will redirect you to the Google map location you specified in the Address field). Step 3: Customize the whole section: Click on the Multiple Stores section to open its settings panel: Add a Heading, adjust its size, alignment, etc. Adjust the colors under the Styles setting group including Background color, Line and border, Block background color. Styles: Customize the Store location block by configuring the Background color, Line and border, Block background color for the theme’s dark and light mode. Adjust the Desktop layout and Mobile layout. Step 4: Click “Save”.
Sections & Blocks
1. What is Video Shopping? Video Shopping is an engaging section designed to showcase videos and optionally integrate products in those videos. It allows customers to watch a video and shop the products directly, creating an interactive and immersive shopping experience. Video shopping vs video looping: What's the difference? Basically, these two sections serve the same purpose, but the video looping provides a more dynamic sliding effect for the videos, making the center video more eye-catching The video looping section's look: 2. Section Components Section Video shopping Showcase videos with products. Available block Shoppable video Used to add a separate video and with products for users to shop directly. 3. Location & Setup To add and set up the Video shopping section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add Section". Select "Video shopping". 4. Highlight Features Shop the look: Integrate products and sell directly from the videos. Add social proof: Attach social media info like username, post link, caption, and more. Videos on repeat: Capture attention with videos that play on repeat. 5. Common Use Cases 🤔 How to set up the Video shopping section? Don't know where to start with your Video shopping section? Just need to focus on these basic things to set it up: STEP 1: Add the section & blocks. Add a Video shopping section. By default, your section has 5 Shoppable video blocks. Click "Add block" to add more blocks or delete the unused ones. STEP 2: Set up a block. Click on a Shoppable video block to open its settings panel, and: Click "Select" to add your Video (or embed a video from YouTube or Vimeo). (Optional) If you want to feature your products in the video: Assign your Product under the First product setting group. You can add up to 5 products for a video under the Second product, Third product, Fourth product, and Fifth product setting group. Note: YouTube Shorts links must be modified before embedding. You can’t use the original link directly. Here's how: Replace shorts/ with watch?v= in the URL. For example: Original link: https://www.youtube.com/shorts/UCMeqidhew Updated link: https://www.youtube.com/watch?v=UCMeqidhew STEP 3: Repeat Step 2 for other blocks Click on other Shoppable video blocks one by one and repeat the actions in step 2. STEP 4: Customize the overall look Click on a Video shopping section to open its setting panel, and: Edit the Heading if you want to. Under the Shoppable video setting group: Choose the ratio you want for your video in the Video layout. Choose where to place your product card in the Product card position. Adjust the Videos per row and Number of rows for 🖥️ Desktop layout. Change the colors of the element you want under Styles. STEP 5: Click "Save" when done. 🤔 How to enable Carousel for Video shopping? Want to showcase your video shopping section in a dynamic carousel? Follow these steps: STEP 1: Click on the Video shopping section to open its settings panel. STEP 2: Scroll down to the Carousel setting group, and: 🖥️ For desktop: Turn on the Enable carousel on desktop setting. 📱 For mobile: Turn on the Enable swipe on mobile to allow users to swipe through posts. STEP 3: (Optional) - If you want to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. => Turn on "Enable next/previous arrow on mobile". - If you want the carousel to slide automatically, then: Turn on Enable auto-play. Adjust the speed in Change slides every setting. STEP 4: Click "Save" when done. 🤔 How to use the Shop the look feature inside Video shopping? In the Shoppable video block, if you have more than 1 product, the list of products will be shown in a pop-up instead of covering the video card. Therefore, the customers can experience the products more easily with a Shop the look feature inside this pop-up. STEP 1: Click on the Video shopping, under Shoppable video, and turn on Enable hotspots in the look. STEP 2: Click on a Shoppable video block, then find the Shop the look in video, and upload an Image you want to use as the main image. STEP 3: Adjust the hotspot position for each product on both 🖥️ Desktop and 📱 Mobile by changing these four settings under the right group: Hotspot desktop horizontal position Hotspot desktop vertical position Hotspot mobile horizontal position Hotspot mobile vertical position STEP 4: (Optional) Choose colors for hotspot Still in the Video shopping section > go to Colors setting group > choose your Hotspot color (light/dark). STEP 5: Click "Save" when done. 🤔 How to add Social media information to the Video shopping pop-up? STEP 1: Click on the Shoppable video block, and find the Social accounts setting group. STEP 2: Choose the Integrated social media from the list to show its icon. STEP 3: Type in your Account username. STEP 4: Add a link to your Social account URL. STEP 5: Add the content to the Social post field. STEP 6: Click "Save" when done. 6. Support Information Need help? Contact support@omnithemes.com or visit omnithemes.com.
Sections & Blocks
1. What is a Vertical Slideshow? The Vertical Slideshow is a dynamic section that displays slides in a vertical format, each with its own image, text, and button. It's a visually appealing way to highlight key messages or products on your Shopify store. 2. How to Add the Vertical Slideshow To add a Vertical Slideshow in the Theme Editor: Go to the position you want to insert the slideshow. Click “Add section” and select “Vertical slideshow”. Click on the “Vertical slideshow” section to customize it. Customization Options: Animation Settings: Toggle auto-play. Set slide duration. Show or hide next/previous arrows. Adjust arrow positions (left/right). Show or hide pagination. (the number indicator, for ex: 1/3). Desktop Layout: Make the slideshow full width. Add side padding. Round the corners of images. Adjust image height. Add top and bottom padding. Mobile Layout: Make the slideshow full width. Round the corners of images. Add top and bottom padding. Note: By default, the Vertical Slideshow section includes two blocks: Image overlay slide and Media with text. You can add or remove these blocks as needed. Follow parts 3 and 4 for specific setup instructions. 3. How to Set Up the Image Overlay Slide In the Theme Editor, under the “Vertical slideshow” section, click “Image overlay slide”. Step 1: Click “Select image” to choose an image for the slide. For a separate mobile image, use the “Mobile image” setting. Step 2: Fill in the content fields: Subheading: Enter a subheading. Heading: To highlight a keyword, put it inside square brackets []. Text: Enter a description. Step 3: Set up buttons: Add up to two buttons, customize labels, assign links, and adjust styles. Step 4: Additional Settings: Adjust text alignment. Change the position of the overlay image for desktop and mobile. Use a solid color instead of a background image, and more. Adjust the background overlay opacity. Step 5: Click "Save". 4. How to Set Up the Media with Text Slide In the Theme Editor, under the “Vertical slideshow” section, click “Media with text”. Step 1: Click “Select image” to choose an image for the slide. For a separate mobile image, use the “Mobile image” setting. Step 2: Fill in the content fields: Subheading: Enter a subheading. Heading: To highlight a keyword, put it inside square brackets []. Text: Enter a description. Step 3: Set up buttons: Add up to two buttons, customize labels, assign links, and adjust styles. Step 4: Additional Settings: Adjust text alignment. Change the position of the overlay image for desktop and mobile. Use a solid color instead of a background image, and more.
Sections & Blocks
1. What is the purpose of a comparison table? The comparison table is designed to compare your product with similar products from competitors. This feature helps shoppers quickly see the advantages of your offerings. 2. How to set up a comparison table: ✍️ Add a comparison table section: In the Theme Editor, go to the page where you want the table to appear (it’s recommended to place it on the product page). Click “Add section” or “+” Select “Comparison table.” ✍️ Adjust the content of the comparison table: Heading and subtext: Customize the appearance of the heading and add a description if needed. Heading: Enter a heading for the table. To make certain words stand out, enclose them in brackets for a highlight effect. Marker: Choose whether the highlight effect will be an underline or a font highlight. Heading Size: Adjust the heading size by dragging the bar or entering a specific number. Heading Tag: Add a tag to the heading for SEO purposes. Heading Alignment: Align the heading to the left, center, or right. Text: Add descriptive text under the heading to introduce the comparison. Label (first row) of the table: Your Product (First Column): In the Comparison Table section, locate the Comparing items section. In the Product section, Click “Select product” button to select the product you want to compare, and the product’s title will automatically appear as the header of the first column. Alternatively, enter a custom header in the “Alternative text” field. Competitors’ Products (Other Columns): In the Comparison Table section, locate the Comparing items section. In the “External item labels” field, list each competitor’s product in separate rows (maximum 4). Each row will create a column in the table. Criterion (Rows): Under the Comparison Table section, add a new Criterion block. This will add rows to the table and specify the criteria you want to compare (e.g., price, features, benefits). Under Store items section, enter the following information in Criterion detail field to indicate whether your product meet that criterion. "Yes" for ✓ "No" for ✗ or Custom text Choose another Criterion icon / Custom icon image to display next to the criterion detail. Under External items section, enter the following information in “Criterion detail” field to indicate whether your competitors' products meet that criterion. (Note: The order of information filled in the Criterion detail field must be the same as the order of the first-row label.) "Yes" for ✓ "No" for ✗ or Custom text Choose another Criterion icon / Custom icon image to display next to the criterion detail.
Sections & Blocks
The Related Blog Posts section allows you to display relevant blog posts on your Product or Collection pages. 1. How to add the Related blog posts section: Step 1: In Shopify admin, go to Online Store > Themes > Customize. Step 2: In the top dropdown menu, select the Product or Collection page template you want to customize. Step 3: Click Add Section and select Related Blog Posts. Step 4: In the panel, scroll to the Blog section. By default, the News blog is assigned. Click Change to choose a different blog. Step 5: Choose how to display blog posts: Product Tag: Blog posts will appear based on matching blog tags and product tags. Product Type: Blog posts will appear based on matching blog tags and product types. Step 6: Click Save. 2. How to customize the look of Related blog posts: In Theme Editor, click on the Related blog posts section, on the new panel that appears on the right side, and make changes to the following settings: In order to… Make changes to this setting… Change the heading’s content Change the heading size Drag or enter a specific number: Add heading highlights In the Heading field, put the text you want to highlight inside the [ ] brackets. Change the heading highlight style Under Marker, click to choose between Underline or Font highlight style: Select the tag of your heading (for SEO purposes) Change the number of posts shown Under the Number of posts shown, adjust the number of posts by dragging the slider or entering a specific number. Change the number of blog post columns on the Desktop Under the Number of columns on desktop, set the number of columns using the slider or by entering a number. Show the "Show More" button Check this box to display the "Show more" button (only works if the carousel is disabled). Show and change the position for the “View all” button 3. How to customize Blog items in Related Blog Posts: Step 1: In Theme Editor > Product Page/ Collection Page > Click on the Related Blog Posts section, and find the Blog Items settings. Step 2: You can customize: Title size Content alignment: Left, right, or center. Show/Hide Featured Blog Posts Featured Image Ratio Item Background: Check the "Items Alternative Background" box to add a background to the blog items. Show/Hide Blog Post Information: Author Blog (the collection it belongs to) Date Excerpt Tags and Lines Comment Count "Read Now" Button 4. How to set up a Carousel for Related Blog Posts: Step 1: In Theme Editor, go to the Product Page or Collection Page. Step 2: Click on the Related Blog Posts section. Step 3: From here, check the box for the corresponding setting: Enable Carousel on Desktop: This will activate the carousel on desktop devices.Enable Swipe on Mobile: This will activate the carousel on mobile devices.Enable Auto-play: Make the carousel auto-change after a certain amount of time. Step 4: Set how often the slides change by dragging or entering a number under Change Sides Every. 5. Displaying Related Blog Posts with Metaobjects In earlier versions of Eurus Theme, you could only select related posts from within a single blog. In version 8.1 and onward, this limitation is removed. By using Shopify’s metaobject feature, you can display related blog posts from any blog across your store. 🧐 How to Set Up Related Blog Posts with Metaobjects? Step 1: Add Blog Post Tags Go to Content > Blog posts Open the blog post you want to use as a related post Scroll down to the Tags section Add a tag Step 2: Create a Metaobject Go to Content > Metaobjects > Add definition Name your metaobject with any name you want (e.g. Related Blog Tags) Under the Fields section, click Add field and use the following values: Name: Tag name (exactly) Type: Single line text Value: One value Click Add → Save Step 3: Add Entries to Your Metaobject Go to Content > Metaobjects Click the metaobject you just created Click Add entry Add the exact same tags you used in Step 1 (one per entry) Step 4: Create and Assign Metafields ⭐ Create product metafield (if you want to show related blog posts on Product Pages) Go to Settings > Metafields and metaobjects Under Metafield definitions, select Products > Add definition Name it (e.g., Related Blog Posts) Type: Metaobject Reference: Choose your created metaobject Values: List of entries Click Save After saving, you will get a custom key (e.g., custom.related_blog_posts). Remember this key – you’ll use it in the next step. ⭐ Create collection metafield (if you want to show related blog posts on Collection Pages) Follow the same steps as above (but under Collections) Step 5: Display Related Blog Posts in the Theme Editor Go to Online Store > Themes > Customize (open the Theme Editor) Navigate to the Product or Collection template Add the Metafield-based Blog Posts section In the section settings: Blog handles – Enter the handles of all blogs that contain the relevant posts (one per line).To find a blog handle: Shopify admin → Content > Blog posts > Manage blogs → open a blog → see the handle under “Search engine listing”. Related Posts by Metafields – Enter the metafield key created in Step 4 (e.g., custom.related_blog_posts). This allows you to display any blog post from any blog on your product or collection pages without being restricted to a single blog setup. ⚠️ Note: Priority order: Metafield > Blog. This means that if you display related blog posts with metaobjects, the system will prioritize showing posts from the metaobject before displaying posts from the Blog. The Blog group settings will be ineffective when using metafields.
Sections & Blocks
1. What is the tab section? The Tab Section feature allows you to organize and display information in a tabbed format, making it easy for customers to scan through different sections of content. This helps in presenting detailed product information in a structured and visually appealing manner. 2. How to show product description as a tab? To show the product description as a tab instead of directly on the product template in your Shopify theme: Go to your Shopify Admin dashboard and navigate to Online Store > Themes. Click Customize next to your active theme. Find the section for managing tabs: Tabs Section. Add a new tab and add blocks "Product Description". Configure the tab: For tab title, enter "Product Description" or similar title. Optionally, add any extra text or formatting as provided by your theme. This text appears at the bottom after the product description. Use the Default content height setting to control how much text is displayed at first. You can choose to show full content or just a small, medium, or large part. If the text is cut off, a "Read more" button appears to let people see the full text, and "See less" hides it again. Save your changes. This feature applies only on the product page. This method allows you to organize and present the product description within a tab, keeping your product template clean and focused. If you show the description here, you can hide or remove the description from the product information section to avoid duplication. 3. How to show product reviews in a tab? To show product reviews in a tab on your Shopify theme using a recommended review app, follow these steps: Navigate to Apps and choose a review app. Install and configure the review app according to its setup instructions. In the section, add a new block and choose the review app that you have already installed. The block displays product reviews of the app accordingly. The Eurus theme is compatible with some Shopify-recommended review apps (please check item number 9 in the product information guide for more details: product-page/product-information) This feature applies only on the product page. 4. How to show media and text in a tab? To display media and text in a tab, Choose Media with text block. Enter content details: Enter the subheading. Specify the heading size. Describe your product or brand in the text field. Use the Default content height setting to control how much text is displayed at first. You can choose to show full content or just a small, medium, or large part. If the text is cut off, a "Read more" button appears to let people see the full text, and "See less" hides it again. Align text to the Left, Center, or Right for desktop display. Position text at the Top, Center, or Bottom for desktop display. Upload images or select a video for the tab media. Ensure images are of recommended sizes for optimal display. Upload a separate image optimized for mobile viewing. If using a video, paste the YouTube or Vimeo link in the Video URL field. Locate the “Show sound control” checkbox. Check the box to enable the sound control feature. By default, this checkbox is set to false. Once enabled, an icon will appear on the storefront, allowing customers to toggle sound on or off as needed. Provide alternative text for the video for accessibility purposes. Choose whether the video should start automatically (muted) with the Enable Video Autoplay option. Save your changes and preview the tab configuration. This setup allows you to effectively showcase multimedia content alongside text within a tab on your Shopify product pages, enhancing engagement and information accessibility for your customers. If you do not want to show an image and only want to display text, follow these steps to add a text block: Add a new block and select "Text". Enter the title for the tab. Choose the alignment for your text (Left, Center, Right). Enter a heading, such as "Talk about your products". Set the heading size (e.g., 100%). Describe your products, add specifications, provide additional information, and help customers learn more about your brand and products. 5. How to set up the section layout? The layout customization includes: Align tabs horizontally on the Left, Center, or Right for desktop view. Choose between Dropdown or Horizontal tabs for mobile display. Customize desktop section layout. Expand the section to full width. Set top/bottom padding in pixels. Customize mobile section layout. Adjust visual styles for the section. 6. How to add content from a selected page? Adding content from a selected page means importing or displaying text, images, or other information directly from a specific page to tab. This feature helps in maintaining consistency and efficiency by allowing you to reference or reuse content that already exists on one page. To add content from a selected page: Go to each "Text" or “Media with text” block in the Tabs section. Locate "Content from Page" and select the desired page from the dropdown menu. Note that this will override any text you add manually in the section below.
Sections & Blocks
1. What is a promo code list? A Promo Code List is a feature that displays a collection of promotional codes in an organized manner. This list allows customers to easily view and apply available promo codes in cart, enhancing the user experience and increasing the likelihood of conversion. This feature is unique to Eurus theme and can be a valuable tool in driving sales. 2. How to set up a promo code item? Step 1: Create promo code in shopify admin Follow the Shopify guide to create a discount code: Shopify Discount Types Guide. Step 2: Add promo code block in theme Add a New Block: Select "Add Block" and choose the promo code block option. Step 3: Configure the promo code block Setup icon: Choose a default icon in the list. You can add custom code to customize the style of the icons using the custom SVG code. If you want to customize the icon, Upload an image or select one from the available options. Heading Enter the promo code heading. Add a heading link for more details or related content. Adjust the size of the heading (e.g. 100%). Select the heading tag for this section to enhance the SEO of the page. Promo Code Details: Provide a brief description or promotional message. Enter the promo code (e.g., Flashsale45). Customize the label for the apply button. Choose your preferred Button style: Primary, Secondary, or Text link. Set the label text for when the code is applied. Promo Terms: Add a label for terms and conditions (e.g., "T&C"). Link to a page with the terms and conditions. Provide a brief description of the promo terms. Schedule Configuration: Optionally set the start and end dates and times for the promo code: Specify the year, month, day, hour, and minute when the promo starts/ends. You can also set the time zone to ensure that all promo codes display accurately according to your preferred time zone. a) How to set up the expire date of the promo code item: In Shopify Admin: Set the valid date range for the discount code in the Shopify admin under Discounts. Theme Schedule: The promo code display will adjust based on the current date relative to the schedule: Current Date within Start and End Date: Promo code shows normally. Current Date Before Start Date: Promo code shows as "Coming Soon" and cannot be applied. Current Date After End Date: Promo code shows as "Expired" and cannot be applied. b) How Customers Can Apply the Code For promo codes that are not "Coming Soon" or "Expired", customers can: Manually copy the code and paste it into the discount code field in the cart. Or Simply click the "Apply" button to automatically apply the code in the cart. 3. How to set up the list of code? To set up a list of promo codes, the configuration settings are grouped into several categories to ensure a cohesive and user-friendly display. Heading Configuration: Set the heading text and size to define the section's title. Choose the heading tag (e.g., H2) to determine the importance and styling of the heading. Background and Borders: Choose secondary background options to enhance the visual appeal. Configure lines and borders to separate content and improve readability. Layout and Alignment: Align column content to the left, center, or right based on your design preference. Adjust the desktop icon position either above or next to the text. Set the icon size for a consistent visual appearance. Carousel and Layout Settings: Enable carousel on desktop for a dynamic display of promo codes. Enable swipe on mobile for easier navigation. Turn on "Enable next/previous arrow on mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Set the change bar interval to control the transition speed in the carousel. Define the number of columns and block spacing for both desktop and mobile layouts. Optionally make the section full width and add side padding. Padding and Dividers: Adjust top and bottom padding for the section to ensure appropriate spacing. Optionally show a section divider for better visual separation. Color Customization: Customize background, heading, text, line, border, icon, and button colors for both light and dark themes to match your site's design.
Sections & Blocks
1. What are text columns with images? Text columns with images is a layout feature commonly used to present information in a visually appealing and organized manner. This layout typically involves dividing a section into multiple columns, each containing a combination of text and images. It's an effective way to highlight key information, showcase features, services, or products, and create a balanced visual experience. 2. How to add column items? To add column items with images and text in a Text Columns with Images section for your store, you need to follow these steps. Click on the Add section and select Text Columns with Images. Enter the section heading. Adjust the heading size, text alignment, background color, and padding as needed. Select the heading tag for this section to enhance the SEO of the page. Click on Add column to add a new column item. Click Upload images to upload an image or select an existing image from your library. You can crop or adjust the image as needed. Enter the main heading and subheading (if needed) for the column item. Adjust the heading size and enter descriptive text. Enter the label for the call-to-action button. Paste the URL or search for the link that the button will lead to. Choose among Primary, Secondary or Text link button styles depending on your design preference 3. How to set up the section layout? To set up the section layout for your clothing store using the provided configuration options, follow these steps. Heading Settings Heading: Enter the main heading for the section. Put the text inside a square bracket to give it a highlight effect. Marker: Choose the highlight effect to be Underline or Font highlight. Heading size: Adjust the heading size using the slider (default is 100%). Heading tag: Choose the appropriate HTML tag for the heading (e.g., H2 for secondary headings). Enter subheading and text for further content. Background and Colors Configure any secondary background if applicable. Choose the color for the highlight effect. Set the background for individual columns. Choose the style for images within the columns (e.g., Landscape 4:3). Set the background, heading, and text colors for both light and dark modes. Carousel Tick "Enable Carousel on Desktop" to display the text column with icons in a carousel format on desktop devices. Select "Enable Swipe on Mobile" to allow users to swipe through the carousel on mobile devices for improved navigation. Turn on "Enable next/previous arrow on mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Tick “Enable auto-play" to automatically rotate through the items in the carousel without requiring user interaction. Set the "Change Bar Every" interval to determine how frequently the carousel items will automatically change. These two settings apply to both desktop and mobile views. Layout and Spacing Image position: Choose the Image position to be on top or below the text. Column layout on desktop: Choose the number of columns to display on desktop (e.g., 3 columns). Block spacing: Set the spacing between blocks. Enable side padding: Add left and right padding when the section is full-width. Show section divider: Add a divider line for the section. Mobile Layout Image position: Choose the Image position to be on top or below the text. Column layout on mobile: Choose the number of columns to display on mobile (e.g., 1 column or 2 columns). Block spacing: Set the spacing between blocks on mobile (default is 16 px). Top padding: Adjust the padding at the top of the section on mobile (default is 20 px). Bottom padding: Adjust the padding at the bottom of the section on mobile (default is 20 px). By organizing and configuring these settings, you can create a visually appealing and responsive section layout for your clothing store that enhances user experience across all devices.
Sections & Blocks
1. What is a Collection list carousel? The Collection List Carousel is a dynamic feature that presents your collection list in a visually engaging way. It allows you to showcase promotions or banners on one side while displaying related collections on the other. This layout is designed to provide an interactive and eye-catching experience for customers, enabling them to easily browse through various collections without feeling overwhelmed. 2. How to add collections in the section? To add a collection to your section, follow these steps and configure the settings accordingly: Step 1: Customize collection block Add the block Collection. Choose the collection you want to display from your store. Enable “Use collection description” to use the description of the selected collection. Enter an alternative description if you prefer not to use the collection's default description. Adjust the opacity of the overlay to enhance visibility and aesthetics. Enter the label for the button. The button directs to the selected collection page by default. If no button is added, clicking the image will automatically navigate to the collection page. Customize the color to match your theme or branding. Step 2: Enter Text in the Section Enter the heading of the section. Adjust the size of the heading (range from 50% to 200%) to make it more prominent or subtle. Choose the heading tag (e.g., H1, H2, H3) to define the HTML tag for the heading. Enter the text or subheading to display under the heading with a smaller size. Adjust the alignment of the heading (Left, Center, Right) to position the text appropriately within the section. By following these steps, you can configure both the image and the text within your section to create a visually appealing and well-organized layout. This setup is ideal for highlighting key information and ensuring that your content is both engaging and informative. Step 3: Setting up layout and appearance 3.1. Collection Card Choose the style of the image (e.g., original, rounded, etc.). Adjust the size of the collection title. Align the content to the Left, Center, or Right. 3.2. Grid Set the number of columns to be displayed on desktop devices. Choose between 1 column or 2 columns for mobile devices. 3.3. Layout Select the position of the image (Left or Right). Tick the checkbox “Make section full width” to set the section’s width to match the full width of the user's device. Tick the checkbox “Show section divider” to display a divider that separates this section from the one above it. Adjust the padding for desktop and mobile devices to ensure optimal display. These configurations will help you effectively showcase your collections in a visually appealing manner, enhancing the shopping experience for your customers. 3. How to set up the main image? Adding an image to this section is an excellent way to display promotions, calls-to-action, or banners, offering additional information about the selected collections. Here's how to configure the image in the section to ensure it complements your content effectively: Adding and Adjusting the Image Click the "Select image" button to choose an image from your library or explore free image resources. Use the image ratio setting to adjust the display ratio of the image. This helps ensure the image looks great in your section. Configure the position of the image within the section. Depending on the section, you might have options to place the image on the left, right, or center. Add an image link: Use the link field to set a destination URL for the image. When customers click the image, they will be redirected to the specified page. 4. Show customized collection images with metafield. ✍️ Why would you need to use metafield for collection images? You want to show a designed image for the collection on the menu, without changing the featured images of that collection. You want to show higher-resolution images on the menu. ✍️ How to do it? Step 1: Create a collection metafield: In Shopify admin, go to Settings> Metafields and metaobjects > Collection > Add definition. Give your metafield a name. Choose type as File. Click Save. Step 2: Assign a value for the collection metafield: Go back to Shopify admin, and click on the Products > Collection tab. Choose a collection. Scroll down to Metafields. Upload an image in the newly created collection metafield. Click Save. 👉 Refer to this guidance about “How to create Product metafields” for a detailed explanation. Step 3: Set up in Theme Editor: In Theme Editor (Visit it by clicking on Online store > Themes > Customize) Visit the page you want to add a collection list, then tap on the Collection list carousel section. A new panel will appear, scroll down to find Auto-fill collection images with metafield. Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill collection images with metafield” field. (See the image below) Click Save.
Sections & Blocks
The Page section allows you to directly add the content of one page into the template of any other page. This is particularly convenient when you have content that needs to be reused across multiple pages. Admins do not need to recreate sections or text on different pages, saving time and ensuring consistency. Key Configurations Choose which page's content you want to display in this section. This allows for seamless integration of pre-existing content into new templates. Adjust the Page width for desktop devices. Toggle “Make section full width” to set the section’s width to match the full width of the user's device. Toggle “Show section divider” to display a divider that separates this section from the one above it. Customize the padding for desktop and mobile devices to ensure optimal display. Note: The heading of a page used as a section should not be set as H1, as it may conflict with the H1 of the main page where the section is added. To avoid SEO issues, ensure that there is only one H1 tag per page.
