Maximize - Sections & Blocks
Maximize - Sections & Blocks
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. > 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. > 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. 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. 5. Common Use Cases 🤔 How to set up the Product picker section? Want to set up the section? Here's how: STEP 1: Add the section Add the Product picker section. STEP 2: Add the blocks and set up the collection Under Product picker section, add Collection blocks and click on it to open its settings panel: Choose the product Collection you want customers to browse. (Optional) Enter a custom display name for the collection. STEP 3: Filter settings You can add multiple filters to help customers narrow down their search. Still at Collection block: Locate to Filter 1 group settings > Filter name field, enter the exact label of a filter created in your Shopify filter app. Customize the Title of the filter name to be more user-friendly. Choose how the dropdown options display. Repeat these steps with Filter 2 and Filter 3. STEP 4: Click "Save". 🤔 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 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. For price filtering, choose how customers set the price: Range slider Input Rabge 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. ✨ 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. 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 to open its settings panel. STEP 2: Add section heading and description text Enter Heading, Subheading, Text, and label for “Add to bundle” button. STEP 3: Customize sale label 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: 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. 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 Text with image cards section? If you want to display key information and images through the Text with image cards section, follow this: STEP 1: Add a section Add the Text with image cards section. STEP 2: Customize each block’s content By default, the Text with image cards section includes 4 Card blocks. You can delete, hide, or add more blocks as needed. Customize: Image: Upload or select an image from free sources. Heading: Define the main title for the card. Text: Enter description or details. Button label & Button link: Add a clickable button. STEP 3: Adjust section layout Layout: Horizontal or Vertical. Image style: Portrait, Round, Square, etc. If you want more detail, read How to adjust the Text with image cards layout? STEP 4: Click “Save” 🤔 How to adjust the Text with image cards layout? STEP 1: Click on the section to open settings. STEP 2: Choose layout style under Card group: Horizontal or Vertical layout Content alignment: Left, Center, Right Image style STEP 3: Customize for Desktop & Mobile Desktop: Set number of cards per row (max 4), adjust spacing Mobile: Set number of cards per row (max 2), adjust spacing STEP 4: Click “Save” 🤔 How to enable carousel for Text with image cards? STEP 1: Click on the section to open settings. STEP 2: Under Carousel group: Toggle Enable carousel on desktop (active when 5+ cards) Toggle Enable swipe on mobile STEP 3: Set autoplay timing (0–10s). Leave at 0 to disable. STEP 4: Click “Save” 🤔 What customization options can you give your Text with image cards? For the whole Text with image cards section: ✨ Change color scheme: Choose light/dark mode in Color scheme. ✨ Change heading size: Small / Medium / Large ✨ Change heading tag (SEO) Select a heading tag. ✨ Change heading alignment Left, Right, or Center. ✨ Change section width, add padding/divider Scroll to Section layout group for controls. For a single Card block: ✨ Change heading size: Small / Medium / Large for block heading. ✨ Change button style: Select Primary or Secondary style. 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.
Maximize - Sections & Blocks
1. What is the Highlighted product set? The Highlighted Product Set section combines the interactivity of a Shop the Look experience with the layout flexibility of a Collage. It allows you to showcase multiple images with interactive hotspots, where customers can discover featured products directly within a visually engaging gallery. 2. Section Components Section Display a visually appealing gallery of images with product hotspots. Available block Adds an image with customizable hotspots to feature products. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for Highlighted product set Click on it to add. 4. Highlight features Integrated Info Display: Show essential details like contact information or working hours. Actionable Button: Allow users to click and get directions or access other features. Mobile-Friendly Design: Ensure your map is responsive and accessible on any device. Customizable Labels: Adjust the text for your button and information fields. 5. Common Use Cases 🤔 How to upload an image (Highlight blocks) and adjust its height and width? You need to add several Highlight blocks (image blocks) and set them up after arranging the overall layout. Here’s how: STEP 1: Add the section & Highlight blocks to the section. Add the Highlighted product set section. By default, you will have 4 Highlight blocks. You can delete, hide, or add more blocks as needed. STEP 2: Assign an image to a block Click on a Highlight block, under Image, click “Select”. STEP 3: Set up the overall layout of the section Click on the Highlight Product Set section to open the setting panel, and: 🖥️ For desktop: Find the Desktop layout, adjust the Number of columns (up to 4 columns) & the Row height 📱 For mobile: Find the Desktop layout, adjust the Number of columns (1 or 2 columns) & the Row height STEP 4: Adjust the height & width of an image 🖥️ For desktop: Go to Desktop layout > Column width & Row Height (from 1-4). 📱 For mobile: Go to Mobile layout > Column width & Row Height (1 or 2). ⚠️ Note: The Column width must be equal to or less than the Number of columns. STEP 5: Click “Save” when done. 🤔 How to add the image hotspots for each Highlight block? The default Highlight block has no image hotspots until you assign products to the block. You can add up to 3 image hotspots for an image. Here’s how to do it: STEP 1: Navigate to the setting group: Click on a Highlight block to open its settings panel, then scroll down to the Product 1 setting group. STEP 2: Assign a product: In Product, click Select and choose the product from the list. Once you’re done, you will see the white circle (a.k.a hotspots) appearing on the image. To adjust its position, continue step 2. STEP 3: Adjust the hotspot’s position: Under the Product setting group, you will see 4 sliders to change the hotspot’s position: Hotspot desktop horizontal position Hotspot desktop vertical position Hotspot mobile horizontal position Hotspot mobile vertical position Just change these 4 settings until your hotspot is at your desired placement. ⚠️ Note: These first 3 steps above guide you to set up the 1st hotspot for an image only. To bring up the 2nd and 3rd hotspots, repeat the steps for Product 2 and Product 3 setting groups. STEP 4: (Optional) Change the hotspots’s colors: The default color of the image hotspots is white. To change it, you need to: Click on the Highlight product set section to open its setting panel. Scroll down to the Colors setting group. Adjust the Hotspot (light) and Hotspot (dark). STEP 5: Click “Save” when done. 🤔 How to adjust the information shown on each Product item? When hovering on an image hotspot, you will see a small card that has the Product information, it is called a Product item. You can choose to show the product’s vendor and product rating STEP 1: Navigate to the setting group: Click on the Highlighted product set section to open its settings panel, then scroll down to the Product items setting group. STEP 2: Choose what to show: You can turn on/off the corresponding toggle to show or hide the information: Show vendor Show product rating STEP 3: Click “Save” when done. 🤔 What customization options can you give your Map? For the whole Highlighted Product Set section ✨ Change color scheme: Click on the Highlighted product set 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 Highlighted product set section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Highlighted product set section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Highlighted product set 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 Highlighted product set 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 Map? The Map allows you to display a location map on your Shopify store. It is ideal for showcasing a physical store's location, offering directions to customers, or highlighting multiple business addresses. 2. Section Components Section Showing the location of the store with a map for the online store. Available blocks Displays the name of the store for easy identification on the map. Showcases the store's address and operating hours. Adds a button linking to the Google Map address. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for Map Click on it to add. 4. Highlight features Integrated Info Display: Show essential details like contact information or working hours. Actionable Button: Allow users to click and get directions or access other features. Mobile-Friendly Design: Ensure your map is responsive and accessible on any device. Customizable Labels: Adjust the text for your button and information fields. 5. Common Use Cases 🤔 How to set up the Map section? Don’t know where to start with your Map section? Start with this: STEP 1: Add & set up the Map section: Add a Map section to the store, then: Enter a valid address in the Store address field for Google Maps to recognize. Adjust the Desktop height and the Mobile height of the section. STEP 2: Add & set up the blocks: By default, you will have 3 Store name, Address and hour, and Button blocks when you add the Map section. You cannot add more, but can delete some blocks that you don’t need. Click on each block to change its specific setting. STEP 3: Click “Save” when done. 🤔 How to show a custom image instead of the map? If you wish to show another image of the location instead of the plain and simple map from Google, just do this: STEP 1: Add the Map section: Add a Map section to the store. STEP 2: Set up the location: Click on the Map section to open its setting panel, then: Enter a valid address in the Store address field for Google Maps to recognize. Adjust the Desktop height and the Mobile height of the section. STEP 3: Add a custom image as the background: In the Map section setting panel, find the Image setting and click “Select” to assign an image. STEP 4: Click “Save” when done. 🤔 What customization options can you give your Map? For the whole Map section ✨ Change color scheme: Click on the Map section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the content position: Click on the Map section, find and choose the Content position to be Left, Right, or Center. ✨ Change the content alignment: Click on the Map section, find and choose the Content alignment to be Left, Right, or Layered. ✨ Change the section width, add padding, or add a divider Click on the Map 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.
