Maximize - Sections & Blocks
Maximize - Sections & Blocks
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. Used to add a slide with an image, text, and a clickable overlay for added engagement. 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 the Simple slide block? 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, click “Add block” and choose Simple slide. STEP 2: Assign an image to the slide:Click on the Simple slide 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. In the Image link, choose a link for navigation when clicked. Adjust the Overlay opacity from 0–100%. STEP 3: Add the content to the slide: Click on the Simple slide block, under Content group, and: Enter text into Subheading, Heading, and Text. Add buttons: label, link, and style. Choose the Content position. Adjust the Content alignment. STEP 4: Click “Save” when done. 🤔 How to set up the Image Overlay Slide block? Want to add a slide that has the overlay photos or products like the image below to your Hero slideshow? Here's how: STEP 1: Add the block to the sectionUnder the Hero slideshow section, click “Add block” and choose Image overlay slide. STEP 2: Assign the main image to the slide:Click on the Simple slide block, under Banner media group, you can: In Image, click “Select” and upload your image. (Optional) Upload a different image for mobile in Mobile image. In the Image link, choose a link for navigation when clicked. Adjust the Overlay opacity from 0–100%. STEP 3: Add the content to the slide: Click on the Simple slide block, under the Content group, and: Enter text into Subheading, Heading, and Text. Add buttons: label, link, and style. Choose the Content position. Adjust the Content alignment. STEP 4: Add the overlay groups:You can add up to 2 overlay groups above the main image. These groups can link to a product or show an image, depending on your need, let’s change these settings: If you want to… You need to… Show the products for the overlay… Find the First product or Second product settings, and choose the product you want to show. Turn on Show product rating to display stars (optional). Show the images & text for the overlay… Find the First alternative image or Second alternative image. Add the Image link. Adjust the Overlay opacity. Enter Subheading, Heading. Adjust the Overlay content alignment. STEP 5: Click “Save” when done. 🤔 What other customization options can you give your Product Components? 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 setting 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 setting group, find and choose the Transition effect to be Slide, Fade, and Zoom in. ✨ Change the height of images Click on the Hero Slideshow section, and: For desktop 🖥️: Scroll down to Desktop layout, and choose your preferred image height in Desktop image height For mobile 📱: Scroll down to Mobile layout, and choose your preferred image height in Mobile image height. ✨ 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 setup can you do in Social media? The Social media settings let you link your store to your social media accounts and provide contact information (email and phone). These links are displayed in various parts of your store, such as the footer or header, depending on your theme’s layout. 2. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Click the Theme Settings tab. Go to Social media. 3. Common Use Cases 🤔 How to add your social media links? STEP 1:Navigate to Social Media in the Theme Settings. STEP 2:Enter the full URL for each social platform you want to link.Example: For Instagram, enter https://www.instagram.com/yourhandle. STEP 3:Click “Save” when done. 💡 Pro Tip: Only fill in the platforms you actively use to avoid broken links. 🤔 How to update your email and phone number? STEP 1:Navigate to Social Media in the Theme Settings. STEP 2:Locate the fields for Email Address and Phone Number. STEP 3:Click “Save” when done. 4. Common Questions Q: What happens if I don’t add a link for some platforms?A: Only the platforms you link will display on your store. Empty fields won’t generate icons or links. Q: Can I customize the icons?A: Icon appearance depends on your theme’s design. Contact support for advanced customizations. Q: Can I add additional social platforms not listed here?A: This feature supports the platforms listed above. Custom links can be added using custom HTML or via theme modifications. 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. 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.
Maximize - Sections & Blocks
1. What is the Blog Posts Section? The Blog Posts Section is a dedicated area on your website where multiple blog posts are displayed together. This section typically showcases the most recent or most relevant blog posts, allowing visitors to easily browse and access the content. 2. Section Components Section A display area for a selection of blog posts. 3. Location & Setup Go to “Online Store” > “Themes” > “Customize”. Select where you want to place it Click "Add Section". Search for Blog posts. Click on it to add. 4. Core Features Carousel Support: Enable a swipeable carousel for desktop and mobile devices. Customizable Display: Show or hide details like author, date, tags, and featured images. Table of Contents: Add a table for better navigation within blog posts. SEO Enhancements: Customize headings to improve visibility in search engines. 5. Common Use Cases 🤔 How to change the blog posts shown? By default, the Blog posts section is connected with a Blog in your Shopify admin. If you want to change it, you can: STEP 1: Click on the Blog posts section to open its settings panel. STEP 2: Scroll down to the Blog setting, then tap to change. STEP 3: Click “Save” when done. 🤔 How to customize the information shown for Each Blog Post? Need to tailor the details shown for each blog post? Here’s how: STEP 1: Click on the Blog posts section to open its settings panel. STEP 2: Depending on what you want to show/hide, make changes to the corresponding setting under the Blog items group: Show featured image: Turn on to show the cover image of the blog posts. Image ratio: Choose the featured image’s aspect ratio. Enable or disable options like author, blog, date, excerpt, tags and lines, and comment count. Show button read now: Turn on to show a button for the customer to read more, change its content in the Button read now label. STEP 3: Click “Save” when done. 🤔 How to set up a Carousel for Blog Posts? Want to showcase blog posts in a dynamic carousel? Follow these steps: STEP 1: Click on the Blog posts section to open its settings panel. STEP 2: Scroll down to the Carousel setting group, and: 🖥️ For desktop: Turn on the Enable carousel on desktop setting. 📱 For mobile: Turn on the Enable swipe on mobile to allow users to swipe through posts. STEP 3: (Optional) If you want the carousel to slide automatically, then: Turn on Enable auto-play. Adjust the speed in Change slides every setting. STEP 4: Click “Save” when done. 🤔 What customization options can you give your Blog Posts? For the whole Blog Posts section: ✨ Change the heading size: Click on the Blog Posts section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Blog Posts section, and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Blog Posts section, and choose the Heading alignment to be Left, Right, or Center. ✨ Adjust the number of blog posts shown Click on the Blog Posts section, and adjust the number of Blog posts shown (from 2-8). ✨ Adjust the number of columns shown on desktop Click on the Blog Posts section, and adjust the Number of columns on desktop (from 1-4). ✨ Add a “Show more” button Click on the Blog Posts section, and turn on the Show “Show more” button toggle. This doesn’t work when Carousel is enabled. ✨ Add a “View all” button Click on the Blog Posts section, and turn on the Show "View all" button toggle. Change its position in the "View all" button position setting. ✨ Change the section width, add padding, or add a divider Click on the Blog Posts 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 Product specifications? The Product Specifications section allows you to showcase detailed technical information about your products in an organized table format. It's ideal for providing clarity on product materials, dimensions, features, and more. 2. Section Components Section Present a section featuring one or more tables that detail the product's information and specifications. Available block Used to add a table to the section. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Click on the Homepage dropdown menu > Product > Default template. Click "Add Section" Search for Product specifications Click on it to add. 4. Highlight features Customizable specification tables: Add and edit multiple technical and feature groups. Flexible layout: Adjust heading size, alignment, and include custom images. Structured presentation: Present detailed product features in a professional, easy-to-read table format. 5. Common Use Cases 🤔 How to add & set up the content for a table of specifications? Want to add information and adjust the layout of a specification table? Here's how: STEP 1: Add a Product specifications section: This section can only be used on the Product page. So, follow the steps in 3. Location & Setup to add this section. STEP 2: Set up the product metafields: To add values to the table, you must work on the product metafield first, do these: Create your Product metafields by following the steps in How to create Product metafields. Make sure when you Select type, choose one of these types: Option 1: Single line text (one value or list of values) Option 2: Multi-line text. Option 3: Rich text. In Shopify admin, click on Products > choose a product > go to Product metafields > enter the value > “Save”. (Repeat this step for other products). STEP 3: Enter the details for a table in Theme Editor. Go back to your Theme Editor (Online stores > Themes > Customization) By default, your Product specifications section includes 2 Specification blocks. You can delete, hide, or add more blocks as needed. Click on a Specification block to open its settings panel, then: Scroll down to the Specification detail group. Enter to the List of specifications in this format: Label:metafield_key Label is your custom text. Metafield_key is the Namespace and key of your product metafield. Add a new line to add a row to the table. STEP 4: Enter the heading and description for a table: After filling in the table’s details, enter other content into these fields: Heading: Give your table a title, such as “Ingredients”. Text: Add some extra description, leave blank if you don’t need it. STEP 5: Click “Save” when done. 🤔 How to make the table collapsible? Want to let customers easily expand or collapse the table in the Product Specifications section? Here's how: STEP 1: Under the Product Specifications section, tap on the Specification block to open its settings panel. STEP 2: Turn on the Show in tab toggle. STEP 3: (Optional) If you want to make the tab expand by default, turn on Open this tab by default. STEP 4: Click “Save” when done. 🤔 How to add an image to the specification table? Want to make your table of specifications more engaging with an image? Here's how to add & edit the image layout: STEP 1: Add an image Under the Product Specifications section, tap on the Specification block to open its settings panel, then find the Image setting, and click “Select” to add an image. STEP 2: Adjust the image height & position Click on the Product Specifications section to open its settings panel, then: Go to Desktop layout 🖥️: Change the Desktop image height and Desktop image position. Go to Mobile layout 📱: Change the Mobile image height and Mobile image position. STEP 3: Click “Save” when done. 🤔 What customization options can you give your Product specifications? For the whole Product specifications section ✨ Change color scheme: Click on the Product specifications 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 specifications section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes): Click on the Product specifications section, find and choose the Heading tag from the list. ✨ Change the number of columns on desktop: Click on the Product specifications section, find Desktop layout and choose the Number of columns on desktop (1 or 2). ✨Add a border to the logo Click on the Product specifications section, find and turn on the toggle Show logo border. ✨ Change the section width, add padding, or add a divider Click on the Product specifications section, and scroll down to the Section layout group, and you will be able to change those settings. For a single Specification block: ✨ Change the text to appear when there is no value By default, a “-” will be shown when there is no value in your product metafield. If you want to change it, click on Specification block, then change the Text to use for empty fields. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is Collection list? The Collection list section allows you to showcase multiple collections in an organized layout. This is perfect for guiding customers to different product categories right from your homepage or landing page. 2. Section Components Section Displays a customizable grid of collections and promotional banners. Available blocks Showcases an individual collection with its featured image and name. Highlights a special promotion or announcement with an image and text. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for the Collection list. Click on it to add. 4. Highlight features Flexible looks: Display collections in a flexible grid layout. Promotional banners: Add promotional blocks to highlight sales or special offers. 5. Common Use Cases 🤔 How to show the list of collections? Want to have an area to show your specific store collections? The Collection list section is your go-to! Here's how to set it up: STEP 1: Add the Collection list section: Add the Collection list section to your page. ⚠️ Note: By default, the section displays all collections. To feature specific collections, add blocks as guided in Step 2. STEP 2: Use Collection blocks to choose what collections to show: Click “Add block” > Collection Click “Select” the desired collection STEP 3: Customize the look of the whole section: Tap on the Collection list section to open its setting panel, and you can adjust how many collections to show in a row: For desktop 🖥️: Find Desktop layout > adjust the Number of columns (from 1-12). For mobile 📱: Find Mobile layout > adjust the Number of columns (from 1-4). STEP 4: Click “Save” when done. 🤔 How to Add a Promotional Image in the Collection List? Want to highlight sales, featured collections, or seasonal campaigns? Here's how: STEP 1: Add the Collection list section: Add the Collection list section to your page. STEP 2: Add & set up a Promotion Block. Click “Add block” > Promotion block. Add a Heading and Content. Upload a background image or video and adjust the Image overlay opacity. Choose an icon from the list to show it (optional). Add a button label and link (optional). STEP 3: Click “Save” when done. 🤔 How to show customized collection images with metafield? Want to display unique, high-resolution images for collections without altering their featured images? Here’s how: STEP 1: Create a Collection Metafield. Go to Settings > Custom Data > Collection > Add Definition. Name your metafield, select File as the type, choose One file, and click Save. STEP 2: Assign a Value to the Metafield. Go to Products > Collection, select a collection, and scroll to Metafields. Upload an image for the metafield and click Save. STEP 3: Set it Up in the Theme Editor. In Theme Editor, open the Collection list section. Scroll to Auto-fill collection images with metafield. Copy the metafield's key after “custom.” and paste it into the field. STEP 4: Click “Save” when done. 🤔 How to Enable Carousel for the Collection List? Want to create a scrolling collection display for better navigation? Here's how: STEP 1: Open the Collection list section setting: In Theme Editor, click on the Collection List section. STEP 2: Enable carousel: Find the Carousel setting group, then: For desktop 🖥️: Turn on Enable carousel on desktop. For mobile 📱: Turn on Enable swipe on mobile. STEP 3: Click “Save” when done. 🤔 What other customization options can you give your Collection list? For the whole Collection list section ✨ Change color scheme: Click on the Collection list section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨Change the image ratio of the Collection cards: Click on the Collection list section, and find the Collection card setting group. You can choose the ratio using the Image style setting. ✨ Change the title size of the section: Click on the Collection list section, and find the Collection card setting group. You can choose the Title size to be Small, Medium, or Large. ✨ Make the text appear on top of the collection image: Click on the Collection list section, and find the Collection card setting group. You can: Turn on the Enable text overlay setting. (this will activate overlay on both Collection cards and Promotion images). Adjust the Overlay opacity. ✨ Change the content alignment: Click on the Collection list section, and find the Collection card setting group. You can change the Content alignment of the whole card. ✨ Change the section width, add padding, or add a divider Click on the Collection list 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 Page? The Page section allows you to easily insert the entire content of one existing page directly into another page's template. This is particularly convenient when you have content that needs to be reused across multiple pages. ⚠️ Note: The existing page is the page set up in Shopify admin > Online stores > Pages. For example: You want to show the content of the policy page on the product page. 2. Section Components Section Display the content of one existing page directly into another page. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for Page Click on it to add. 4. Highlight features Time-saving: Instead of manually copying and pasting content, you can simply insert the desired page. Consistency: Ensures that the same content appears identically on all pages where it's used. Real-time Updates: You only need to make changes to the original page for it to update on all pages where it’s inserted automatically. 5. Common Use Cases 🤔 How to set up the Page section? Want to add the content of an existing page (e.g., a "Shipping Policy" page) to another page template in a few simple steps? Here's how: STEP 1: Set up the Pages in the Shopify admin Go to Online Store > Pages in Shopify and ensure the page you want to display is created by: Click on “Add page”. Add Title and Content. Change the Visibility to “Visible”. Choose your page Template. STEP 2: Add the Page section In Theme Editor ( “Online Store” > “Themes” > “Customize”), choose the page template where you want to include the content. Then, add the Page section at your preferred position. STEP 3: Assign the page to the Page section Click on the Page section to open its settings panels, then tap on “Select page”, and choose the page you’ve created before. STEP 4: Click “Save” when done. 🤔 What customization options can you give your Page? For the whole Page section ✨ Change the heading size: Click on the Page section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Page section, find and choose the Heading tag from the list. ⚠️ Note: Avoid using the H1 tag for page headings as it may affect SEO ranking. ✨ Change the section width, add padding, or add a divider Click on the 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 Tabs? The Tabs section allows you to organize and display information in a structured, tabbed format. Each tab can showcase a unique type of content, such as highlights, descriptions, tables, or media with text, providing a clean and user-friendly way to present product details. 2. Section Components Section Display content in multiple tabs for better navigation Available blocks Used to show content in Text columns with icons format. Used to show the product description (if placed on the product page) or manually inputted text. Used to show content in table format. Used to show content in a media combining with text format. Use to show content in formatted text, allowing custom styles and layouts. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Select where you want to place it Click "Add Section" Search for Tabs. Click on it to add. 4. Highlight features Flexible Content: Add unlimited tabs to display diverse types of information. Customizable Blocks: Mix and match content types like highlights, tables, and media. Interactive Layout: Engage customers with clickable tabs for quick navigation. Mobile-Friendly: Optimized for seamless viewing on any device. 5. Common Use Cases 🤔 How to add a tab that shows content in Text columns with icons format? The Tabs section has a Highlight tab block that can help you show your content in a tab that has multiple columns, highlighting key points using icons and short text. Here are more detailed guidance: STEP 1: Add a Highlight tab block to the section: After adding a Tabs section, click on “Add block”, and choose the Highlight tab block. STEP 2: Set up each Icon setting group: Click on the Highlight tab to open its settings panel. Navigate to the Icon 1 setting group. Choose the Icon from the list, or choose None if you don’t want any. Upload a Custom icon image if needed, this will disable your picked Icon above. Enter the Heading and Text. ⚠️ Note: The Highlight Tab block lets you display up to 4 columns, each with an icon and text. To show all 4 columns, fill in the settings for Icon 2, Icon 3, and Icon 4. If you need less than 4, just leave the Heading and Text of an Icon setting group blank. STEP 3: Customize the whole block look: After setting up each Icon group, you can: Enter the Tab title. Adjust the Heading size, Heading tag, and Content alignment. Adjust the Icon size. Adjust the Colors of the icon. STEP 4: Click “Save” when done. 🤔 How to add a tab that automatically shows the Product description? The Tabs section has a Description tab block that can help you show the Product description automatically based on that specific product if you are on the Product page. To set it up, do these: STEP 1: Add a Description tab block to the section: After adding a Tabs section, click on “Add block”, and choose the Description tab block. STEP 2: Turn on the Show product description toggle: In the Description tab block’s setting panel, turn on the Show product description toggle. This text will change dynamically based on the product. STEP 3: Add custom text In the Description tab block’s setting panel, enter more information if needed into the Text field. This text will remain unchanged across different products. STEP 4: Change how much content will be shown In the Description tab block’s setting panel, find the Default content height setting. By default, it will show full content. Choosing a different option will make the “Read more” or “See less” button appear. STEP 5: Set the tab title: In the Description tab block’s setting panel, fill in the Tab title field (e.g., "General Details" or "Specifications"). STEP 6: Click “Save” when done. 🤔 How to add a tab that shows content in table format? The Tabs section has a Table tab block that can help you show your content in a tabular format. Here are more detailed guidance: STEP 1: Add a Table tab block to the section: After adding a Tabs section, click on “Add block”, and choose the Table tab block. STEP 2: Add the table content: In the Table tab block’s setting panel, add content to the Table detail field in this format: Use a colon (:) to separate columns. For example: Table detail Result Material: High-quality for durability…. Dimensions: Standard sizes vary by product Use a hyphen (-) to indent rows under a category. For example: Table detail Result Performance: Designed for extreme conditions.- Capacity: Adjustable capacity.- Warranty: Backed by a 1-year …. To start a new row, press Shift + Enter to add a line break. STEP 3: Set the tab title: In the Table tab block’s setting panel, fill in the Tab title field (e.g., "General Details" or "Specifications"). STEP 4: (Optional) Right-Align Values: Toggle Right-align values if you prefer the text in the second column to align to the right for a cleaner look. STEP 5: Click “Save” when done. 🤔 How to add a tab that shows content in media & text format? The Tabs section has a Media with text tab block that can help you show your content in a format that has both media (image or video) and text. Here are more detailed guidance: STEP 1: Add a Media with text tab block to the section: After adding a Tabs section, click on “Add block”, and choose the Media with text tab block. STEP 2: Add the content: In the Media with text tab block’s setting panel, navigate to the Tab content group, and you can choose 1 option below: Option 1: Use content from an existing page by using Content from page. Option 2: Otherwise, enter your content into Subheading, Heading, Text, and Button label fields. STEP 3: Add the media: In the Media with text tab block’s setting panel, navigate to the Tab media group, and you can: Option 1: Add an Image. If you have a specific image for mobile 📱, upload it to Mobile image. Option 2: Add a Video or Embed video from url (Youtube or Vimeo). If you do both option, the Video will have your Image as the cover. STEP 4: Set the tab title In the Media with text tab block’s setting panel, fill in the Tab title field (e.g., "General Details" or "Specifications"). STEP 5: Click “Save” when done. 🤔 How to add a tab that shows content in rich text format? The Tabs section has a Rich text tab block that can help you show your content in a format that has both media (image or video) and text. Here are more detailed guidance: STEP 1: Add a Rich text tab block to the section: After adding a Tabs section, click on “Add block”, and choose the Rich text tab block. STEP 2: Add the content: In the Rich text tab block’s setting panel, enter your information into these fields: Heading, Text, and Button label (optional). STEP 3: Change how much content will be shown In the Rich text tab block’s setting panel, find the Default content height setting. By default, it will show full content. Choosing a different option will make the “Read more” or “See less” button appear. STEP 4: Set the tab title: In the Rich text tab block’s setting panel, fill in the Tab title field (e.g., "General Details" or "Specifications"). STEP 5: Click “Save” when done. 🤔 What customization options can you give your Tabs? For the whole Tabs section ✨ Change color scheme: Click on the Tabs section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the Tab style: Click on the Tabs section, and choose the Tab style to be Collapsible or Horizontal ✨ Change the section width, add padding, or add a divider Click on the Tabs section, and scroll down to the Section layout group, and you will be able to change those settings. For a single Description tab block: ✨ Show all or a part of the content To adjust the height of the block's content, click on it, go to the Content section, and choose the desired height. Selecting a height other than Show full content will display a "Read more" button. ✨ Change the content alignment Click on the Description tab block, then choose the Content alignment to be Left, Center, or Right. For a single Media with text tab block: ✨ Adjust the height & position of the media: Click on the Media with text tab block, scroll all the way to the bottom, and you can: For desktop 🖥️: Choose the Desktop image height and Desktop media position. For mobile 📱: Choose the Mobile image height and Mobile media position. ✨ Make the video autoplay: If you use a video for your media, you can click on the Media with text tab block, and toggle on the Enable video autoplay setting. For a single Rich text tab block: ✨ Change the button style Click on the Rich text tab block, then in the Button style setting, select to make it follow Primary or Secondary style. ✨ Change the content alignment Click on the Rich text tab block, find and choose the Content alignment to be Left, Right, or Center. Need help? Contact our support team at Omni Themes Support.
Maximize - Sections & Blocks
1. What is the Contact Form? The Contact Form section is a simple way for visitors to get in touch with your store. It collects messages or inquiries, reducing spam and providing a structured way to communicate. 2. Section Components Section A form for customers to fill out and send inquiries. Available blocks Input for visitor’s name. Required input for visitor’s email address. Optional input for a contact number. A text area for the visitor’s message. Custom input fields (Text, Dropdown, Radio Button, Checkbox). 3. Location & Setup Go to "Online Store" > "Themes" > "Customize" Select where you want to place it Click "Add Section" Search for Contact Form Click on it to add. 4. Core Features Custom fields: Add or modify fields like name, email, phone, and more. Email notification: Form submissions go directly to your store’s sender email. Content options: Show additional content like images or contact details. Custom success messages: Display a personalized message after form submission. 5. Common Use Cases 🤔 How to set up the contact form? Want to create a user-friendly contact form for your customers? Here's how: STEP 1: Add the section & blocks. Add a Contact form section. By default, you have a Name, Email, Phone number, and Message block. Click "Add block" to add the Form item block or delete the unused ones. STEP 2: Configure the form details Enter section Heading and adjust size Select heading tag for SEO Add descriptive subheading (optional) Choose form submit button label STEP 3: Customize form fields Click on each block to edit its look. For more information, you can check out the part talking about What customization options can you give your Contact form? STEP 4: Display additional content (Optional) Besides the contact form, you can: Show an image for visual interest (Option name: Image) Include store contact information (Option name: Contact information) Or both! (Option name: Both) Just go to the Contact form section, scroll down to Show additional content and choose the option you want. STEP 5: Click “Save” when done. 🤔 How to display store contact information? Want to make it easy for customers to reach you? Here's how: STEP 1: Click on the Contact form section to open its setting, and find Show additional content. STEP 2: Choose Contact Information from the dropdown list. STEP 3: Scroll down to the Contact information setting group, and fill out your store’s details like address, phone number, and business hours. STEP 4: Click “Save” when done. 🤔 How to show an image beside the contact form: Want to draw customers’ attention with an engaging visual for your contact form? Here's how: STEP 1: Click on the Contact form section to open its setting, and find Show additional content. STEP 2: Choose Image from the dropdown list. STEP 3: Scroll down to the Image setting group, add your image, and change its height on both desktop and mobile as you want. STEP 4: Click “Save” when done. 🤔 How to show an image & contact information beside the contact form: If you want to show both image and contact information instead just a simple contact form, follow this: STEP 1: Click on the Contact form section to open its setting, and find Show additional content. STEP 2: Choose Both from the dropdown list. STEP 3: In the Image setting group, add your image and change its height on both desktop and mobile as you want. In the Contact information setting group, fill out your store’s details like address, phone number, and business hours. STEP 4: Click “Save” when done. 🤔 How to Add Custom Fields to the Form? Need to collect specific information different from the default boxes? Here’s how to add the custom block: STEP 1: Click on “Add block” and choose the Form Item block. STEP 2: Enter the field label, select the input type (Text, Dropdown, Radio, Checkbox), and add options if needed. STEP 3: Mark the field as Required if needed. STEP 4: Click “Save” when done. 🤔 What customization options can you give your Contact Form? For the whole Contact Form section ✨ Change color scheme: Click on the Contact Form 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 Contact Form section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Contact Form section, and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Contact Form section, and choose the Heading alignment to be Left, Right, or Center. ✨ Change the Success message content Click on the Contact Form section, and type into Success message box the message you want to show when customers successfully submit the form. ✨ Change the form alignment Click on the Contact Form section, and choose the Form alignment to be Left or Right. ✨ Change the section width, add padding, or add a divider Click on the Contact Form 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.
