Maximize - Sections & Blocks
Maximize - Sections & Blocks
Maximize - Sections & Blocks
1. What is Block in Block? Block in Block is a layout system in the Maximize theme that lets you build complex, custom content arrangements by nesting blocks inside container blocks - without writing any code. At its core, it introduces two special container blocks - Group and Item list - that you can add to certain sections. Inside these containers, you place the actual content blocks (headings, text, images, buttons, icons, and more) and control exactly how they are arranged, sized, and spaced. Think of it this way: if a section is a page, a Group is a column or a row on that page, and the blocks inside it are the content elements that fill that space. 💡 Why does this matter? Without Block in Block, every section has a fixed layout - you can change the content but not the structure. Block in Block removes that constraint. It's what lets you replicate the multi-column, grid, and carousel layouts you see in the Maximize demo store. This is also the innovative part of the Shopify Summer Edition 2025, introduced on the Horizon theme. 2. The two container blocks There are two containers you will work with. Understanding the difference between them is the key to using this system effectively. 📦 Group A flexible container that holds blocks and arranges them in a single direction. Stack blocks vertically (top to bottom) - the default Or line them up horizontally (side by side) Control size, spacing, padding, border, and color scheme Can be nested inside another Group 👇Identifier: 🔲 Item list Like Group, but designed for repeating items that need a structured display format. Display items as a Grid (rows and columns) Or as a Carousel (horizontally scrollable) Control the number of columns and scroll behavior Best for collections of similar things: category cards, feature tiles, promo blocks 👇Identifier: Simple rule of thumb: Use Group when you want to compose a custom layout with different types of content. Use Item list when you have a set of similar, repeating items and want them in a grid or carousel. ⚠️Note: Sometimes, the name of the block shown is different based on the Section you use. For example, inside the Stats counter section, the Header or Stat is actually a Group, while the Stat list is actually an Item list. Different name, same function. Be aware of the icon before the block's name to identify. 3. What blocks can go inside a container? Once you add a Group or Item list to a section, you can place the following content blocks inside it. They are organized into the same groups you'll see in the Theme Editor: Block What it adds Basic Button A call-to-action button with Primary, Secondary, or Text link styles. Heading A title line with font size, tag (H1–H6), highlight effects, and text transform options. Icon A standalone icon - from the built-in library or a custom image. Separator A visual divider or blank spacing element between blocks. Subheading A smaller supporting text line, typically placed above or below a heading. Table of information A two-column table for structured details such as specs, ingredients, or dimensions. Text A body text block with font size, content height control, and tooltip support. Forms Back in stock alert A form for customers to subscribe and receive an email when a product is back in stock. Newsletter signup An email signup form for customers to join your mailing list. Layout Collapsible tab An accordion-style expandable panel - similar to Group but with a toggle to show or hide its contents. Group (nested) Another Group container inside the current one - for building multi-level layouts. Max practical depth: 7 levels. Item list (nested) A grid or carousel of repeating items inside a parent Group. Links Interactive link A text link or button that, when clicked, opens the blocks nested inside it in a pop-up or drawer. Media Image An image with aspect ratio and padding controls. Video A video with autoplay and sound control options. Metrics Counter A number that animates upward when scrolled into view - ideal for displaying stats or figures. Product - only available in product-related sections (e.g. Product showcase) Buy buttons Add to cart and Buy now buttons. Countdown timer A running countdown for promotions or limited-time offers. Custom HTML A free-form HTML block for advanced custom content. Estimated delivery time The expected delivery timeframe, configured in Theme Settings. Inventory status Shows current stock availability for the product. Payment methods Displays accepted payment method icons. Price Displays the product price, including sale and compare-at price. Product title Displays the product name dynamically based on the current product. Rating Displays the product's star rating. SKU/Barcode Displays the product SKU and barcode. Social sharing Clickable social media sharing icons. Variant picker Allows customers to select product variants (size, color, etc.). Vendor Displays the product's vendor name. 4. Which sections support Block in Block? Block in Block is currently available in the following sections: Stat counter Product showcase Image with text Product three columns Video with text ⚠️ Note: This list may expand in future theme updates as more sections gain Block in Block support. 5. Common Use Cases 🤔 When should I use a Group block? Reach for a Group when you want to compose a custom piece of content by combining different building blocks - and control how they sit relative to each other. Some examples of what a Group makes possible: An icon sitting to the left of a heading and a short text line - all three horizontally aligned in a row A heading, subheading, paragraph, and button stacked vertically inside a defined-width column A colored card with its own border and color scheme, containing a counter number and label A two-column layout by placing two Groups side by side inside a parent Group set to Horizontal direction In short: if you're building a custom "card" or "column" made of multiple content elements, Group is what you use. 🤔 When should I use an Item list block? Reach for an Item list when you have a set of similar, repeating items and want them displayed in a consistent grid or scrollable carousel. Some examples of what an Item list makes possible: A grid of category tiles - each showing an image and a label - laid out in 3 or 4 columns A horizontally scrollable carousel of product highlights that customers can swipe through A row of feature icons with short text beneath each one, evenly distributed across the width The key difference from Group: with Item list, the blocks inside behave as equal repeating units. You set the number of columns or enable carousel mode, and the items distribute themselves automatically. 🤔 How deep can I nest blocks? You can nest containers up to 7 levels deep in practice. The system technically allows 8 levels, but the 8th level can only hold an empty Group with nothing inside it - so it has no practical use. (This is also the current limitations of the Shopify side - same situation with the Horizon theme) For the vast majority of layouts, you will only ever need 2–3 levels: Level 1: A Group or Item list directly inside the section Level 2: Content blocks (heading, text, image, etc.) inside that Group Level 3: A nested Group inside the first Group, for a more complex arrangement within a column or card Going deeper than 3 levels is rarely needed for standard store layouts. 6. Ready to build? The best way to learn Block in Block is to see a finished layout and follow the steps to recreate it. Head to our layout library to pick a look you like and get a step-by-step guide: Browse the layout library → Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Product details? The Product details section lets you enrich your product page with additional content that sits below the main product media as customers scroll - while the price, variants, and purchase buttons stay fixed on screen. Use it to highlight key product features, display a specifications table, or add supporting text and imagery to help customers make confident purchase decisions. 2. Section Components Section Product details Displays additional product content below the media gallery on the product page. Available blocks 1st-level available blocks(Blocks you can add directly inside the Product details section) Highlight feature Display a product highlight with an icon and short supporting text. Specifications Display a two-column specifications table, with optional metafield-powered dynamic values. Rich text Display rich content including a heading, text, image, payment icons, and more. Description Automatically pull and display the product's description from Shopify admin. 3. Location & Setup The Product details section is only available on the Product page. To add it: Open the Shopify Theme Editor (Online Store > Themes > Customize) Click the page selector dropdown at the top and navigate to Products > Default product (or any product template). In the left sidebar, click "Add section" and select Product details. ⚠️ Note: Once added, the section can be shown, hidden, or removed at any time using the visibility toggle (eye icon) or the "Remove section" option in the settings panel. 4. Highlight Features Dedicated content area that scrolls alongside the product page while the purchase panel stays fixed Showcase product highlights in a responsive grid - Highlight feature blocks always display side by side, up to 3 per row Built-in specifications table with support for dynamic metafield values using the [[custom.key]] format Flexible Rich text block with payment icons, custom images, color schemes, and content height controls Auto-displays the product description from Shopify admin via the Description block 5. Common Use Cases 🤔 How to get the Product details section ready quickly? When you add a fresh Product details section to your product page, it comes pre-loaded with 2 Highlight feature blocks and 1 Specifications block - the most common setup for showcasing product highlights and technical details side by side. Here's the fastest way to get it live: STEP 1: Add the section Follow the steps in 3. Location & Setup to add the Product details section to your product page. STEP 2: Fill in the Highlight feature blocks Click on each Highlight feature block in the left sidebar and fill in: Icon - choose from the dropdown, upload a custom image or enter an icon name from this list into the Use another icon field. Heading - a short benefit or feature name (e.g., "Flattering fit"). Text - one or two supporting lines. STEP 3: Fill in the Specifications block Click on the Specifications block and add your table content to the Table detail field. Use a colon (:) to separate the label from the value on each line (e.g., Brand: Example Co.). For dynamic values from product metafields, use the [[custom.key]] format - see the use case below for full guidance. STEP 4: Click "Save" when done. ⚠️ Note: You can add more blocks at any time via "Add block". To remove a block you don't need, click it and select "Remove block". 🤔 How to add a product highlight with an icon? The Highlight feature block is ideal for calling out key product benefits - such as "Water resistant", "Lifetime warranty", or "Eco-friendly" - using an icon and short text. Blocks always display side by side in a grid of up to 3 per row. STEP 1: Add a Highlight feature block Under the Product details section in the left sidebar, click "Add block" and select Highlight feature. STEP 2: Choose an icon In the block's settings panel, choose one of the following: Select from the Icon dropdown for built-in icons. Enter a name in Use another icon for icons from the icon library (e.g., badminton). Upload your own image in Custom icon image. STEP 3: Add the heading and text Enter a short benefit name in Heading. Enter supporting text in Text. To add a highlight effect to part of the heading or text, wrap the word in [] brackets (e.g., [Flattering] fit) and choose the Highlight effect style. STEP 4: Adjust alignment and appearance Set Desktop text alignment and Mobile text alignment to Left, Center, or Right. Change Text transform if you want the text in uppercase or another style. STEP 5: Click "Save" when done. 🤔 How to display a specifications table? The Specifications block lets you display a clean two-column table of product details - either with static text or dynamic values pulled automatically from product metafields. STEP 1: Add a Specifications block Under the Product details section, click "Add block" and select Specifications. STEP 2: Add a heading and description (optional) Enter a title in Heading (e.g., "Technical details"). Add a short description in Text if needed. Adjust Text alignment and Heading size to your preference. STEP 3: Add table content In the Table detail field, enter each row on a new line using the following rules: Rule 1: Use a colon (:) to separate the label from the value - e.g., Brand: Example Co. Rule 2: Use a hyphen (-) at the start of a line to indent it as a sub-row - e.g., - Length: 30cm Rule 3: Press Shift + Enter to add a new row. Rule 4: Use [[custom.key]] to dynamically pull a value from a product metafield - e.g., Material: [[custom.material]]. The value will update automatically per product. See more detailed guidance in the metafield use case below. STEP 4: Configure table display options Text to use for empty fields - set what appears when a metafield has no value (default: -). Rows shown by default - drag the slider to control how many rows are visible before a "Read more" button appears. Customize the "Read more" label and "See less" label as needed. STEP 5: Click "Save" when done. 🤔 How to use metafields to show dynamic values in the specifications table? Instead of typing static values, you can link each row in the Specifications table to a product metafield so the values update automatically per product. STEP 1: Create a Product metafield in Shopify admin Go to Settings > Metafields and metaobjects > Products > Add definition. Give it a name and set the type to one of: Single line text, Multi-line text, Rich text, Decimal, Dimension, Volume, Weight, or Money. Click Save. STEP 2: Assign a value to each product Go to Products, open a product, scroll to Metafields, and enter a value for your new field. Click Save. Repeat for each product. STEP 3: Use the [[custom.key]] format in the Table detail field In the Specifications block settings, find the Table detail field. For any row you want to pull dynamically, enter: Label: [[custom.metafield_key]] Find the key in Settings > Metafields and metaobjects - it's the short text shown under the metafield name, starting with custom. Example: Material: [[custom.material]] → displays as Material: Cotton for one product, Material: Polyester for another. STEP 4: (Optional) Set fallback text for empty fields In the Text to use for empty fields setting, enter what should appear when a product has no value for that metafield (e.g., - or N/A). STEP 5: Click "Save" when done. 🤔 How to add rich content with an icon, image, and payment icons? The Rich text block is the most versatile block in this section - use it to display branded content such as a guarantee badge, shipping information, or feature descriptions, complete with an icon, heading, text, image, and payment method icons. STEP 1: Add a Rich text block Under the Product details section, click "Add block" and select Rich text. STEP 2: Add an icon (optional) Select from the Icon dropdown, enter a name in Use another icon, or upload a Custom icon image. STEP 3: Add heading and text Enter a title in Heading and your content in Text. Wrap any word in [] brackets to apply a Highlight effect (e.g., [Authenticity] Guaranteed). Set Text alignment and Heading size as needed. STEP 4: Add an image or pull content from a page (optional) Upload an Image to show a supporting visual below the text. Alternatively, use Content from page to pull content from an existing Shopify page. STEP 5: Control content height Use Default content height to decide how much content shows before a "Read more" button appears. Set it to Show full content to always show everything. Customize the "Read more" label and "See less" label if needed. STEP 6: Configure additional display options Show payment icons - toggle on to display accepted payment method icons (e.g., Visa, Mastercard, Apple Pay). Custom payment icons - enter payment names separated by commas to show specific icons (e.g., visa, mastercard, klarna). Show border - toggle on to add a border around the block. Color scheme (light/dark) - choose the color scheme applied to this block in light and dark mode. STEP 7: Click "Save" when done. 🤔 How to automatically display the product description? The Description block automatically pulls and displays the product's description from Shopify admin - no manual text entry needed. The content updates per product. STEP 1: Add a Description block Under the Product details section, click "Add block" and select Description. STEP 2: Add an optional heading Enter a title in Heading if you want a label above the description (e.g., "About this product"). Choose the Heading size and Heading alignment. STEP 3: Control how much content is shown In Default content height, choose whether to show the full description or truncate it with a "Read more" button. Customize the "Read more" label and "See less" label as needed. STEP 4: Click "Save" when done. ⚠️ Note: The content of this block comes from the product's description in your Shopify admin (Products > [Product] > Description). If the description is empty, the block will not display any content. 🤔 What other customization options can you give your Product details? For the whole Product details section: ✨ Adjust top & bottom spacing Click on the Product details section, then scroll to Section layout and adjust the Top padding and Bottom padding sliders. For a single Highlight feature block: ✨ Add a text highlight effect Click on a Highlight feature block, then wrap any word in the Heading or Text field with [] brackets (e.g., [Fast] delivery). Choose the Highlight effect style below the field. ✨ Change text transform Click on a Highlight feature block and choose a Text transform option to change the capitalisation style of the heading text. For a single Specifications block: ✨ Set how many rows show before truncating Click on the Specifications block and drag the Rows shown by default slider. Rows beyond this count will be hidden behind a "Read more" button. ✨ Change the empty field fallback text Click on the Specifications block and update the Text to use for empty fields setting (default: -). For a single Rich text block: ✨ Add a border around the block Click on a Rich text block and toggle on Show border. ✨ Change the color scheme Click on a Rich text block, then choose Color scheme (light) and Color scheme (dark) to apply different color palettes for light and dark mode. ✨ Show or customize payment icons Click on a Rich text block, toggle on Show payment icons, and optionally enter specific payment method names in Custom payment icons (e.g., visa,mastercard,klarna). For a single Description block: ✨ Truncate the description with a Read more button Click on the Description block, find Default content height, and choose a height other than Show full content. A "Read more" button will appear automatically. 6. Change Logs 🚩 Version 1.6.0: Updated the metafield input format in the Table detail field of the Specifications block - metafield keys must now be wrapped in double square brackets: [[custom.key]] (e.g., [[custom.material]]). The old format of entering the key directly without brackets is no longer supported. 7. Support Information Need help? Contact our support team at Omni Themes Support
Maximize - Sections & Blocks
1. What is Product showcase? Product showcase (Featured product) section lets you highlight a specific product with its images, essential information, and purchase actions in a single, focused layout. It is commonly used on the homepage or landing pages to promote best-selling, new, or campaign products. 2. Section Components Section Product showcase Display one selected product with media gallery and customizable product information. Available blocks 1st-level available blocks(Blocks you can add directly inside the Product showcase section) Product media gallery Display product images and videos. Product details Used to contain multiple product information blocks. Sub-level available blocks(Blocks you can add inside the Product details blocks only) > Vendor Used to display vendor name. > Product title Used to show product name. > Rating Used to show product star rating. > SKU & barcode Used to show product SKU and barcode. > Price Used to show product price. > Variant picker Allow customers to select variants. > Buy button Used to add an "Add to cart / Buy now" button. > Inventory status Used to show stock availability. > Social sharing Used to show your clickable social media icons. > Payment method Used to show available payment method icons. > Estimated delivery time Used to show the expected time the product arrives, set up in Theme Settings. > Countdown timer Used to display a countdown for promotions. > Heading Used to display a title or highlight text. > Subheading Used to display a small supporting text. > Text Used to add descriptive content. > Icon Used to add visual symbols to highlight features or benefits. > Separator Used to add space > Button Used to add a call-to-action button such as “Shop now” or “Learn more”. > Image Used to add a supporting image inside the group. > Video Used to add a supporting video inside the group. > Counter Used to display numbers with a counting animation. > Group Create nested — “blocks inside blocks” to build more complex layouts. > Item list Similar to Group, but with layout control.Make the items inside display as Grid or Carousel. > Collapsible tab Similar to Group, but with an accordion layout. > Back in stock alert Used to show a form for customers to subscribe and receive an email when the product is back in stock > Newsletter signup Used to show an email-generated form. > Interactive link Used to add a single text link or button - when clicked, the elements inside will be shown in a pop-up or drawer 3. Location & Setup To add and set up the Product showcase section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add Section". Select "Product showcase". 4. Highlight Features Display product images and videos, make it outstanding right on your homepage/ landing page Fully customizable product information layout Supports all core product elements (price, variants, buy button, inventory, etc.) Flexible content structure using Group and Item list blocks Responsive layout for desktop and mobile. 5. Common Use Cases 🤔 How to set up the Product showcase section? Don't know where to start with the Product showcase section? Follow this: STEP 1: Add the sectionAt your desired position, click "Add section" and choose the Product showcase section. STEP 2: Select your product Click on the Product showcase to open its settings panel. Find the Product setting at the top. Click Select and choose the product you want to showcase from your store. STEP 3: Click "Save" when done. 🤔 How to customize which product information to display in this section? Want to control exactly what product details appear and in what order - like showing only the price and buy button, or adding vendor information and ratings? Here's how: STEP 1: Access the Product details block Under the Product showcase section in the left sidebar, click on Product details to expand it and see all available sub-blocks. STEP 2: Add or remove sub-blocks Each block represents a specific piece of product information. You can: Add blocks: Click "Add block" and select from options like Vendor, Rating, SKU & barcode, Price, Variant picker, Description, etc. Remove blocks: Click on any block you don't want and select "Remove block" or click the trash icon. STEP 3: Arrange the display order Click and drag blocks up or down to reorder them. The order in the sidebar reflects the order they'll appear on your product page. ⚠️Note: Use the Group block or Item list block to nest other blocks inside, make them appear horizontally, etc. STEP 4: Fine-tune the overall appearance Go back to the Product details settings panel to adjust: Alignment: Choose vertical and horizontal alignment for desktop and mobile. Style: Toggle border display and select color schemes for light and dark modes. Padding: Adjust spacing around the product details section for desktop and mobile. STEP 5: Click "Save" when done. 🤔 How to adjust the look of product media? Want to customize how your product images and videos are displayed - adjusting the size, layout, zoom behavior, or enabling video autoplay? Here's how: STEP 1: Access the Product media gallery block Click on the Product showcase section. In the left sidebar, click on Product media gallery block to open its settings. STEP 2: Adjust the gallery size and layout Desktop width: Use the slider to set what percentage of the section width the gallery should occupy (useful when displaying product details alongside the gallery). Media ratio: Choose how your images should be cropped or displayed (e.g., Square, Portrait, Landscape). STEP 3: Configure zoom and video settings Zoom effect: Select your preferred zoom behavior (e.g., Magnifier for detailed product views). Show sound control: Toggle to show/hide audio controls for product videos. Enable video autoplay: Toggle to automatically play videos when visitors view the page. STEP 4: Adjust gallery spacing Set padding for desktop and mobile to control the spacing around your media gallery (Top, Bottom, Left, Right). STEP 5: Click "Save" when done. 🤔 What other customization options can you give your Product showcase? For the whole Product showcase section: ✨ Change the media position on the desktop Click on the Product showcase section, then find the Desktop media gallery position setting, and choose Left or Right. ✨Adjust the gap between the media and the product details Click on the Product showcase section, then scroll down to the Spacing group > Gap > slide or enter a desired number. ✨Adjust the width, the padding, or add a divider line for the section Click on the Product showcase section: Choose the desired Section width to be Page width, Full width or Full width padded. Adjust the Top & Bottom padding Turn on "Show section divider" to show a line. ✨Change the Color scheme of the overall section Click on the Product showcase section, then scroll down to the Style group > change the Color scheme on the dark and light versions. 6. Support Information Need help? Contact our support team at Omni Themes Support
Maximize - Sections & Blocks
1. What is Product comparison grid? Product comparison grid is a section that displays multiple products in a side-by-side grid layout, allowing customers to easily compare product information such as price, description, vendor, variants, ratings, and more. This section is ideal for: Comparing similar products Showing differences between models or versions Helping customers make faster buying decisions 2. Section Components Section Product comparison grid Display multiple products in a grid so customers can compare their information side by side. Available blocks Product description Used to display each product’s description. Variant option Used to display selectable product variants (such as size or color). Button Used to add a custom call-to-action button. Product ratings Used to display product star ratings. SKU Used to display product SKU. Vendor name Used to display the product vendor. Product metafield Used to display custom product information using metafields. "Add to cart" Button Used to add an Add to cart button for each product. 3. Location & Setup To add and set up the Product comparison grid section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add Section". Select "Product comparison grid". 4. Highlight Features Side-by-side product comparison: Products are displayed in columns so customers can quickly compare information across items. Flexible product information: Choose which blocks (description, vendor, SKU, metafields, etc.) appear in the grid. Variant selection inside grid: Allow customers to select variants directly in the comparison layout. Built-in add to cart: Customers can add products to cart without leaving the comparison section. Supports custom data: Use Product metafield blocks to display unique specifications or attributes. 5. Common Use Cases 🤔 How to set up the Product comparison grid section? Want to create a comparison grid using standard product information such as description, vendor, SKU, ratings, variants, and Add to cart? Here’s how: STEP 1: Add the sectionAt your desired position, click "Add section" and choose the Product comparison grid section. STEP 2: Choose the products to compare Click on the Product comparison grid to open its settings panel. Scroll down and find the Grid setting. Click Select products and choose up to 10 products you want to compare. STEP 3: Add the information you want to compare Each block under the Product comparison grid section represents a piece of information. Depending on your needs, add, setup and arrange the blocks' position: Product description Variant option Product ratings SKU Vendor name "Add to cart" Button Button STEP 4: Fine-tune the overall section layout: Go back to the Product comparison grid setting panel, and: Enter a new Subheading and Heading. Adjust the Section layout: width, padding, etc. For more detailed customization options, you can read the instructions in the last part. STEP 5: Click “Save” when done. 🤔 How to show custom product specs in the comparison table using Product metafield? You might want to show the information that is beyond the basic options from Shopify. (For example: battery life, technical specs, etc.) That's totally possible in Maximize. Here's how: 1️⃣ Part A – Create a product metafield in Shopify Admin STEP 1: Go to Shopify Admin → Settings → Metafields and metaobjects → Products → Click Add definition. STEP 2: Set: Name: e.g., Battery capacity Choose One value or List of values (depends on your information type) Choose the appropriate Type (single line text, number, etc.) ⚠️ Note: Remember & copy the Namespace and key - we will use it later. STEP 3:Click Save. Still unclear? Try creating a product metafield here 👇 2️⃣ Part B – Assign value to the created product metafield Open a product in Shopify Admin and enter a value for this metafield. See the steps in more detail here 👇 3️⃣ Part C – Display the metafield in Product comparison grid STEP 1:Go to Theme Editor, add or open the Product comparison grid section. STEP 2:Add a Product metafield block. STEP 3:In Metafield key, enter the Namespace and key you created during Part A - step 2 above.(e.g., custom.battery_capacity). STEP 4:Change the Title if you want a custom label. STEP 5:Choose Background (light) and Background (dark) if needed. STEP 6: Click "Save". 🤔 What other customization options can you give your Product comparison grid? For the whole Product comparison grid section: ✨ Add a highlight effect between the text Click on the Product comparison grid section, Enter the text in the Heading or Text field. Put the highlighted text into the []. Choose the Highlight effect you want. ✨Add an extra button right below the heading Click on the Product comparison grid section: Enter the Button label Paste in a Button link Choose the Button style ✨Adjust the width, the padding, or add a divider line for the section Click on the Product comparison grid section: Choose the desired Section width to be Page width, Full width or Full width padded. Adjust the Top & Bottom padding Turn on "Show section divider" to show a line. For the Product Grid inside the section ✨Change the text shown when there is an empty value (default is "-") Click on the Product comparison grid section > Go to Grid > Change the Text to use for empty fields. ✨ Adjust the width for each product column Click on the Product comparison grid section > Go to Grid > Change the Column width ✨ Show the product labels & badges for your product Click on the Product comparison grid section > Go to Grid > Turn on Show product labels and badges. ⚠️ Note: Your labels and badges must be set up before, as guided in this guide. ✨ Show an "Add to cart" button right below the product image Click on the Product comparison grid section > Go to Grid and: Turn on Show "Add to cart" button. Choose the desired "Add to cart" button style. 6. Support Information Need help? Contact our support team at Omni Themes Support
Maximize - Sections & Blocks
1. What is Stats counter? Stats counter is a section that displays key numbers (statistics) in an eye-catching way using animated counters, headings, and short descriptions. It is commonly used to show achievements, scale, trust signals, or performance metrics such as: Years of experience Products sold Customers served Partners, locations, or milestones 2. Section Components Section Stat counter Display a list of statistics with animated numbers and supporting content/ media. Available blocks 1st-level available blocks (Blocks you can add directly inside the Stat counter section) Header Show an image outside the content area. Stat list Used to contain multiple Stat items. (similar to Item list block) Image Used to add an image to the section. Video Used to add a video to the section. Sub-level available blocks (Blocks you can add inside the 1st-level above blocks only) > Counter Used to display numbers with a counting animation. > Heading Used to display a main title or the group's headline. > Subheading Used to display a small line of text above or below a heading. > Text Used to add descriptive or explanatory text. > Icon Used to add visual symbols to highlight features or benefits. > Image Used to add supporting images inside the group. > Button Used to add a call-to-action button such as “Shop now” or “Learn more”. > Countdown timer Used to display a countdown with animated numbers. > Group Create “blocks inside blocks” to build more complex layouts. > Item list Similar to Group, but with layout control.Make the items inside display as Grid or Carousel. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it. Click "Add Section". Search for Stats counter Click on it to add. 4. Highlight features Grid or Carousel layout: Choose to show all stats at once (Grid) or slide them horizontally (Carousel). Responsive items per row: Set how many stats appear per row on desktop, tablet, and mobile. Rich content inside each statAdd icons, images, text, buttons, countdown timers, and more. Spacing & sizing controlAdjust padding, gap, and width at section, list, and stat level. 5. Common Use Cases 🤔 How to create a basic Stats counter section? Want to show a simple row of statistics with numbers and text? STEP 1: Add the sectionAt your desired position, click "Add section" and choose the Stats counter section. You will see: A Header block A Stat list block that contains 4 Stat blocks. Now let’s set them up. STEP 2: Adjust the header By default, there is a Subheading and a Heading block inside the Header block. Click on each, enter your content, and add Text highlight if you want some styles. ⚠️ Note: You cannot delete this Header block, just click the eye 👁️ icon to hide if you don't need it. STEP 3: Customize each Stat block. Now, it's time for the Stat list block. By default, you see 4 Stat blocks inside. Click on one of them to edit the sub-blocks: Block's name How to edit? Counter Enter your destination number to Counter field. For example: 30+, 200. Adjust Duration to control how fast the number counts up. Heading Enter your text into the Heading field Adjust the Heading tag, Font size. Add a Highlight effect if needed Text Similar to Heading block. Feel free to add, delete, or arrange the position of the sub-blocks. You can also add other blocks such as Button, Countdown timer, and more. Repeat the steps for other Stat blocks until you have enough counter groups. STEP 4: Click “Save” when done. 🤔 How to display the Stats as a carousel? Like this: STEP 1: Prepare your section Before starting, complete the "How to create a basic Stats counter section?" guide to have your Stats Counter section ready. STEP 2: Turn on Carousel mode Tap on the Stat list block to open its settings panel Go to Display Type (Desktop/Mobile) > choose Carousel STEP 3: Adjust the Items per row Still in the Stat list's setting panel, find the Items per row (Desktop/Tablet/Mobile) setting, and adjust the number. ⚠️ Note: Make sure the Items per row are smaller than the total number of Stat blocks you have for the Carousel to work. For example: Under the Stat list blocks, you have 4 Stat blocks, then Items per row should be 1,2, or 3. STEP 4: (Optional) Adjust the Carousel Behavior In Stat list block > Find the Carousel behavior group: Turn on Show navigation arrows. Adjust Auto-play every to set the slide duration (set to 0 to disable). STEP 5: Click “Save” when done. 🤔 What other customization options can you give your Image with text? For the whole Stats counter section: ✨ Change the direction of the blocks inside: Click on the Stats counter section, under the Section Layout settings group, and in Desktop/ Mobile direction, choose Vertical or Horizontal. ✨Use an image as the background Click on the Stats counter section, under the Appearance settings group, you can: Find Background media and choose Image. Add an image to the Desktop image. If you need a different image for mobile, add it to the Mobile image. Or else, leave it blank. For a single Header or Stat block: ✨Adjust the layouts for the items inside Click on the Header or Stat block, under the Layout setting group, choose Vertical or Horizontal for your Desktop and Mobile. ✨ Adjust the alignment for the items inside Click on the Header or Stat block, under the Alignment setting group, from here you can change both Vertical and Horizontal alignment for Desktop and Mobile. ✨ Adjust the width of the whole group Click on the Header or Stat block, under the Size setting group, from here you can choose your group's width in relation with the whole section. Fit: This option will auto-adjust your Group's width according to the number of the 1st level blocks Custom: You can adjust the width of the group on both desktop and mobile. ✨ Add a link to the whole group Click on the Header or Stat block > under the Link setting group, assign a link, and turn on Open this link in a new tab if needed. Need help? Contact our support team at Omni Themes Support
Maximize - Sections & Blocks
Image with text/ Video with text (Media with text)
1. What is Image with text/ Video with text? Image with text/ Video with text is a Media with Text section that lets you pair an image/a video with flexible content blocks such as headings, text, buttons, icons, and lists.It’s ideal for highlighting a product, collection, feature, or message with strong visual support. ⚠️ Note: Image with text and Video with text work almost the same and look very similar.The only difference is the default block shown when you first add the section (image or video).Because of that, both sections are explained together in this guide. 2. Section Components Section Image with text/ Video with text Display an image or video alongside structured content to communicate key information clearly and visually. Available blocks 1st-level available blocks (Blocks you can add directly inside the Stat counter section) Image Show an image outside the content area. Video Show a video outside the content area. Content (Group) A main container that holds all your text, buttons, icons, and other blocks. Sub-level available blocks (Blocks you can add inside the 1st-level above blocks only) > Counter Used to display numbers with a counting animation. > Heading Used to display a main title or the group's headline. > Subheading Used to display a small line of text above or below a heading. > Text Used to add descriptive or explanatory text. > Icon Used to add visual symbols to highlight features or benefits. > Image Used to add supporting images inside the group. > Button Used to add a call-to-action button such as “Shop now” or “Learn more”. > Countdown timer Used to display a countdown with animated numbers. > Group Create “blocks inside blocks” to build more complex layouts. > Item list Similar to Group, but with layout control.Make the items inside display as Grid or Carousel. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it. Click "Add Section". Search for Image with text/ Video with text. Click on it to add. 4. Highlight features Choose horizontal or vertical layout for desktop and mobile separately Use different images for desktop and mobile Add nested content blocks for advanced layouts Control spacing, padding, and section width Apply separate color schemes for light and dark mode Enable an optional section divider 5. Common Use Cases 🤔 How to set up a simple Image with text/ Video with text section? To create a basic layout (image or video on one side, content on the other), follow these steps: STEP 1: Add the Image with text/ Video with text sectionAt your desired position, click "Add section" and choose the Image with text/ Video with text section. You will see: An Image block or Video block A Content block Now let’s set them up. STEP 2: Assign an image/ video: For Image: Click on the Image block, add a Desktop image and a Mobile image (optional). For Video: Click on the Video block > choose your Video source > then Upload video or Embed video from URL. STEP 3: Add the content: Now, in the Content block, you can see many different blocks inside. Let's edit one by one: Icon: You have 2 options: Icon style = Icon (use existing icon of Maximize theme): Choose one from the dropdown list, or choose Use another icon option and paste the name of your favorite one from this list into the field. Icon style = Image (use your own image): Upload to Icon image setting (light/dark). Subheading + Heading + Text: These 3 blocks are similar in their settings step, just enter your content and add Text highlight if you want some styles. Button: Add the CTA content and a link for the button. Feel free to add, delete, or arrange the position of the blocks. You can also add other blocks such as Counter, Countdown timer, and more. STEP 4: Click “Save” when done. 🤔 What other customization options can you give your Image with text? For the whole Image with text/Video with text section: ✨ Change the direction of the blocks inside: Click on the Image with text/Video with text section, under the Layout settings group, and in Desktop/ Mobile direction, choose Vertical or Horizontal. ✨Use an image as the background Click on the Image with text/Video with text section, under the Appearance settings group, you can: Find Background media and choose Image. Add an image to the Desktop image. If you need a different image for mobile, add it to the Mobile image. Or else, leave it blank. Adjust the overlay opacity. For a single Content (Group) block: ✨Adjust the layouts for the items inside Click on the Content block, under the Layout setting group, choose Vertical or Horizontal for your Desktop and Mobile. ✨ Adjust the alignment for the items inside Click on the Content block, under the Alignment setting group, from here you can change both Vertical and Horizontal alignment for Desktop and Mobile. ✨ Adjust the width of the whole group Click on the Content block, under the Size setting group, from here you can choose your group's width in relation with the whole section. Fit: This option will auto-adjust your Group's width according to the number of the 1st level blocks Custom: You can adjust the width of the group on both desktop and mobile. ✨ Add a link to the whole group Click on the Content block > under the Link setting group, assign a link, and turn on Open this link in a new tab if needed. Need help? Contact our support team at Omni Themes Support
Maximize - Sections & Blocks
1. What is Product picker? The Product picker section allows you to showcase multiple product collections in a single section and let customers search and filter products within each collection. This section is ideal for stores with large catalogs or multiple product categories, making product discovery faster and more intuitive. 2. Section Components Section Show multiple collections and help customers quickly filter products. Available blocks Add a separate collection with its filtering options. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add section" Search for Product picker Click on it to add. 4. Highlight Features Up to 3 filters per collection for faster product discovery. Flexible layout and styling to match your store design. Customizable placeholder text for the collection selector and each filter dropdown - useful for multilingual stores. 5. Common Use Cases 🤔 How to set up the Product picker section? Quick steps to bring up this section: STEP 1: Add the section Add the Product picker section following the steps in 3. Location & Setup. STEP 2: Add a Collection block Under the Product picker section in the left sidebar, click "Add block" and select Collection. Then click on the block to open its settings panel and configure the following: Collection - click "Select" to choose the product collection you want customers to browse. Alternative collection name - (optional) enter a custom display name for this collection. If left blank, the collection's original name is used. STEP 3: Set up the filters Each Collection block supports up to 3 independent filters. For each filter group (Filter 1, Filter 2, Filter 3), configure the following fields: Field What it does Filter name Enter the exact label of a filter created in your Shopify filter app (e.g. Search & Discovery). This must match exactly for the filter to work. ⚠️ Note (multilingual stores): If your store supports multiple languages, enter the filter label translations separated by semicolons in the same order as your store languages (e.g. Price;Preis;価格). Title Enter a user-friendly label to display above the filter dropdown (e.g. "Price range" instead of the raw filter key). Dropdown option format Choose how filter options appear inside the dropdown: Text only - shows the option label as plain text. Text with small image - shows a small thumbnail alongside the label. Text with large image - shows a larger thumbnail alongside the label. Repeat Step 3 for Filter 2 and Filter 3 if needed. Leave any filter group's Filter name blank to skip it. STEP 4: Add more Collection blocks (optional) To showcase multiple collections in the same section, repeat Steps 2–3 to add more Collection blocks. Each block represents one collection with its own independent set of filters. STEP 5: Click "Save" when done. 🤔 How to customize the Product picker section's look? Want to make the section more visually attractive? Here's how: STEP 1: Click on the Product picker to open its settings panel. STEP 2: Add section heading, description text, and image Enter the Heading and Text. Upload an Image to use as the section background and adjust its Overlay opacity. STEP 3: Customize the navigation panel display At the Navigation panel settings group: Choose the layout of the navigation panel (on large screens): Horizontal Vertical Enter the text for Collection select placeholder - this is the default prompt shown in the collection dropdown before a customer makes a selection. If left blank, it defaults to "Choose a category". Enter text for Filter 1 placeholder, Filter 2 placeholder, and Filter 3 placeholder - these control the default prompt shown in each filter dropdown. If left blank, each defaults to "Select".⚠️ Note: Customizing the placeholder text is especially useful for multilingual stores, where the default "Select" or "Choose a category" text may not translate automatically. For Price filter style, choose how customers set the price: Range slider Input Range slider and input STEP 4: Click "Save" when done. 🤔 What customization options can you give your Product picker? For the whole Product picker section: ✨ Change color scheme Click on the Product picker section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the heading size Click on the Product picker section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Product picker section, find and choose the Heading tag from the list. ✨ Change the text alignment Click on the Product picker section, and choose the Text alignment to be Left, Right, or Center. ✨ Customize the collection selector placeholder text Click on the Product picker section, scroll to the Navigation panel group, and enter your preferred text in Collection select placeholder. Leave blank to use the default "Choose a category". ✨ Customize the filter dropdown placeholder text Click on the Product picker section, scroll to the Navigation panel group, and enter text in Filter 1 placeholder, Filter 2 placeholder, and/or Filter 3 placeholder. Leave any blank to use the default "Select". ✨ Change the section width, add padding, or add a divider Click on the Product picker section, scroll down to the Section layout group, and you will be able to change those settings. 6. Change Logs 🚩 Version 1.6.0: Added Filter 1 placeholder, Filter 2 placeholder, and Filter 3 placeholder fields to the Navigation panel - allowing custom placeholder text for each filter dropdown (defaults to "Select" if left blank). This is particularly useful for multilingual stores. 7. Support Information Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Product bundle? The Product bundle section allows you to group and offer multiple products together as a single package. This simplifies the shopping process and provides benefits for both merchants and customers. 2. Section Components Section Group and offer multiple products together as a single package. Available blocks Create a single product bundle (You can add up to 5 Bundle blocks). 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add section" Search for Product bundle. Click on it to add. 4. Highlight Features Bundle tabs: Create multiple bundles within the same section, each with its own products and settings. Flexible discount options: Support for percentage or fixed-amount discounts, and automatic discount syncing with Shopify. 5. Common Use Cases 🤔 How to set up the Product bundle section? Want to set up the section? Here's how: STEP 1: Add the section Add the Product bundle section. STEP 2: Add the blocks and select products for the bundle Under Product bundle section, add Bundle blocks and click on it to open its settings panel: Select a collection or hand-pick individual products to display for the bundle. Note that the individual products chosen will override the collection. Enter Bundle tab title and Bundle tab image. Choose to show product vendor, rating,.. on product cards if you want. STEP 3: Set up bundle discount 3.1. Set up Discounts in Shopify admin Go to Shopify Admin → Discounts → Create discount Choose the "Amount off products" discount type. Make sure you choose "Automatic discount". Set the Discount value (this will be displayed in your bundle discount), and the Eligibility of the discount. Set the Minimum purchase requirements. Click "Save". 3.2. Set up Discounts in Product bundle section At Bundle block > Discount settings group: Settings name How to set up? Minimum items required Enter the minimum number of items required to add the bundle to the cart. Each product can be added once Enable this to allow only one variant of a product to be added, even if the product has multiple variants. Discount type Fill in the exact discount type (Percentage or Amount) set in Shopify admin. Discount value Enter 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: Customize the bundle summary At Bundle block > Bundle summary settings group: Enter the Heading and Text. Enter Sale label and choose the bundle summary position (Left or Right). Repeat these steps for setting up other Bundle blocks. STEP 5: Click “Save”. 🤔 How to customize the Product bundle section? Want to make the section more visually attractive? Here's how: STEP 1: Click on the Product bundle section to open its settings panel. STEP 2: Add section heading and description text Enter Heading, Subheading, Text. STEP 3: Customize sale label that appear next to the section heading: At Sale label settings group: Enter Text for the label, for example: Up to 30% OFF. Choose colors for the label's background and text. STEP 4: Customize bundle tabs' look At Bundle tab settings group: Choose size and style for bundle title. Show bundle image if you want. STEP 5: Customize product card background At the Product cards settings group in the section settings panel: Toggle Show background ON to add a distinct background behind each product card in the bundle. Once enabled, you can adjust Desktop side padding (default: 18px) and Mobile side padding (default: 12px), and choose Background color for light and dark modes. STEP 6: Customize bundle summary color scheme Still in the section settings panel, scroll to the Bundle summary settings group: Choose Color scheme (Light) and Color scheme (Dark) to control the appearance of the bundle summary panel. STEP 7: Click "Save". 🤔 How to enable carousel for the section? Want to save layout space and enhance user engagement with carousels? Here's how: STEP 1: Click on the Product bundle to open its settings panel. STEP 2: Scroll down to the Carousel setting group, customize these: 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 the carousel to slide automatically, then adjust Auto-play every. Enable Show navigation arrows to let users manually swipe left or right over the carousel. STEP 4: Click "Save" when done. 🤔 What customization options can you give your Product bundle? For the whole Product bundle section: ✨ Change color scheme Click on the Product bundle section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the heading size Click on the Product bundle section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Product bundle section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Product bundle section, and choose the Heading alignment to be Left, Right, or Center. ✨ Change the section width, add padding, or add a divider Click on the Product bundle section, and scroll down to the Section layout group, and you will be able to change those settings. ✨ Change the Desktop layout 🖥️ Click on the Product bundle section, and scroll down to the Desktop layout, and you will be able to change Number of columns, Number of rows on desktop, and Block spacing. ✨ Change the Mobile layout 📱 Click on the Product bundle section, and scroll down to the Mobile layout, and you will be able to change Number of columns and Block spacing. ✨ Customize the "Add to bundle" and "Choose option" button labels Click on the Product bundle section and scroll to the Product cards group: Enter your preferred text in "Add to bundle" button label - this is the button shown on each product card when no variant selection is needed. Leave blank to use the default text "Add to bundle". Enter your preferred text in "Choose option" button label - this button appears instead when a product has multiple variants (e.g., size, color) and the customer needs to select one first. Leave blank to use the default text "Choose option". ✨ Align the "Add to bundle" buttons to the same row Click on the Product bundle section, scroll to the Product cards group, and toggle Sticky button ON. When enabled, all "Add to bundle" and "Choose option" buttons align to the bottom of the product list, so they sit on the same horizontal line regardless of card content height. 6. Change Logs Version 1.5.0: "Show background" and related product card settings moved from bundle block to section level. Bundle summary color scheme moved to section level. New "Choose option" button label setting added. "Add to bundle" button label and "Sticky button" consolidated under the Product cards group at section level. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Promotional collections section? The Promotional collections section serves as a spotlight for the most notable collections with promotion on the site. It provides visitors with curated selections or complete collections, enabling easy exploration of products aligned with their interests. Maximize theme provides the flexibility to showcase up to five promotional collections within this section. 2. Section Components Section Showcase notable collections with products on the site. Available blocks Used to add a single image slide with optional text and a button. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it. Click "Add section". Search for Promotional collections. Click on it to add. 4. Highlight features Multiple collections in a section: Enhance organization while maintaining smooth browsing among collections. Promotion support: Highlight product/image/video for further promos. Autoplay controls: Set the autoplay interval or disable it entirely. 5. Common Use Cases 🤔 How to set up the Promotional collections section? Don’t know where to start with your Promotional collections section? Here's how: STEP 1: Add the section Add the Promotional collections section. STEP 2: Add the block and choose a collection to show Under the Promotional collections section, there are 3 Promotional collection blocks by default. Click on the block to open its settings panel. Select the Collection you want to feature on the page. At Product cards settings group, control which product information (vendor, ratings) displays. STEP 3: Set up the promotion Still at the block, navigate to Promotional collection settings group: Toggle Enable promotion to ON. Then you can set up: If you want to… You need to… Feature a product as the promotion… Find the Product config, and choose the product you want to feature. Feature a video as the promotion… At the Video settings group, Upload video or embed the video URL to feature on the promotional collection. Make the video autoplay if you wish. Feature an image as the promotion… Upload an Image to feature. You can also upload a separate one for mobile devices. Attach a Link to redirect customers if you wish. Note: Promotion prioritizes showing the featured product, followed by video, then image. STEP 4: Customize the promotion display Choose the promotion position: Left or Right. Customize the Overlay content: opacity, alignment, and position. Customize Promotion layout: promotion width/height/ratio, heading, text, button… STEP 5: Customize the section look Click on the Promotional collections section to open its settings panel, and then you can: Enter the Heading, Subheading for the section. Adjust the Collection tab’s Title size & Title style. If you want to enable a separate background for this section's product card, enable Show background at Product cards settings and choose the background color. STEP 6: Click “Save”. 🤔 How to enable carousel for the section? Want to save layout space and enhance user engagement with carousels? Here's how: STEP 1: Click on the Promotional collections to open its settings panel. STEP 2: Scroll down to the Carousel setting group, customize these: 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 the carousel to slide automatically, then adjust Auto-play every. Enable Show navigation arrows to let users manually swipe left or right over the carousel. STEP 4: Click “Save”. 🤔 What customization options can you give your Promotional collections? For the whole Promotional collections section ✨ Change color scheme Click on the Promotional collections section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the heading size Click on the Promotional collections section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Promotional collections section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Promotional collections section, find and choose the Heading alignment to be Left, Right, or Center. ✨ Change the section width, add padding, or add a divider Click on the Promotional collections section, and scroll down to the Section layout group, and you will be able to change those settings. ✨ Change the Desktop layout 🖥️ Click on the Promotional collections section, and scroll down to the Desktop layout, and you will be able to change Number of columns, Number of rows on desktop and Block spacing. ✨ Change the Mobile layout 📱 Click on the Promotional collections section, and scroll down to the Mobile layout, and you will be able to change Number of columns and Block spacing. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is the Promotion Spotlight section? The Promotion Spotlight section grabs user attention by sharing key messages, promotions and creates a sense of urgency with the countdown timer. Its functions can be flexibly utilized by either independently highlighting its surrounding, or by combining with other sections to create a powerful promotion group. 2. Location & Setup Go to "Online Store" > "Themes" > "Customize". Select where you want to place it. Click "Add Section". Search for Promotion Spotlight. Click on it to add. 3. Section Components Section Adds & customize image, customize the section layout and colors. Available block Displays icons with customizable image and size to visually enhance your message. Adds heading, description and coupon code with customizable font styles, size, and coupon color. Display a customizable countdown timer, visually urging customers to take action within the remaining time. Creates a call-to-action button, allowing visitors to take immediate action. 4. Core Features Create a sense of urgency: Set up the countdown (timer, column spacing and color) and call-to-action button to urge visitors to take immediate action. Attention attraction tool: Customizable icon, text and coupon code to fit your promotion strategy. Responsive Design: Adjusts seamlessly to different screen sizes for better user experience. 5. Common Use Cases 🤔 How to set up the Promotion Spotlight section? Want to add and set up the Promotion Spotlight section? Here's how: STEP 1: Add a background image Click on the Promotion Spotlight section to open its settings panel and: Add an Image as the section background (optional). STEP 2: Add the icon Click on the Icon block to open its settings panel, then you can: For the icon, you have 3 options: Choose an Icon from the dropdown list. Find your favorite icon from the Theme icon list and paste it into the Use another icon field. Upload a Custom icon image. STEP 3: Add the text & coupon code Click on the Text block to open its settings panel, then you can: Enter the Heading and Text to add the content. Enter the Coupon code (one of your active discount code in the admin editor). STEP 4: Add the countdown timer & button Click on the Countdown Timer block to open its settings panel, then you can: Customize the Time zone, Year, Month, Day, Hour and Minute settings to set up the countdown. STEP 5: Add the button Click on the Button block to open its settings panel, then you can: Add the Button label and Button link. Enable Open this link in a new window if you want to redirect the users into a different tab. STEP 6: Click "Save" when done. 🤔 What customization options can you give your Promotion Spotlight? For the whole Promotion Spotlight section ✨ Change color scheme Click on the Promotion Spotlight section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the Image overlay capacity Click on the Promotion Spotlight section, adjust the Image overlay opacity (0-100%) to visibly display overlay text. ✨ Add a border to the section Click on the Promotion Spotlight section, enable the Show border to wrap the section in a thin border. ✨ Change the background image height Click on the Promotion Spotlight section to open its settings panel and: In Desktop layout setting group, adjust these settings to best demonstrate your contents on desktop: Minimum background image height (150-450px). Content alignment, Column spacing and Row spacing. Do the same in the Mobile layout setting group for mobile demonstration. Customize the Section Layout setting group for the section's look in relation to its surroundings: The Section width dropdown offers 3 width options (Page Width, Full Width, Full Width Padded). The Top padding and Bottom padding ranges 0-100px. ✨ Change the content alignment Click on the Promotion Spotlight section, in the Desktop layout setting group, set Content alignment to be Left, Center or Right for the desktop display.Repeat the same process in the Mobile layout setting group for the mobile display. ✨ Change the column and row spacing Click on the Promotion Spotlight section, in the Desktop layout setting group, drag to adjust Column spacing and Row spacing (0-100px) for the desktop display.Repeat the same process in the Mobile layout setting group with the Row spacing for the mobile display. ✨ Change the section width, add padding, or add a divider Click on the Promotion Spotlight section, and scroll down to the Section layout setting group, and you will be able to change those settings. 🤔 What customization options can you give your Promotion Spotlight blocks? Option How to set it up? ✨ Change the icon size Click on the Icon block, drag to adjust the Icon size (0-100px). ✨ Add highlight effect to the heading Click on the Text block: When entering the Heading in the Text block, wrap the text you want to highlight between [] brackets. Choose the Highlight effect style to be Underline, Marker, Text color change or Shadow. ✨ Change the heading size Click on the Text block, and choose the Heading size to be Small, Medium, or Large. ✨ Transform the Heading text Click on the Text block, find and choose the Text transform to be None, Italic, Uppercase or Italic and Uppercase. ✨ Change the heading alignment Click on the Text block, find and choose the Heading alignment to be Left, Right, or Center. ✨ Change the Heading tag (for SEO purposes) Click on the Text block, find and choose the Heading tag from the list. ✨ Change the Text size Click on the Text block, find and choose the Text size to be Small, Medium, or Large. ✨ Change the countdown timer text size, border, or adjust background overlay Click on the Countdown timer block, and in the first setting group, you will be able to change those settings. ✨ Change the countdown timer column spacing Click on the Countdown timer block, scroll down to Column Spacing, and drag to adjust your preferred spacing in the Desktop layout and Mobile layout setting group (for desktop 🖥️ and mobile 📱 respectively). ✨ Change the color of countdown timer (timer, line and border, timer background) Click on the Countdown timer block, scroll down to the Colors setting group and you will be able to change those settings in light or dark mode. ✨ Change the button style Click on the Button block, and choose the Button style to be Primary, Secondary, or Text link. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Blog page? The Blog page plays a key role in a website's success—it's where fresh ideas meet strategy. More than just a space for articles, it drives engagement, improves search visibility, and positions the brand as a trusted voice. With regular, meaningful posts, it not only draws in traffic but also deepens customer relationships and adds real value to the browsing experience. 2. Page Components This part mentions the sections & blocks that are ONLY AVAILABLE for the Blog page. Section Customize how elements of the blog page are displayed. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Click on the Homepage dropdown menu. Search for "Default blog". Click on it to navigate. From here, you can customize the Blog page section as you want. 4. Common Use Cases 🤔 How to set up a Blog page? STEP 1: Click on the Blog page to open its setting panel. STEP 2: Customize the overall look Show all blog tags: Turn it on to display all tags associated with blog posts. Post per page: Set the number of blog posts shown on each page. STEP 3: Customize the blog card's display Number of columns on desktop: Set how many columns of blog cards are shown on desktop. Number of columns on first row: Set how many columns appear on the first row on desktop. STEP 4: Customize the navigation tool of the page Breadcrumbs: Show a breadcrumb trail to help users navigate back to previous pages. STEP 5: Click "Save". 🤔 How to customize blog cards' look on the Blog page? STEP 1: Click on the Blog page to open its setting panel. STEP 2: Customize blog card's overview details Under Blog cards setting group, customize: Author's name: Turn on Show author. Blog source: Turn on Show blog. Blog short preview: Turn on Show excerpt. Blog tags: Turn on Show tags. Number of comments: Turn on Show comment counts. STEP 3: Customize how the above details are aligned Still under Blog cards setting group, customize: Select how the content inside the blog card is aligned: In Content alignment, choose Left, Under, Right. STEP 4: Customize blog card's visual element demonstration Still under Blog cards setting group, customize: "Read now" button: Turn on Show "Read now" button. You can also change the label of the button. Display featured image on each blog card: Turn on Show featured image. Choose the ratio for the featured image: Pick a style at Image ratio. Add a secondary background to the blog card: Turn on Items secondary background. STEP 5: Click "Save". 🤔 What customization options can you give your Blog page? For the whole Blog page section ✨ Change the Heading tag (for SEO purposes) Click on the Blog page section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Blog page section, find and choose the Heading alignment to be Left, Right, or Center. ✨ Adjust the content block spacing on desktop Click on the Blog page section, and scroll down to the Section layout group, and you will be able to change Block spacing on desktop. ✨ Adjust the space between content rows on mobile Click on the Blog page section, and scroll down to the Section layout group, and you will be able to change Row spacing on mobile. ✨ Change the section width, add padding, or add a divider Click on the Blog page section, and scroll down to the Section layout group, and you will be able to change those settings. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is a Segmented banner? The Segmented banner section is designed to create visually striking banners that divide content into three distinct segments, perfect for showcasing promotions, announcements, or key visuals. It features numbered segments (e.g., "01," "02," "03") that can represent different offers or highlights, adding a structured layout to your design. 2. Section Components Section Display a banner section with multiple segments to the store. Available block Displays an image, heading, and content for each segment. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Select where you want to place it. Click “Add Section”. Search for Segmented banner. Click on it to add. 4. Highlight features 70:30 Layout Split: 70% of the banner is for the main content, the 30% area is divided into 3 equal segments that are interactive. RTL Adaptation: The section adjusts seamlessly for right-to-left (RTL) languages and layouts. 5. Common Use Cases 🤔 How to set up the Segmented banner section? Don’t know where to start with your Segmented banner? Just follow these steps: STEP 1: Add the sectionAdd the Segmented banner section, and you will have 3 Segmented banner blocks by default. STEP 2: Customize the look of each block (a.k.a each banner):Click on a Segmented banner block to open its setting panel, and change these settings: Image: Assign an image as the banner. For a separate image on mobile, add it to the Mobile image. Video: Add a video instead of an image, or embed video from url by entering a Youtube or Vimeo video link into the URL field.⚠️ Note: If both Image and Video are added, only the video will display. Banner content: Enter heading, button label, and adjust its size and position. STEP 3: Customize the whole section:In the Segmented banner section settings, you can: Adjust the Content alignment. Change the height of the banner for Desktop 🖥️ in Hero desktop height and for mobile 📱 in Hero mobile height. STEP 4: Click “Save” when done.If you want to explore more customization options, continue reading the next part. 🤔 What customization options can you give your Segmented banner? For the whole Segmented banner section ✨ Change transition color scheme: Click on the Segmented banner section, find the Colors setting group, and you can set up the Transition color for both light and dark versions. (This color appears when hovering over the next section or during transitions.). ✨ Add a top & bottom padding to the section: Click on the Segmented banner section, and scroll down to the Section layout group, and you will be able to change Top padding and Bottom padding. For a single Segmented banner block: ✨ Change the heading size: Click on the Segmented banner section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Segmented banner section, find and choose the Heading tag from the list. ✨ Change the button’s style Click on the Segmented banner section, find and choose the style you want in Primary button style, Second button style or Link button style. ✨ Change the content position Click on the Segmented banner section, find and choose the Content position to be on Top, Bottom or Center. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Hero Slideshow? The Hero Slideshow section is a dynamic way to showcase multiple images or slides at the top of your website, complete with customizable effects, layouts, and transitions to capture customer attention. 2. Section Components Section Displays a sliding or static slideshow to highlight key products, promotions, or messages. Available blocks Used to add a single image slide with optional text and a button. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it. Click "Add Section". Search for Hero slideshow. Click on it to add. 4. Highlight features Autoplay Controls: Set the autoplay interval or disable it entirely. Interactive Navigation: Enable arrows, pagination, or hover pauses for better user control. Transition Effects: Choose from Slide, Fade, or Zoom-in transitions. Responsive Layouts: Adjust desktop and mobile image heights for optimal display. 5. Common Use Cases 🤔 How to set up a simple Hero slideshow? Want to add a simple slide like the image below to your Hero slideshow? Here's how: STEP 1: Add the block to the sectionUnder the Hero slideshow section, add Slideshow block. STEP 2: Assign an image to the slide:Click on the Slideshow block, under Banner media group, you can: In Image, click “Select” and upload your image. (Optional) Upload a different image for the mobile version in Mobile image. Adjust the Overlay opacity from 0–100%. STEP 3: Add the content to the slide: Click on the Slideshow block, under Slideshow content group, and: Enter text into Subheading, Heading, and Text. Add the buttons by entering the label, and link, and choose the style. Choose the Content position. Adjust the Content alignment. STEP 4: Click “Save” when done. 🤔 How to add a promotional overlay to your slide? Want to your slide to have the overlay photos or products like the image below? Here's how: STEP 1: Open the settingsClick on the Slideshow block that you want to add a promotional overlay to. STEP 2: Add the overlay groups At each slideshow, you can add up to 2 overlay groups above the main image. Navigate to First promotion and Second promotion settings group. These groups can link to a product or show an image, depending on your need: If you want to… You need to… Show the products for the overlay… Find the Product config, and choose the product you want to show. Turn on Show product rating to display stars (optional). Show the images & text for the overlay… Add the Image. Adjust the Overlay opacity. Enter Subheading, Heading. Adjust the Overlay content alignment. Note:Promotion prioritizes showing the featured product, followed by the image. STEP 3: Adjust the promotion layout You can choose Content position and Overlay content alignment at Promotion layout settings. STEP 4: Click “Save” when done. 🤔 What other customization options can you give your Hero Slideshow? For the whole Hero Slideshow section: ✨ Change the auto-play timing of the slideshow Click on the Hero Slideshow section, under the Slide setting group, and adjust the Autoplay timing. ✨Make the slideshow pause when the mouse on Click on the Hero Slideshow section, under the Slide settings group, find and turn on the Pause on hover setting. ✨Show the left-right arrows Click on the Hero Slideshow section, under the Slide setting group, find and turn on the Show navigation arrows setting. ⚠️ Note: This only works if the Pagination type is None or Number bar. ✨ Change the transition effect Click on the Hero Slideshow section, under the Slide settings group, find and choose the Transition effect to be Slide, Fade, and Zoom in. ✨ Change the height of image rows Click on the Hero Slideshow section, and: For desktop 🖥️: Scroll down to Desktop layout, and choose your preferred image height in Desktop row height. For mobile 📱: Scroll down to Mobile layout, and choose your preferred image height in Mobile row height. ✨ Change the section width Click on the Hero Slideshow section > Desktop layout settings group, then choose the Section width. ✨ Change the padding Click on the Hero Slideshow section, scroll down to the Section layout group, and you will be able to change the Top padding and Bottom padding. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Product Components? The Product Components section allows you to showcase a product image and highlight its key features using interactive hotspots. These hotspots can display text and/or images, offering customers a detailed view of specific product components. 2. Section Components Section Highlight specific product details interactively with hotspots. Available block Add a hotspot with an image/icon and text to emphasize product features. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Select where you want to place it (on Homepage or Collection page). Click “Add Section”. Search for Product Components. Click on it to add. 4. Highlight features Customizable Image Source: Replace the product's default image with a custom upload or dynamic metafield. Interactive Hotspots: Add up to 5 hotspots to highlight product components with text and/or images. Hotspot Placement: Precisely position hotspots directly on the product image. Styling Options: Customize colors for hotspots and buttons to match your brand. Hover Content Display: Reveal detailed information when customers hover over a hotspot. 5. Common Use Cases 🤔 How to set up the Product Components section? Don’t know where to start with your Product components section? Just do these basic things: STEP 1: Add the section & blocks. Add a Product components section. By default, your section has 1 Component block. Click "Add block" to add more blocks or delete if you don’t need image hotspots. STEP 2: Add a product image to the section In the Product components section, go to Product group, then you can choose to: Select a Product to show its image. or Upload a Custom image (the recommended ratio is 16:9). If you do both, only the Custom image will be shown. STEP 3: Add the image hotspot blocks Each Component block represents an image hotspot, you can add up to 5 blocks. Then click on 1 block to set up the Position, Content, and Media. If you need more detailed guidance, read the use case about How to set up the image hotspots for the Product components. STEP 4: Adjust the content outside the image Go back to the Product components section, and you can modify the content of the Heading, Subheading, Text, and Button. Leave any field blank if you don’t need that element. STEP 5: Click “Save” when done. 🤔 How to set up the image hotspots for the Product Components? STEP 1: Add Component blocks (each = 1 hotspot, max 5). STEP 2: Adjust hotspot appearance (icon, position & color). Right in the Component block setting panel, under the Hotspot setting group, you can: Choose the Hotspot icon from the list. Adjust the position using Horizontal position and Vertical position. Click on the Product Components section > Colors> and change the Hotspot color. STEP 3: Adjust the inside look of the hotspots When users click on a hotspot, a small tab will appear, let’s customize what you want to show in this tab: Group Config name & Purpose Media Image: Upload a small image to show on top of the tab. Icon: Choose an icon instead of an image. Custom icon SVG: Type in an SVG link. Media style: Choose Square or Round. Content Heading: Title for the tab. Text: Description text. Content alignment: Adjust alignment for heading and description. STEP 4: Adjust the content outside the image Go back to the Product components section, and you can modify the content of the Heading, Subheading, Text, and Button. Leave any field blank if you don’t need that element. STEP 5: Click “Save”. 🤔 What other customization options can you give your Product Components? For the whole Product Components section ✨ Change color scheme: Click on the Product Components section, and choose the overall scheme you want to use in both light and dark mode in the Color schema. ✨ Change the heading size: Click on the Product Components section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Product Components section, find and choose the Heading tag from the list. ✨Change the product image’s position Click on the Product Components section, find Layout, and choose the Image position to be on Top (before text) or Bottom (after text). ✨ Change the content alignment Click on the Product Components section, find Layout, and choose the Content alignment to be Left, Right, or Center. ✨ Change the section width, add padding, or add a divider Click on the Product Components section, scroll down to the Section layout group, and you will be able to change those settings. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Text columns with icons? The Text columns with icons section allows you to display up to four columns of text, each paired with an icon. This section is ideal for highlighting key features, services, or benefits of your product or store in a visually engaging way. 2. Section Components Section Displays several text columns, each with an optional icon. Available block Used to add a single column that has text & an icon. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add Section" Search for Text columns with icons Click on it to add. 4. Core Features Customizable Icons: Choose from built-in icons or upload custom images. Flexible Text Columns: Display multiple columns of text and icons. Responsive Design: Adjusts seamlessly to different screen sizes for better user experience. 5. Common Use Cases 🤔 How to set up Text columns with icons section? Don’t know where to start with your Text columns with icons section? Here's how: STEP 1: Add the text & icons Click on the Column block to open its settings panel, then you can: Icon options (3 ways): Choose an Icon from the dropdown list. Find your favorite icon from the Theme icon list and paste it into the Use another icon field. Upload a Custom icon image. Enter the Heading and Text to add the content. STEP 2: Repeat for additional columns Add more Column blocks and repeat Step 1 if needed. STEP 3: Adjust the number of columns shown On desktop 🖥️: Go to Desktop layout → choose the Column layout (from 1–5 columns). On mobile 📱: Go to Mobile layout → choose the Column layout (1 or 2 columns). STEP 4: Click “Save” when done. For more customization options, continue reading the next part What customization options can you give your Text columns with icons? 🤔 What other customization options can you give your Text columns with icons? For the whole Text columns with icons section: ✨ Change the heading size: Click on the Text columns with icons section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (SEO): Click on the Text columns with icons section, find and choose the Heading tag from the list. ✨ Add border between each column: Click on the Text columns with icons section, find and choose Line and border to be None, Full border, or Vertical line. ✨ Change the icon position: Click on the Text columns with icons section, choose Icon position to be Next to text or Above text. ✨ Adjust the icon size: Click on the Text columns with icons section, adjust Icon size from 20px to 100px. ✨ Make the section a carousel: In Carousel: turn on Enable carousel on desktop (🖥️) and Enable swipe on mobile (📱). Adjust Auto-play every to control slide timing. ✨ Change the height of the whole section: Go to Desktop layout (🖥️) or Mobile layout (📱), then change Section height. ✨ Change the height of images: Go to Section layout, then choose your preferred image height in Desktop height (🖥️) and Mobile height (📱). ✨ Change the section width / padding / divider: Scroll to the Section layout group and adjust Section width, padding, or add a divider. ✨ Change color scheme: Choose the overall scheme for both light and dark mode in Color scheme. ✨ Change the background color of the columns: Go to Colors and change Column background (light) or Column background (dark). ✨ Change the color of the icons: In Colors, adjust Icon (light) or Icon (dark) settings. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Custom Liquid section? The Custom Liquid section enables you to add custom Liquid code directly into your theme. This section is designed to give you high control over text, products, collection templates, images, or other custom elements, allowing you to tailor your site far beyond the capabilities of standard Shopify settings. With Custom Liquid, you can: Display text or HTML content. Embed products, collections, and other store data dynamically. Implement advanced customizations. 2. Section Components Section Insert custom Liquid code to create tailored content on your theme. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add Section" Search for Custom Liquid Click on it to add. 4. Core Features Tailored functionality: Create unique content and features beyond standard settings. Advanced customization: Extend and enhance your store’s capabilities to meet unique business needs. 5. Common Use Cases 🤔 How to set up Custom Liquid section? Here are the steps for you to set up the section: STEP 1: Add the Custom Liquid section. STEP 2: On the section setting panel, enter your Liquid code in the Custom Liquid textbox. STEP 3: Click “Save”. 🤔 What other customization options can you give your Custom Liquid? For the whole Custom Liquid section: ✨ Change color scheme: Click on the Custom Liquid section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change section width, padding, or add divider: Click on the Custom Liquid section, and scroll down to the Section layout group to change those settings. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Text with image cards? The Text with image cards section is a stylish layout feature that organizes content into multiple cards, each combining text and images. The section is ideal for highlighting key details, showcasing products, or presenting services. 2. Section Components Section Add a section showing multiple text and image cards in 2 layouts: Vertical or Horizontal. Available block Used to add a card (that has image and text inside) to the section. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add Section" Search for Text with image cards Click on it to add. 4. Core Features Optimized card layouts: Seamless display on desktop and mobile. Fully customizable: Each card can have Image, Text, and Button. Drive engagement: Images can link to products, collections, or any destination. 5. Common Use Cases 🤔 How to set up the Text with image cards section? If you want to display key information and images through the Text with image cards section, follow these steps: STEP 1: Add the section Add the Text with image cards section to your desired page. STEP 2: Set up the section heading Click on the Text with image cards section to open its settings panel, then fill in: Subheading: A short line displayed above the main heading. Heading: The main title of the section. You can wrap text between [] to add text highlights (e.g., Adding [marker] will underline [highlight] text). Heading size: Choose Small, Medium, or Large. Heading tag: Select the appropriate HTML heading tag for SEO (e.g., H2). Heading alignment: Choose Left, Center, or Right. Highlight effect: Choose how the bracketed text in your heading or text is styled — e.g., Underline, Marker, etc. Text transform: Optionally force text to Uppercase, Italic, or leave as None. STEP 3: Set up each Card block's content By default, the section includes 4 Card blocks. You can delete, hide, or add more as needed. Click on a Card block to open its settings, then fill in: Image: Upload your own image or explore free images from the built-in library. Image link: Paste a URL or search for a page to make the image clickable. Toggle Open this link in a new tab if needed. Subheading: A short line displayed above the card heading. Heading: The main title of the card. Supports the same [] text highlight syntax as the section heading. Heading size: Choose Small, Medium, or Large for the card heading independently from the section heading. Text: Enter the card's body content using the rich text editor. Supports the same [] highlight syntax. Highlight effect & Text transform: Same options as the section level — applied to this card's text content. Button label & Button link: Add a clickable button to the card. Toggle Open this link in a new tab if needed. Button style: Choose Primary or Secondary. STEP 4: Click "Save". 🤔 How to adjust the Text with image cards layout? STEP 1: Click on the Text with image cards section to open its settings panel. STEP 2: Configure the card style Under the Card group, set the following: Layout: Choose how the image and text are arranged within each card: Vertical — Image sits on top of the text. Works with up to 4 columns on desktop. Horizontal — Image sits side-by-side with the text. ⚠️ Note: Horizontal layout caps at a maximum of 2 cards per row on desktop and 1 card per row on mobile, regardless of the column number settings. Content alignment: Choose Left, Center, or Right to align the text content within each card. Image style: Choose the shape/ratio of the card image — e.g., Square (1:1), Portrait, Round, etc. STEP 3: Configure the desktop layout Under the Desktop layout group: Number of columns: Drag the slider to set how many cards appear per row on desktop (up to 4). If Horizontal layout is selected, this is automatically capped at 2. Block spacing: Adjust the gap (in px) between cards on desktop. STEP 4: Configure the mobile layout Under the Mobile layout group: Number of columns: Choose 1 or 2 columns per row on mobile. If Horizontal layout is selected, this is automatically set to 1. Block spacing: Adjust the gap (in px) between cards on mobile. STEP 5: Click "Save". 🤔 How to enable carousel for Text with image cards? Want to save layout space and let customers scroll through cards? Here's how to enable carousel mode: STEP 1: Click on the Text with image cards section to open its settings panel. STEP 2: Scroll down to the Carousel group and toggle the options you need: Enable carousel on desktop 🖥️: Turns the grid into a scrollable carousel on desktop. Enable swipe on mobile 📱: Allows customers to swipe through cards on mobile. STEP 3: (Optional) Set Auto-play every to a value between 1–10 seconds to make the carousel advance automatically. Leave it at 0 to disable auto-play and let customers navigate manually. STEP 4: Click "Save". 🤔 What customization options can you give your Text with image cards? For the whole Text with image cards section: ✨ Change the color scheme Click on the Text with image cards section, scroll to the Colors group, and choose a Color scheme (light) and Color scheme (dark) for the section's overall appearance. ✨ Add a background color to each column Click on the Text with image cards section, scroll to the Colors group, and set Column background (light) and Column background (dark) to apply a distinct background color to each card column — useful to visually separate cards from the section background. ✨ Change the section heading size Click on the Text with image cards section and choose Heading size to be Small, Medium, or Large. ✨ Change the heading tag (for SEO) Click on the Text with image cards section and choose a Heading tag from the dropdown (H1 through H6 or paragraph). ✨ Change the heading alignment Click on the Text with image cards section and choose Heading alignment to be Left, Center, or Right. ✨ Change the section width, padding, or add a divider Click on the Text with image cards section and scroll down to the Section layout group to adjust Section width, Top padding, Bottom padding, and toggle Show section divider. For a single Card block: ✨ Make the card image clickable Click on the Card block and paste a URL or search for a page in the Image link field. Optionally toggle Open this link in a new tab ON. ✨ Change the card heading size Click on the Card block and choose Heading size to be Small, Medium, or Large. This is independent from the section-level heading size. ✨ Change the button style Click on the Card block and set Button style to Primary or Secondary. ✨ Open the button link in a new tab Click on the Card block, scroll to the Button link field, and toggle Open this link in a new tab ON. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Featured collections section? The Featured collections section highlights key collections, making it easier for visitors to discover selected products that match their preferences. This section in the Maximize theme lets you show up to 3 collections. 2. Section Components Section Showcase selected collections on any page. Available block Add a collection with a customizable countdown timer and background image. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for Featured collections Click on it to add. 4. Highlight features A countdown timer: Create urgency and drive conversions. Multiple collections in a section: Enhance organization while maintaining smooth browsing among collections. 5. Common Use Cases 🤔 How to set up the Featured collections section? Don’t know where to start with your Featured collections section? Here's how: STEP 1: Add the section Add the Featured collections section. STEP 2: Add the Collection block and choose a collection to show Under the Featured collections section, add the Collection block. Click on the block to open its settings panel. Select the Collection you want to feature on the page. STEP 3: Customize the section look: Click on the Featured collections section to open its settings panel, and then you can: Enter the Heading, Subheading for the section. Adjust the featured collections’ Title size & Title style. If you want to enable a separate background for this section's product card, enable Show background at Product cards settings and choose the background color. STEP 4: Click “Save”. 🤔 How to add a countdown timer to the Featured Collection section? A countdown timer is a great way to create a sense of urgency and promote conversions. Here’s how to add it : STEP 1: Open the settings panel Under the Featured collection section, click on THE FIRST Collection block to open its settings panel. STEP 2: Enable the Countdown timer setting Scroll to the Countdown timer setting group, then toggle on the Enable Countdown timer setting. STEP 3: Set up the end time Select the time zone based on your target audience. Set the date and time for when the countdown should end. STEP 4: Customize the countdown timer look Once you’ve enabled the Countdown timer setting in STEP 2, still in the Countdown timer setting group, you can: Enter the text to display above the timer (e.g., "Hurry up! Get the best deal at the best price."). Choose the text size (Small, Medium, or Large). (Optional) Toggle "Show border around timer" if you want a bordered design. STEP 5: Click “Save”. 🤔 How to enable carousel for the section? Want to save layout space and enhance user engagement with carousels? Here's how: STEP 1: Click on the Featured collections to open its settings panel. STEP 2: Scroll down to the Carousel setting group, customize these: 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 the carousel to slide automatically, then turn on Auto-play. Enable Show navigation arrows to let users manually swipe left or right over the carousel. STEP 3: Click “Save”. 🤔 What customization options can you give your Featured collections? For the whole Featured collections section ✨ Change color scheme Click on the Featured collections section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Add a background image Click on the Featured collections section and scroll down to Background image setting group. You can upload your background image here. ✨ Change the heading size Click on the Featured collections section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Featured collections section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Featured collections section, find and choose the Heading alignment to be Left, Right, or Center. ✨ Change the section width, add padding, or add a divider Click on the Featured collections section, and scroll down to the Section layout group, and you will be able to change those settings. ✨ Change the Desktop layout 🖥️ Click on the Featured collections section, and scroll down to the Desktop layout, and you will be able to change Products per row on desktop, Number of rows on desktop and Block spacing. ✨ Change the Mobile layout 📱 Click on the Featured collections section, and scroll down to the Mobile layout, and you will be able to change Products per row on mobile and Block spacing. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Media Gallery? The Media Gallery section is a flexible area to display various types of visual content, like product images, promotional videos, buyer reviews, and social media content. It’s a great way to provide customers with an engaging, detailed look at your products or promotions. 2. Section Components Section A section to showcase images and videos in a visually appealing layout. Available block Each block can contain an image or a video with optional content overlay. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add Section" Search for Media Gallery. Click on it to add. 4. Core Features Images & Videos: Display high-quality images or embed videos from YouTube/Vimeo. Custom Layouts: Adjust column and row settings for desktop and mobile views. Content Overlay: Add text or buttons directly on images or keep it outside the media. Swipeable Mobile Gallery: Create a swipeable carousel for mobile users. 5. Common Use Cases 🤔 How to add and style media blocks? Want to control the size of each media block? Here’s how: STEP 1: Add the section & blocks. Add a Media Gallery section. Click "Add block" for new Media blocks. STEP 2: Configure Block settings Choose to add an Image or a Video. Enter your media’s content in Title, Subtitle,Text, and Button label (if you need a button) Select an Icon (choose, custom, or SVG) Adjust the Content alignment. STEP 3: Optimize Layout Click on the Media Gallery section, and adjust the look as you want in Desktop layout, Mobile layout, and Section layout. If you need more detailed guidance, continue reading 🤔 What customization options can you give your Media Gallery? 💡 Pro tip: Enable the swipeable carousel for mobile to provide an intuitive browsing experience with multiple media items. STEP 4: Click “Save” when done. 🤔 How to show content Inside or Outside of media? Need to overlay content on your images or keep it outside? Follow this: STEP 1: Click on a Media block to access its settings. STEP 2: Enable or disable the "Content Overlay" option. Adjust the overlay opacity if enabled. STEP 3: If you ENABLE content overlay, then you can do these under the Overlay content setting group: Change the Overlay content position. Adjust the Overlay opacity from 0-100%. If you DISABLE content overlay, then you can do these under the Layout setting group: Change the Media position to make the content above or below the media. STEP 4: Click “Save” when done. 🤔 How to modify the Height and Width of each Media block? Want to control the size of each media block? Here’s how: STEP 1: In the Media Gallery section settings, adjust the Number of columns and Row height for desktop and mobile. STEP 2: Customize each block’s width and height: Click on a Media block. Scroll down to the Layout setting group. Adjust the Number of columns wide and Number of rows tall options. STEP 3: Click “Save” when done. 🤔 What customization options can you give your Media Gallery? For the whole Media Gallery section: ✨ Change the heading size: Click on the Media Gallery section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Media Gallery section, and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Media Gallery section, and choose the Heading alignment to be Left, Right, or Center. ✨ Make the media swipeable on mobile Click on the Media Gallery section, scroll down to Mobile layout, and turn on the Enable swipe on mobile toggle. ✨Change the section width Click on the Media Gallery section, find the Section layout group, and choose the Section width to be Page width, Full width,Full width padded. ✨ Change the section width, add padding, or add a divider Click on the Media Gallery section, and scroll down to the Section layout group, and you will be able to change those settings. For a single Media block: ✨ Show sound control button for video: If you use video for your media block and make it autoplay, add a sound control button for users to turn on or off the audio: Click on the Media block, and enable the Show sound control toggle. ✨ Add highlight effect to the title: When entering the Title for the Media Gallery section, wrap the text you want to highlight between [] brackets. Choose the Marker style to be Underline or Font highlight. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Video? The Video section allows you to embed and display videos, focusing solely on video content without additional distractions. It's perfect for product demos, tutorials, or any content that needs full viewer attention. 2. Section Components Section Displays a video full-width with customizable settings for layout, controls, and accessibility. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for Video Click on it to add. 4. Highlight features Cover Image for Engagement: Display an eye-catching image before the video starts. Flexible Video Sources: Upload from Shopify or embed a YouTube/Vimeo link. Sound Control Toggle: Allow users to mute/unmute as needed. Adaptive Layout: Enable full-width display for a cinematic experience 5. Common Use Cases 🤔 How to Set Up the Video Section? Don’t know where to start with your Video section? Just follow this guide: STEP 1: Add the Video section STEP 2: Customize text elements: Add a Heading and set the size (50%-200%). Choose a Heading Tag (H1, H2, etc.) to enhance SEO. Enter an optional Subheading, Text for extra context. Enter the Button label, add Button link. STEP 3: Choose a Video Source: Under Shopify-hosted video, click Select Video to upload a video. Alternatively, paste a YouTube or Vimeo link. (If you enter both, the embedded URL takes priority). STEP 4: Click “Save” when done. 🤔 What customization options can you give your Video? For the whole Video section: ✨ Make the video autoplay & loop: Click on the Video section, and turn on the Used as Hero setting. ✨Set a cover Image instead of video thumbnail: Click on the Video section, and upload an image into the Cover image setting. ✨Adjust the content position on the image: Click on the Video section, find and choose your favorite the Desktop position setting. If you want custom position, just choose “Custom” and adjust the Custom horizontal position and Custom vertical position. ✨ Adjust the overlay opacity: Click on the Video section, find the Overlay opacity setting, and adjust the opacity from 0% - 100%. ✨ Change the content aligment: Click on the Video section, find the Alignment setting, and choose it to be Left, Right, or Center. ✨ Change the padding: Click on the Video section, and scroll down to the Section layout group, and you will be able to change the Top padding and Bottom padding. ✨ Change color scheme: Click on the Video section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. Need help? Contact our support team at Omni Themes Support.
