OT: Theme Sections - Sections

OT: Theme Sections - Sections

Single Product Landing Page - Christmas

Single Product Landing Page - Christmas template is designed to spotlight one hero product with a festive, high-impact layout. Perfect for seasonal campaigns, giftable items, and limited-edition holiday releases, this template combines warm Christmas visuals with conversion-focused sections. 1. Template Components Template Single Product Landing Page - Christmas Available  sections OT: Promo Banner #4 Display promotional content with multiple images, text, and interactive elements. OT: Scrolling promo #2 Create a moving banner that displays various promotional elements with customizable styling and animation effects. OT: Features #1 Highlight your product’s key features in a clean, modern layout. OT: Video gallery #1 Display videos in an engaging layout. OT: Featured product #3 Display a key product on the page. OT: Multi Columns with Images #3 Divide a section into multiple columns, each showcasing images and content. OT: Testimonials #7 Display testimonials given by customers of a product or service. OT: Promo banner #4 Display promotional content with multiple images, text, and interactive elements. 2. Location & Setup  To add & set up the Single Product Landing Page - Christmas template: Open the Shopify Theme Editor (Online store > Themes > Customize) Click on the Homepage dropdown menu. Search for otsb-xmas-single-product-landing-page. Click on it to navigate. From here, you can customize the page template as you want. 3. Highlight Features High-impact promotional elements: Includes Promo banners and Scrolling promo sections to highlight discounts, bundles, or holiday offers. Clear feature presentation: The Features section helps you showcase key benefits with clean visuals, icons, and concise descriptions. Engaging media support: Add product videos through the Video gallery to increase trust and demonstrate real usage. Persuasive product showcase: The Featured product section displays your item with pricing, variants, and an Add to cart button for fast conversion. 4. Common Use Cases 🤔 How to set up the page sections? The Single Product Landing Page - Christmas template is built with a set of stylish sections from OT: Theme Sections. You can find the layouts and setup guides in Section 5. Section Recommendations. 5. Section Recommendations  TheSingle Product Landing Page - Christmas template is built using a group of appealing sections from OT: Theme Sections app. Find out the sections & how to set up them here! 📂 OT: Promo Banner #4 Check out the setup guide here. 📂 OT: Scrolling promo #2 Check out the setup guide here. 📂 OT: Features #1 Check out the setup guide here. 📂 OT: Video gallery #1 Check out the setup guide here. 📂 OT: Featured product #3 Check out the setup guide here. 📂 OT: Multi Columns with Images #3 Check out the setup guide here. 📂 OT: Testimonials #7 Check out the setup guide here. 📂 OT: Promo banner #4 Check out the setup guide here. 6. Support Information Need help? Contact our support team at  Omni Themes Support .

OT: Theme Sections - Sections

Features #1

The Features section is designed to highlight your product’s key advantages in a clean, modern layout. With visually appealing icons, concise titles, and short descriptions, it guides customers to understand your value points at a glance. 1. Section Components Section Features Highlight your product’s key features in a clean, modern layout. Available block Feature Display a single feature with icon and text. 2. Location & Setup To add & set up the Features section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add section”. Select “OT: Features (#number of variant)”. 3. Highlight Features Customizable feature blocks: Add multiple Feature blocks, each with its own icon, heading, and description to highlight individual selling points. Flexible icon options: Choose from pre-set icons, custom icon names, your own SVG code, or uploaded icon images. Full styling control: Adjust icon size, text size, alignment, spacing, and colors to match your brand’s look and feel. 4. Common Use Cases 🤔 How to set up the Features section? Here's how to set up the section: STEP 1: Add the Features section to your desired location STEP 2: Add the main image Click on the Features section to open its settings panel: At Image settings group, upload an Image and adjust its position/ratio/corner radio. STEP 3: Set up blocks Under Features section, add Feature blocks and open their settings panel to customize: (Optional) Add Icon, using one of the 4 ways: Drop-down icon list Choose one icon in the Icon drop-down list. Use another icon In the Icon drop-down list, choose Another icon. Paste the icon name from icon list into Use another icon. Custom icon Paste your own SVG code to use as Custom icon. Upload icon Upload Custom icon image. Enter Heading and Text content. STEP 3: Customize the Features section header Back to the Features section to open its settings panel: Enter Heading and Description. Adjust their size and alignment STEP 4: Click “Save” when done. 🤔 How to adjust Features section look? STEP 1: Click on the Features section to open its settings panel.  STEP 2: Customize feature elements' size, alignment and corner At Features settings group, you have options to: Set Icon size, Icon thickness, or icon background. Adjust Column text size, Column content alignment, Column corner radius. STEP 3: Customize section layout At Desktop layout/Mobile layout settings group, you can: Adjust section margin and padding. Adjust section width, content width, or gap between text and image. STEP4: Customize section color At Colors settings group, choose colors for section elements such as background, heading, text... STEP 5: Click “Save” when done. 5. Layout Recommendations The Features section has 1 appealing layout available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Features #1 Check out demo here. 6. Support Information Need help? Contact our support team at  Omni Themes Support .  

OT: Theme Sections - Sections

Press #1

The Press section showcases media mentions and brand features, helping merchants build credibility and trust with shoppers. 1. Section Components Section Press Showcase media mentions and brand features. Available block Press  Add a single press content (with text and image) to the section.  2. Location & Setup To add & set up the Press section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add section”. Select “OT: Press (#number of variant)”. 3. Highlight Features Carousel support: Enable auto-play and adjust slide timing to display press mentions in a dynamic, interactive format. Full layout control: Modify section width, padding, and dividers to ensure the section fits seamlessly into your store design. 4. Common Use Cases 🤔 How to set up the Press section? Here's how to set up the section: STEP 1: Add the Press section to your desired location STEP 2: Add & set up Press blocks Under Press section, add Press blocks and open their settings panel: In Text, enter the quote or press statement you want to highlight. Add an Image to accompany the text (e.g., press logos, badges). STEP 3: Customize the section Click on the Press section to open its settings panel: Add Heading to the section. Adjust its tag, highlight effect and size. At Press settings group, choose Text size, Column gap, and image width for the press. At Layout settings group, you can customize section width, padding, and add a section divider. At Colors settings group, choose colors for section elements such as background, heading, text... STEP 4: Click “Save” when done. 🤔 How to enable carousel for the section? STEP 1: Click on the Press section to open its settings panel.  STEP 2: Enable carousel At Carousel settings group: Turn on Enable auto-play. Adjust the time for the section to slide automatically at Change slides every. STEP 3: Click “Save” when done. 5. Layout Recommendations The Press section has 1 appealing layout available. If you want support to set up the layouts, don't hesitate to chat with us!  📂 Press #1 Check out demo here. 6. Support Information Need help? Contact our support team at  Omni Themes Support  .

OT: Theme Sections - Sections

Featured product

The Featured product section, often placed on the homepage, showcases a new or noteworthy item with key details at a glance. It lets customers explore the product and even purchase or add it to their cart directly, streamlining the shopping experience. 1. Section Components Section Featured product Display a key product on the page. Default blocks (More advanced blocks available) Price Show the product price. Description Add the product description. Variant picker Allow customers to select product variants. Quantity selector Let customers choose the quantity to purchase. Buy buttons Add "Add-to-cart" and Buy buttons. 2. Location & Setup To add & set up the Featured product section on your store: Open the Shopify Theme Editor (Online store > Themes > Customize) Navigate to the page where you want to add the section. Click “Add section”. Select “OT: Featured product (#number of variant)”. You can use this section on any page. On product pages, connect a dynamic source to ensure the content updates automatically: Product selector > Connect dynamic source > Product. When connected, the section will function as a product information section, displaying data from the current product. 3. Highlight Features Direct product spotlight: Showcase a single product prominently on the homepage to grab customer attention. Quick purchase options: Customers can view details, select variants, and add to cart or buy instantly without leaving the section. Customizable layout with rich blocks: Adjust product title size, heading tag, media layout, image ratio, and button styles to match your brand. 4. Common Use Cases 🤔 How to set up the Featured product section? Here's how to set up the section: STEP 1: Add the Features section to your desired location STEP 2: Set up the section Click on the Featured product section to open its settings panel: Choose the Product you want to feature. Adjust product Title size and Heading tag. Under the Media setting group, configure how media is displayed: Choose Desktop layout and Image ratio. STEP 3: Click “Save” when done. 🤔 How to set up Featured product blocks? Under Featured product section, each block represents different information of the product (for example: Price, Description…). There are 5 default blocks to adjust the basics of the section. If you want to add more information to the product, add the advanced blocks for further setup: 👉 Set up default blocks Click on the block to open its settings panel. Block Settings Product title Adjust Title size and color. Choose Heading tag. Price Adjust the Text size of the price. Show tax status and shipping policy if you wish. Description Choose the Icon to show on the description, or adjust its content height. Variant picker Choose how product variants are displayed (Dropdown or Button) or enable color swatches. Quantity selector - Buy buttons Choose the Button style: Primary or Secondary Enable “Show dynamic checkout buttons” toggle to display the "Buy it now" button and any other dynamic checkout buttons provided by payment methods like PayPal or Apple Pay.  Enable “Show add to cart” toggle to display the button. Choose Button colors. 👉 Advanced blocks The Featured product section also supports various blocks to showcase product information. You can add any blocks you want:  Block Purpose Vendor name Show product vendor name. Inventory status Display the inventory status of products or variants. Collapsible tab Create collapsible tabs for additional content in the description section. Social sharing Display social sharing icons. Text Add custom text to provide extra details about the product. Size chart Display a visual or textual guide that helps customers determine the appropriate size . Estimated delivery time Display the estimated shipping date of the product Separator Add a separator line helps to distinguish between different sections of the product information. HTML Add custom content in HTML format. Product rating Display ratings to enhance trust and credibility for your products Trust badge Display symbols or images to enhance credibility such as  payment method logos or quality certifications. View product details Display "View full details" button. Back to stock alert Allow customers to subscribe to notifications when a product becomes available again after being out of stock.  Customizable options Allow customers to personalize products without affecting inventory tracking or product pricing. Text with icon Display text with custom icon images, ideal for long text. Featured icon List key features using short phrases and icons. Frequently bought  Suggest related products to your customers. SKU - 5. Layout Recommendations The Featured product section has 3 appealing layout available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Featured product #1 Check out demo here. 📂 Featured product #2 Check out demo here. 📂 Featured product #3 Check out demo here. 6. Support Information If you encounter any issues during the setup process, don’t hesitate to access Omni Themes Support or email us at otsection@omnithemes.com . Our team is always happy to help.

OT: Theme Sections - Sections

Age verification popup

The Age verification popup section provides a dedicated solution for websites with age-restricted products or content, ensuring compliance with legal requirements. This popup prompts users to confirm their age before accessing certain areas of your website, helping maintain regulatory compliance and responsible marketing practices. 1. Section Components Section OT: Age verification Displays age verification requirements for restricted content and products. Available block Content Show age verification message, headings, and explanatory text. Buttons Create action buttons for age confirmation or denial. 2. Location & Setup To add & set up the OT: Age verification section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Navigate to the Overlay group (for sitewide display) or Template group (for specific pages) Click "Add Section". Select "OT: Age verification". 3. Highlight Features  Legal Compliance: Ensures age verification for restricted content. Flexible Placement: Display sitewide or on specific pages only. Custom Styling: Background images, overlay opacity, and color options. Reappearance Control: Set how often dismissed popups return (1-30 days). Responsive Design: Optimized display for both desktop and mobile. 4. Common Use Cases 🤔 How to set up basic age verification quickly? STEP 1: Add OT: Age verification section to Overlay group for sitewide protection. STEP 2: Add Content block and enter verification message into Heading and Text fields. (e.g., "Are you 18 or older?"). If you want further message, fill in Additional info. STEP 3: Add a Buttons block with a decline and an accept button. For example, "Yes, I'm 18+" and "No, I'm under 18" options. STEP 4: Back to the OT: Age verification setting panel, and set "Reappear after" from 1 to 30 days to avoid frequent prompts. STEP 5: (Optional) Add a Background image to cover your website’s content. STEP 6: (Optional) Adjust the Overlay opacity to cover your website’s content. STEP 7: Save and preview. 🤔 How to create age verification for specific product pages? This setup is perfect for you to handle different age restriction requirements for different products. Just with a few steps: STEP 1: In Theme Editor, navigate to the specific product template you want to protect using the drop-down menu on the top bar. STEP 2: Add OT: Age verification section to that template's Template group. STEP 3: Add Content block explaining the age restriction for that product category. STEP 4: Configure Buttons block with appropriate age threshold messaging. STEP 5: Set background image and overlay opacity for visual appeal. STEP 6: Save and preview. 🤔 How to customize the age verification popup's look? Follow these steps to customize your age verification popup's look: STEP 1: Open the settings Click on the OT: Age verification section to open its settings panel. STEP 2: Add background image You can add Background image for desktop and mobile devices separately. Also adjust the background Overlay color and opacity. STEP 3: Add logo image  At Logo settings group, you can upload Logo image to the popup and adjust its size. STEP 4: Add popup side image At Popup side image settings group, you can: Add an Image and choose its position. Adjust its size and edges. STEP 5: Customize other elements of the popup Choose Content alignment. Customize the height of the popup on desktop & mobile. Choose its background color. STEP 6: Save and preview. 5. Layout Recommendations   The Age verification popup section can create appealing layouts. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Age verification popup Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.

OT: Theme Sections - Sections

Navigation bar

A navigation bar is a menu that helps shoppers easily browse your Shopify store by linking to key product categories. It enhances the shopping experience by making it easy for customers to quickly find what they need, which can increase sales and reduce bounce rates.  1. Section Components Section Navigation bar #1 Display a menu that links to key product categories. Available block Navigation link Add a separate navigation link to the navigation bar. 2. Location & Setup To add & set up the Navigation bar section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section. Click "Add Section". Select "OT: Navigation bar #1." 3. Highlight Features  Customizable navigation links: Add multiple links with custom titles and URLs to build a tailored menu. Custom font support: Optionally use a custom font for navigation titles. Mobile-friendly design: Ensures the navigation bar looks clean and functions smoothly across all devices. 4. Common Use Cases 🤔 How to set up the Navigation bar? If you don't know where to start to set up this section, just follow this: STEP 1: Add the OT: Navigation bar #1 section. STEP 2: Set up section blocks  Add Navigation link blocks, then click on it to set up: In the Title field, set the display name for your navigation link. Enter a complete URL to redirect customers to your preferred page. STEP 3: Click "Save" when done. 🤔 How to customize the Navigation bar's look?     To customize the look of the section, do this: STEP 1: Click on the OT: Navigation bar #1 section to open its settings panel. STEP 2: Customize colors At Colors settings group, choose color for section elements such as title, background section, button arrow... STEP 3: Customize navigation title At Navigation title settings group, you can: Enable to Use a custom font. Choose Title size. STEP 4: Customize section look At Section settings group, you can: Adjust content alignment, section width... Adjust padding. STEP 5: Click "Save" when done. 5. Layout Recommendations   The Navigation bar section can create appealing layouts. If you want support to set up the layouts, don't hesitate to chat with us!  📂 OT: Navigation bar #1 Check out demo here. 📂 OT: Navigation bar #1 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Shop the look

The Shop the look section lets you showcase an entire outfit or collection of related items that are styled together for customers to view and purchase. 1. Section Components Section Shop the look Display an entire outfit or collection of related items that are styled together for customers to view and purchase. Available block Product Attach an image hotspot showing product. 2. Location & Setup To add & set up the Shop the look section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section in Template. Click "Add Section". Select "OT: Shop the look (#number of variant)". 3. Highlight Features Shoppable Look Image: Display a styled outfit or collection with clickable hotspots so customers can shop directly from the image. Product Hotspots (Up to 5): Add up to five product hotspots on a single image—each linked to a real product—to highlight key items in the look. Product Display Customization: Control product image ratio, hover effects, title size, content alignment, and choose whether to show vendor or ratings. 4. Common Use Cases 🤔 How to set up Shop the look section? STEP 1: Add the section Add Shop the look section to your desired position. STEP 2: Add a shoppable image to the section Click on the Shop the look section to open its settings panel. Choose the Image you want to display on desktop/mobile devices.  Choose the image size on desktop devices. STEP 3: Add & customize product hotspot Add a Product block to add a hotspot on the shoppable image. You can add up to 5 blocks (also 5 hotspots on the image). Click on the block to open the settings panel:  Select the Product you want to associate with the hotspot. Choose the hotspot Color. Adjust the hotspot position for desktop and mobile devices. STEP 4: Click "Save" and preview. 🤔 How to customize the look of Shop the look section? STEP 1: Open the section Click on the Shop the look to open its settings panel. STEP 2: Add section content Add Heading & Subheading to the section. Adjust their size and alignment. STEP 3: Customize product display  At Product settings group: Adjust the size of the product title. Choose product Image ratio, effect when hovering the image, product image reveal effect.... Choose Content alignment. Choose colors for the background, product name, and price text. Choose to show product vendor or product rating. STEP 4: Customize Desktop/Mobile layout In the Desktop layout and Mobile layout setting groups: (Optional) Choose to Show section divider. Adjust padding. STEP 5: Choose colors for section elements In Colors settings group, choose colors for section elements such as background, heading, divider... STEP 6: Click "Save" when done. 5. Layout Recommendations The Shop the look section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Shop the look #1 Check out demo here. 📂 Shop the look #2 Check out demo here. 📂 Shop the look #3 Check out demo here. 📂 Shop the look #4 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Sticky Announcement Bar

The Sticky announcement bar section (only able to be added at Header) ensures key information, such as sales or shipping offers, remains constantly visible to visitors, effectively boosting conversions and enhancing the user experience. 1. Section Components Section Sticky announcement bar Display an announcement bar that remains constantly visible on the header. Available block Block Show simple text content with adjustable sizing 2. Location & Setup To add & set up the Sticky announcement bar section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section in Header. Click "Add Section". Select "OT: Sticky Announcement." 3. Highlight Features  Always visible announcement: The announcement bar remains fixed at the header, ensuring important promotions or updates are constantly visible to visitors. Customizable text blocks: Add one or multiple text blocks with adjustable sizing to highlight different messages within the bar. Icon options: Enhance your announcements with icons using four flexible methods: pre-set icons, custom icon names, uploaded SVGs, or image uploads.  4. Common Use Cases 🤔 How to set up the Sticky announcement bar? If you don't know where to start to set up this section, just follow this: STEP 1: Add the OT: Sticky Announcement section to the Header. STEP 2: Set up section blocks  Each block represents a piece of content on the announcement. Click on the Block to set up:  Enter text Content to display on the announcement bar. (Optional) Add Icon, using one of the 4 ways: Drop-down icon list Choose one icon in the Icon drop-down list. Use another icon In the Icon drop-down list, choose Another icon. Paste the icon name from icon list into Use another icon. Custom icon Paste your own SVG code to use as Custom icon. Upload icon Upload icon image. STEP 3: Enable sticky announcement bar Click on the OT: Sticky Announcement section to open its settings panel: Toggle "Enable sticky bar" to ON. STEP 4: Click "Save" when done. 🤔 How to customize the Sticky announcement bar's look?     To customize the look of the section, do this: STEP 1: Click on the OT: Sticky Announcement section to open its settings panel. STEP 2: Enable to Show section borders. Enter Phone number to show on the announcement bar. STEP 3: Scroll down to Size settings groups to adjust Text size on desktop and mobile devices. STEP 4: Scroll down to Colors, Desktop layout and Mobile layout settings groups to adjust: Color for background, icon, text, line and borders... Content width, spacing, and padding of the section. STEP 5: Click "Save" when done. 5. Layout Recommendations   The Sticky announcement bar section can create appealing layouts. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Layout recommendation Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Event calendar

Event calendar section is a dynamic tool to showcase your events, promotions, announcements, and product releases.  1. Section Components Section Event calendar  Showcase your events and announcements on your store. Available block Event Add a single event to the section. 2. Location & Setup To add & set up the Event calendar section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section in Template. Click "Add Section". Select "OT: Event calendar (#number of variant)". 3. Highlight Features Add-to-calendar convenience: Include a button that lets customers save the event to their personal calendars instantly. Event ticketing support: Link an event to a product to sell tickets directly from the section. Flexible visuals: Add a background image and customize headings, colors, edges, and animations to match your branding. 4. Common Use Cases 🤔 How to set up Event calendar section? STEP 1: Add the section Add Event calendar section to your desired position. STEP 2: Add & customize the blocks Under Event calendar section, add Event blocks and open its settings panel to set up: Upload a Background image to the section. Enter event content, including: Event name, Summary and Detailed description. Enter event Location. Enter the label for the button (that lets users easily add the event to their personal calendars). Choose Start date/End date for the event. Repeat STEP 2 for setting up other Event blocks. STEP 3: Adjust event timing Click on Event calendar section to open its settings panel. Then choose the Timezone and Time format. STEP 4: Click "Save" and preview. 🤔 How to customize the look of Event calendar section? STEP 1: Open the section Click on the Event calendar to open its settings panel. STEP 2: Add section content Add Heading & Description to the section. Adjust heading size and alignment. STEP 3: Customize section design Choose Edges for the section. Choose Button style and animation. STEP 4: Choose colors for section elements In Colors settings group, choose colors for section elements such as background, heading, text... STEP 5: Customize Desktop/Mobile layout In the Desktop layout and Mobile layout setting groups: (Optional) Choose to Show section divider. Adjust padding. STEP 6: Click "Save" when done. 🤔 How to sell tickets to your events? This feature allows you to link an event to a product, setting the product as a ticket for users to book for the event. Ensure that the ticket product is properly configured with the necessary variants (e.g., seat types, dates).  STEP 1: Open the section Click on the Event block that you want to add tickets. Scroll down to Event tickets settings group. STEP 2: Set up the feature Toggle Offer tickets for this event ON. Add a ticket page to sell tickets to attendees: Create a digital product to provide more information about the event, and optionally hide it from product listings. Enter Ticket button label, for example Buy tickets Choose Button style. STEP 3: Click "Save" when done. 5. Layout Recommendations The Event calendar section has 2 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Event calendar #1 Check out demo here. 📂 Event calendar #2 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Email signup

The Email signup section allows you to collect customer email addresses for newsletters, promotions, or updates. It's a powerful tool to grow your mailing list and stay connected with your customers. 1. Section Components Section Email signup Display a section where customers can enter their emails. Available block Heading Adds a customizable heading to the section. Text Provides a space for supporting information. Email form Add a field to collect customer email addresses 2. Location & Setup To add & set up the Email signup section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section in Template. Click "Add Section". Select "OT: Email signup (#number of variant)". 3. Highlight Features Customizable Heading: Tailor the title to align with your branding or campaign. Text Description: Add a compelling message to encourage sign-ups. Automatic Notifications: Sends an email to the store owner's email address when a customer submits their email. Flexible Styling: Adjust colors, fonts, and spacing to match your theme. 4. Common Use Cases 🤔 How to set up a basic Email signup? STEP 1: Add the section Add Email signup section to your desired position. STEP 2: Add & customize the blocks Under Email signup section, add blocks and open its settings panel to set up:  Block How to set up? Heading Enter a Heading for the section. Choose Heading size and assign a Heading tag (for SEO purposes). Text Enter Description for the section. Email form Adjust the email Form width. Enter Button label (for example: Subscribe).   STEP 3: Click "Save" and preview. 🤔 How to customize the look of Email signup section? STEP 1: Open the section Click on the Email signup settings panel. STEP 2: Add images to the section Add images to display on desktop and mobile devices separately. Adjust image position, image height, image overlay and opacity. STEP 3: Adjust heading and design Choose Text transform for the heading. At Design settings group, adjust the style and animation for elements in Email signup block. STEP 4: Choose colors for section elements In Colors settings group, choose colors for section elements such as background, heading, text... STEP 5: Customize Desktop/Mobile layout In the Desktop layout and Mobile layout setting groups: (Optional) Choose to Show section divider. Adjust padding. STEP 6: Customize Color for the section In the Color setting group, choose colors for section elements such as background, heading, text, border… STEP 7: Click "Save" when done. 5. Layout Recommendations  The Email signup section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Email signup #1 Check out demo here. 📂 Email signup #2 Check out demo here. 📂 Email signup #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Popup Exit-intent

Popup exit-intent appears when a visitor is about to leave the site, attempting to retain them. Their primary goal is to prevent site abandonment by presenting last-minute offers, discounts, or valuable content. Note:  This section features two main popup types: Standard Popups (Only) and Exit-Intent Popups. You can set up any type of popup using Popup exit-intent section. Standard Popups: These appear based on predefined rules, such as time spent on the page, scroll depth, or clicks, to capture attention during browsing. They serve various purposes, including promoting deals, collecting email addresses, and displaying announcements, all aimed at engaging users within their active session. Exit-Intent Popups: These appear when a visitor is about to leave the site, attempting to retain them. Their primary goal is to prevent site abandonment by presenting last-minute offers, discounts, or valuable content. 1. Section Components Section Popup Exit-intent Display a customizable overlay window when a visitor is about to leave the site. Available blocks Heading Add a heading and subheading to the popup. Text  Add supporting text content to the popup. Email form  Add an email form to collect subscribers and build an email list. Thank you page Display thank you message with a coupon code after form submission. 2. Location & Setup To add & set up the Popup Exit-intent section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section. You can place it at Footer or Overlay to make the section display on all pages. Click "Add Section". Select "OT: Popup Exit-intent (#number of variant)". 3. Highlight Features Flexible display rules: Control when, where, and how often the popup appears - show only to guests, add delay, or set reappear intervals. Minimal popup mode: Offer a subtle version of your popup that stays pinned in the corner. Customizable content blocks: Mix and match various blocks to create a popup that fits your preferences. 4. Common Use Cases 🤔 How to set up a basic Popup Exit-intent? STEP 1: Add the section Add Popup Exit-intent section to your desired position. STEP 2: Add & customize Heading block Edit the Heading block with your main message. STEP 3: Add & customize Text block Click on the Text block and enter the supporting details. STEP 4: Add an image to the Popup Open the Popup Exit-intent section setting panel, find the Image setting and assign an image. (To change the image position on desktop and mobile, use the Desktop/Mobile content position setting.) STEP 5: Click "Save". 🤔 How to set up a newsletter Popup Exit-intent? STEP 1: Add the section Add Popup Exit-intent section to your desired position. STEP 2: Add & customize Heading block In the Heading block, enter a compelling headline about newsletter benefits STEP 3: Add & customize Text block Click on the Text block and enter the supporting details. STEP 4: Add an Email form block Add the Email form block for subscription collection. Choose Subscribe button style. STEP 5: Add a Thank you page block The Thank you page block is only shown when the popup has contained an email form and the form is successfully submitted. In the Thank you page block settings panel: Enter a short thank you message at Heading.  Enter a short promotional Text. (Include coupon_code in the text to show coupon code within the text box.) Paste your Coupon code. Enable to Show continue shopping button. Enter the text shown on the button and paste button navigation link. STEP 6: Click "Save". 🤔 How to set up the Popup's exit-intent display rules? Exit-intent rules and triggers determine how the popup appears when the user is about to leave the page. (The exit intention will be detected when the mouse is moving toward the browser’s navigation bar). Here's how to set up: STEP 1: Open the settings Click on the Popup section to open its settings panel. Scroll to Display rules settings group. STEP 2: Enable popup display when customers leave (Default) Toggle Enable Exit Intent PopUp to activate the feature. The popup will appear when desktop visitors move their cursor toward the top of the screen—usually to close the tab or window. Enable Show for guests only to show only for non-logged-in visitors. This is useful for collecting new leads or offering first-time visitor promotions. Toggle Show on mobile to enable the popup on mobile devices. Set the time Delay (in seconds) before the popup appears. Define Reappear after - how many days before the popup reappears for the same visitor. STEP 3: Click "Save" 🤔 How to set up the Minimal popup? Don't worry about users closing the pop-up! Our minimal design keeps it sticky in the corner, so it's always there if they want to re-open the full view without taking up much space.  Here's how to set up: STEP 1: Open the settings Click on the Popup Exit-intent section to open its settings panel. Find Minimal Popup settings group. STEP 2: Set up the minimal popup Toggle on "Enable on desktop" and/or "Enable on mobile" for minimal style. Set Title and Subtitle for each minimal popup preview Set the Default style on desktop and Default style on mobile to be Full style or Minimal style. Choose Minimal popup position. STEP 3: Click "Save" 🤔 How to set up the Popup Exit-intent's look? Here's how to set up the Popup Exit-intent's look: STEP 1: Open the settings Click on the Popup Exit-intent section to open its settings panel. STEP 2: Choose popup position Choose where popup displays at Popup position. STEP 3: Choose content position & alignment Choose content position and alignment on desktop and mobile devices. STEP 4: Choose section border and customize button Choose section border at Edges.  Select Button style and animation when hovered. STEP 5: Choose color for section elements At Colors settings group, choose color for heading, subheading, background, button... STEP 5: Click "Save" 5. Layout Recommendations The Popup Exit-intent section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Popup Exit-intent #1 Check out demo here. 📂 Popup Exit-intent #2 Check out demo here. 📂 Popup Exit-intent #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Popup

Popup section provides an effective way to capture user attention and convey important messages or promotions through customizable overlay windows. Note:  This section features two main popup types: Standard Popups (Only) and Exit-Intent Popups. You can set up any type of popup using Popup section. Standard Popups: These appear based on predefined rules, such as time spent on the page, scroll depth, or clicks, to capture attention during browsing. They serve various purposes, including promoting deals, collecting email addresses, and displaying announcements, all aimed at engaging users within their active session. Exit-Intent Popups: These appear when a visitor is about to leave the site, attempting to retain them. Their primary goal is to prevent site abandonment by presenting last-minute offers, discounts, or valuable content. 1. Section Components Section Popup Create customizable overlay windows for promotions, newsletters, and user engagement. Available blocks Heading Add a heading and subheading to the popup. Text  Add supporting text content to the popup. Email form  Add an email form to collect subscribers and build an email list. Thank you page Display thank you message with a coupon code after form submission. 2. Location & Setup To add & set up the Popup section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section. You can place it at Footer or Overlay to make the section display on all pages. Click "Add Section". Select "OT: Popup (#number of variant)". 3. Highlight Features Flexible triggers & rules: Set detailed appearance rules, including delay time, scroll depth, exit intent, and reappearance interval to target users at the right moment. Minimal popup mode: Keep your popup visible with the minimal sticky corner design, allowing users to reopen the full popup anytime. Performance tracking: Integrate Google Analytics events to monitor popup interactions, conversions, and user engagement. 4. Common Use Cases 🤔 How to set up a basic Popup? STEP 1: Add the section Add Popup section to your desired position. STEP 2: Add & customize Heading block Edit the Heading block with your main message. STEP 3: Add & customize Text block Click on the Text block and enter the supporting details. STEP 4: Add an image to the Popup Open the Popup section setting panel, find the Image setting and assign an image. (To change the image position on desktop and mobile, use the Desktop/Mobile content position setting.) STEP 5: Click "Save". 🤔 How to set up a newsletter Popup? STEP 1: Add the section Add Popup section to your desired position. STEP 2: Add & customize Heading block In the Heading block, enter a compelling headline about newsletter benefits STEP 3: Add & customize Text block Click on the Text block and enter the supporting details. STEP 4: Add an Email form block Add the Email form block for subscription collection. Choose Subscribe button style. STEP 5: Add a Thank you page block The Thank you page block is only shown when the popup has contained an email form and the form is successfully submitted. In the Thank you page block settings panel: Enter a short thank you message at Heading.  Enter a short promotional Text. (Include coupon_code in the text to show coupon code within the text box.) Paste your Coupon code. Enable to Show continue shopping button. Enter the text shown on the button and paste button navigation link. STEP 6: Click "Save". 🤔 How to set up the Popup's display rules? Here's how to set up the Popup's rules and triggers: STEP 1: Open the settings Click on the Popup section to open its settings panel. Scroll to Display rules settings group. STEP 2: Set up general display rules & triggers Enable Show for guests only to show only for non-logged-in visitors. This is useful for collecting new leads or offering first-time visitor promotions. Set Trigger rules: Delay x second: Show the popup after a certain number of seconds on page load. Set the time Delay (in seconds) before the popup appears. Scroll down: Show the popup when users scroll down a defined percentage of the page. At Scroll page down, choose how far a visitor must scroll (in %) before the popup triggers. Define Reappear after - how many days before the popup reappears for the same visitor. Toggle Show on mobile to enable the popup on mobile devices. STEP 4: Click "Save" 🤔 How to set up the Popup's exit-intent rules & triggers? Exit-intent rules and triggers determine how the popup appears when the user is about to leave the page. (The exit intention will be detected when the mouse is moving toward the browser’s navigation bar). Here's how to set up: STEP 1: Open the settings Click on the Popup section to open its settings panel. Scroll to Display rules settings group. STEP 2: Enable popup display when customers leave Toggle Enable Exit Intent PopUp to activate the feature.  The popup will appear when desktop visitors move their cursor toward the top of the screen—usually to close the tab or window. At Exit-intent Rules & Triggers > Trigger campaign, you can choose how often the popup appears for each visitor: Always: The popup shows every time the exit intent is detected. Once per session: The popup appears only once during a browsing session. Once per X days: Set the popup to reappear after a specific number of days. Then enter X days. STEP 3: Click "Save" 🤔 How to set up the Minimal popup? Don't worry about users closing the pop-up! Our minimal design keeps it sticky in the corner, so it's always there if they want to re-open the full view without taking up much space.  Here's how to set up: STEP 1: Open the settings Click on the Popup section to open its settings panel. Find General Minimal Popup settings group. STEP 2: Set up the minimal popup Toggle on "Enable on desktop" and/or "Enable on mobile" for minimal style Set Title and Subtitle for each minimal popup preview Set the Default style on desktop and Default style on mobile to be Full style or Minimal style. Choose Minimal popup position. If you want to track popup interactions, enter the Google Analytics event name. STEP 3: Click "Save" 🤔 How to set up the Popup's look? Here's how to set up the Popup's look: STEP 1: Open the settings Click on the Popup section to open its settings panel. STEP 2: Choose popup position Choose where popup displays at Popup position. STEP 3: Choose content position & alignment Choose content position and alignment on desktop and mobile devices. STEP 4: Choose section border and customize button Choose section border at Edges.  Select Button style and animation when hovered. STEP 5: Choose color for section elements At Colors settings group, choose color for heading, subheading, background, button... STEP 5: Click "Save" 5. Layout Recommendations The Popup section has 2 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Popup #1 Check out demo here. 📂 Popup #2 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Scrolling Slideshow

The Scrolling slideshow dynamically displays multiple images or content in vertical sequence, commonly used to grab attention, highlight promotions, or tell a visual story. 1. Section Components Section Scrolling slideshow Displays multiple images/videos or content in vertical sequence. Available blocks Slide Add an individual image/video slide to the section. 2. Location & Setup To add & set up the Scrolling slideshow section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section in Template. Click "Add Section". Select "OT: Scrolling Slideshow". 3. Highlight Features Flexible media support: Combine high-quality images and Shopify-hosted videos for visually rich storytelling. Interactive navigation: Enable rotating slides, skip buttons, scrolling icons, and navigation dots for smooth browsing. Product integration: Feature individual products directly in slides with adjustable card size, border, and blur for a polished presentation. 4. Common Use Cases 🤔 How to set up Scrolling slideshow? STEP 1: Add the section Add Scrolling slideshow section to your desired position. STEP 2: Add & customize Slide blocks Under Scrolling slideshow section, add Slide blocks and open its settings panel to set up: Setting How to set up? Media Upload a high-quality Image optimized for desktop and mobile. Upload a Video under Shopify-hosted video. Overlay & navigation Adjust Overlay opacity, choose an overlay color, or apply a Gradient overlay to enhance slide visibility. Add a Slide link to make the entire slide clickable. Content Add Heading, Subheading, and optional descriptive text. Adjust content alignment, text size, content position and so on. Color Adjust colors for slide elements: text, heading, content background... STEP 3: Click "Save". 🤔 How to customize the Scrolling slideshow section's look? STEP 1: Click on the Slideshow section to open its settings panel STEP 2: Adjust display options Enable Used as Hero to make the section the main banner. Set Image size for desktop and mobile. Enable or disable slide features such as Rotate between slides, Show Skip button, Navigation Dots, or Show Scrolling icon to enhance interaction and navigation. STEP 3: Customize section font and color At Font setting group, enable Use Custom Font, then select custom font families for Heading, Subheading, and Text. At Color settings group, adjust color for Controls, which applies to Skip, Scroll icons, navigation dots,... STEP 4: Customize desktop/mobile layout At Desktop layout/Mobile layout settings group, adjust padding for the section. STEP 5: Click "Save" when done. 🤔 How to display products in Scrolling Slideshow? To showcase products in the Scrolling Slideshow: STEP 1: Open the settings With each slide in the section, you can display 1 product. Click on the Slide block you want to add a product to. STEP 2: Add products At Product settings group: Select product to highlight in the slide (You can only select 1 product). Enter a short Text (e.g., “Check out our products”) to introduce the featured items. STEP 3: Customize product card display Enable Add divider border to visually separate product content. Turn on Product Card Border and adjust Border thickness and Corner radius for rounded effects. Select Desktop card type (Small or Large) and adjust Desktop card size (in %) to define the product card’s scale.  Desktop card type: Small  Desktop card type: Large Modify Background blur to create a soft visual focus behind the product card. STEP 4: Click "Save" 5. Layout Recommendations The Scrolling slideshow section has appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Scrolling Slideshow Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Line Button

Line button section lets merchants display a chat button on the site, allowing customers to reach out via Line quickly. 1. Section Components  Section Line button Add a Line chat button to your store for instant customer contact. 2. Location & Setup To add & set up the Line button section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. It’s recommended to add it under the Footer or Overlay group (if supported by your theme) to display the WhatsApp button on pages with a footer. Click “Add Section”. Select “OT: Line button”. 3. Highlight Features Quick customer communication via Line. Customizable button position, icon, and colors. Editable welcome message and chat label. Responsive design for both desktop and mobile. 4. Common Use Cases 🤔 How to set up Line button? Here's how to set up a Line button on your site: STEP 1: Add the Line button section to your desired location. STEP 2: Set up the button Click on the Line button section to open its settings panel and: Enter your Line QR code URL Adjust the Icon size using the slider (default: 50px). STEP 3: Set up Line welcome message At Welcome message setting group:  Enter the welcome text that appears when customers open the chat box. Adjust the roundness of the message box corners (in pixels). Set the label that appears on the chat button. Choose a font for your chat text and adjust its size. STEP 4: Click “Save” when done. 🤔 How to custom the Line button style?  Want to customize the style of the Line button? Here's how: STEP 1: Click on the Line button section to open its settings panel. STEP 2: Customize position of the button At Desktop/Mobile settings group, you can: Choose Position whether to display the button on the Left or Right side of the screen. Vertical position: Adjust how high or low the button appears (default: 2%). STEP 3: Choose the button style Choose the button Style: showing icon only/icon with Welcome message/icon with Chat with us label... STEP 4: Customize colors At Colors settings group, you can adjust colors for button elements: Icon foreground Icon background Background Text Text link STEP 5: Click “Save” when done. 5. Layout Recommendations If you want support to set up the layouts, don't hesitate to chat with us! 📂 Line button: Icon only Check out demo here. 📂 Line button: Included Welcome message Check out demo here. 📂 Line button: Included Chat with us Style 1 Check out demo here. 📂 Line button: Included Chat with us Style 2 Check out demo here. 📂 Line button: Included Chat with us Style 3 Check out demo here. 📂 Line button: Included Chat with us Style 4 Check out demo here. 6. Support Information Need help? Contact our support team at  Omni Themes Support .

OT: Theme Sections - Sections

WhatsApp Button

WhatsApp button section lets merchants display a floating chat button, allowing customers to quickly reach out via WhatsApp. 1. Section Components Section WhatsApp button Add a WhatsApp chat button to your store for instant customer contact. 2. Location & Setup To add & set up the WhatsApp button section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. It’s recommended to add it under the Footer or Overlay group (if supported by your theme) to display the WhatsApp button on pages with a footer. Click “Add Section”. Select “OT: WhatsApp button”. 3. Highlight Features Quick customer communication via WhatsApp. Customizable button position, icon, and colors. Editable welcome message and chat label. Responsive design for both desktop and mobile. 4. Common Use Cases 🤔 How to set up WhatsApp button? Here's how to set up a WhatsApp button on your site: STEP 1: Add the WhatsApp button section to your desired location. STEP 2: Set up the button Click on the WhatsApp button section to open its settings panel and: Enter your WhatsApp Phone number with the country code. Choose your preferred WhatsApp Icon style (e.g., Icon 1). Adjust the icon size using the slider (default: 50px). STEP 3: Set up WhatsApp welcome message At Welcome message setting group:  Enter the welcome text that appears when customers open the chat box. Adjust the roundness of the message box corners (in pixels). Set the label that appears on the chat button. Choose a font for your chat text and adjust its size. STEP 4: Click “Save” when done. 🤔 How to custom the Whatsapp button style?  Want to customize the style of the WhatsApp button? Here's how: STEP 1: Click on the WhatsApp button section to open its settings panel. STEP 2: Customize position of the button At Desktop/Mobile settings group, you can: Choose Position whether to display the button on the Left or Right side of the screen. Vertical position: Adjust how high or low the button appears (default: 2%). STEP 3: Choose the button style Choose the button Style: showing icon only/icon with Welcome message/icon with Chat with us label... STEP 4: Customize colors At Colors settings group, you can adjust colors for button elements: Icon foreground Icon background Background Text Text link STEP 5: Click “Save” when done. 5. Layout Recommendations If you want support to set up the layouts, don't hesitate to chat with us! 📂 WhatsApp button: Icon only Check out demo here. 📂 WhatsApp button: Included Welcome message Check out demo here. 📂 WhatsApp button: Included Chat with us Style 1 Check out demo here. 📂 WhatsApp button: Included Chat with us Style 2 Check out demo here. 📂 WhatsApp button: Included Chat with us Style 3 Check out demo here. 📂 WhatsApp button: Included Chat with us Style 4 Check out demo here. 6. Support Information Need help? Contact our support team at  Omni Themes Support .  

OT: Theme Sections - Sections

App Download Banner

The App download banner section provides an eye-catching promotional banner designed to showcase multiple app download options with direct links, encouraging visitors to quickly access your app from their preferred platforms. 1. Section Components Section App download banner Offer a banner to showcase multiple app download options with direct links. 2. Location & Setup To add & set up the Hero banner section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add section”. Select “OT: App Download Banner. 3. Highlight Features Flexible download access: Offer multiple convenient download options including direct links to the App Store, Google Play, or a scannable QR code. Tailored visual presentation: Fully customize the banner's appearance with options to adjust image sizes, element spacing, and padding for a seamless brand fit. Rich content display: Craft compelling messages using various content types such as subheadings, headings, and descriptive text below app store badges. 4. Common Use Cases 🤔 How to set up the App download banner section? Here's how to set up the section: STEP 1: Add the App download banner section to your desired location. Then click on the section to open its settings panel. STEP 2: Enter the section content At Content settings group: Add Subheading, Heading, and Text content to the section. You can choose colors for the text. Add text to show below badges, for example: Scan the QR code or click on the badges to download our app. STEP 3: Add images to the section At Images settings group: Upload images for desktop and mobile devices separately. Enable Lazy load images if you wish. STEP 4: Set up app download options Upload App Store badge and Google Play badge to display platform-specific app badges. Add corresponding App Store link and Google Play link to direct users to the correct app pages. (Desktop only) Upload a QR code image so users can conveniently scan and download the app from their devices. STEP 5: Click “Save” when done. 🤔 How to adjust App download banner section look? STEP 1: Click on the App download banner section to open its settings panel.  STEP 2: Set up section layout At Layout settings group: Adjust image height separately for desktop and mobile. Control content width, or enable Full width display for both devices. Set Content position (desktop) and alignment (mobile). Refine spacing with element spacing, padding, and margin. Choose a background color to match your store’s style. STEP 3: Customize the typography At Typography settings group: Choose Heading font and Text font. Edit font size for heading and text on desktop & mobile devices. STEP 4: Click “Save” when done. 5. Layout Recommendations If you want support to set up the layout, don't hesitate to chat with us! 📂 App download banner #1 Check out demo here. 6. Support Information Need help? Contact our support team at  Omni Themes Support .  

OT: Theme Sections - Sections

Hero banner

The Hero banner section offers a striking, full-width display designed to capture visitor attention immediately. Ideal for highlighting key products or campaigns.  1. Section Components Section Hero banner Display a full-width banner to capture attention. Available block Heading Add a heading to the section. Text  Add text to the section. Button Add a button to the section. Logo list Add a list of logos (up to 6) to the section. Rating Add rating stars and message to the section. 2. Location & Setup To add & set up the Hero banner section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add section”. Select “OT: Hero banner (#number of variant)”. 3. Highlight Features Flexible content composition: Combine multiple content blocks such as heading, text, button, logo list, and rating to craft a rich and persuasive hero message. Customizable layout options: Control the banner’s height, ratio, and image position for both desktop and mobile views. Integrated logo and rating display: Showcase partner logos or brand trust elements directly within the banner to boost credibility. 4. Common Use Cases 🤔 How to set up the Hero banner section? Here's how to set up the section: STEP 1: Add the Hero banner section to your desired location STEP 2: Set up blocks Under Hero banner section, add these blocks and open their settings panel to customize: Block How to set up?  Heading Enter Heading. Wrap some text in [...] to highlight it.  Choose the highlight style at Marker. Text Enter Text for further description. Add an Icon. You can use SVG code or custom image to add your own icon. Button Add Button label and paste Button link to redirect customers. Choose Button size and color. Logo list Upload logos (up to 6). (Optional) Enter some text/message. Rating Choose the number of Rating stars (1-2). Choose the Star size and color. Enter some Text if you wish. STEP 3: Customize the Hero banner section look Click on the Hero banner section to open its settings panel: Upload an Image to the section for a visual enhancement. You can also upload one for mobile devices separately. Adjust the image corner, height, and ratio. STEP 4: Click “Save” when done. 🤔 How to adjust Hero banner section look? STEP 1: Click on the Hero banner section to open its settings panel.  STEP 2: Customize the layout At Layout settings group, you have options to: Set image position on desktop and mobile. Enable to use the banner as a hero banner. STEP 3: Customize the text  At Text settings group, you can: Style how the content is aligned and the Content position. Choose font and size for the heading and body text. Adjust Icon size and Icon thickness. STEP 4: Customize section layout At Section layout settings group, you can: Adjust section margin and padding. Adjust section width, content width, or gap between text and image. Adjust the section corner. STEP 5: Customize colors At Color settings group, choose colors for section elements such as section background, text, heading,... STEP 6: Click “Save” when done. 5. Layout Recommendations The Hero banner section has 2 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Hero banner #1 Check out demo here. 📂 Hero banner #2 Check out demo here. 6. Support Information Need help? Contact our support team at  Omni Themes Support .  

OT: Theme Sections - Sections

Breadcrumb

Breadcrumb section shows the path users take to reach a page,  improving navigation. 1. Section Components Section Breadcrumb Show the path users take to reach a page. 2. Location & Setup To add & set up the Breadcrumb section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section (commonly below the header). Click “Add Section”. Select “OT: Breadcrumb”. 3. Highlight Features Customizable appearance: Adjust separator icons, font styles, colors, and spacing to match your theme’s design. Flexible display control: Set the maximum number of breadcrumb levels to keep the trail clean and focused. 4. Common Use Cases 🤔 How to set up Breadcrumb section display? STEP 1: Add the Breadcrumb section to your desired location. Then click on the section to open its settings panel. STEP 2: Separator settings Select a Separator icon (e.g., em dash, slash, or arrow) Adjust the Separator size. STEP 3: Typography and alignment settings Adjust spacing between letters. To use a different font style, enable Use custom font and choose Font. Choose Font size on desktop and mobile. Choose how the Breadcrumb is aligned (Left, Center, Right) STEP 4: Navigation settings At Show home link, display or hide the Home link at the beginning of the breadcrumb trail. Toggle Use home icon to replace the Home link with an icon for a cleaner look. Limit how many breadcrumb levels are displayed at Max items. STEP 5: Click “Save” when done. 🤔 How to make advanced customizations to the Breadcrumb section?  Want to customize the color or desktop/mobile layout for the breadcrumb? Here's how: STEP 1: Click on the Breadcrumb section to open its settings panel. STEP 2: Customize color  At Color settings group, you can choose color for text, separator... STEP 3: Customize Desktop/Mobile layout At Desktop/Mobile layout settings group, you can adjust section width and padding. STEP 4: Click “Save” when done. 5. Layout Recommendations If you want support to set up the layout, don't hesitate to chat with us! 📂 Breadcrumb Check out demo here. 6. Layout Recommendations Need help? Contact our support team at  Omni Themes Support .

OT: Theme Sections - Sections

Image carousel

Image carousel section allows visitors to effortlessly browse through a curated selection of images with an engaging carousel effect. It's ideal for showcasing product details, lifestyle shots, or portfolios.  1. Section Components Section Image carousel Display a series of images with a carousel effect. Available block Image Add and set up an individual image. 2. Location & Setup To add & set up the Image carousel section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add Section”. Select “OT: Image carousel (#number of variant)”. 3. Highlight Features Flexible image styling: Adjust image ratio and corner radius to create a refined, balanced look. Interactive hover effect: Control image overlay opacity and color to highlight content when users hover over images. Consistent visual experience: Fine-tune the overlay and hover settings to maintain visual harmony and enhance user engagement. 4. Common Use Cases 🤔 How to set up the Image carousel section? Here's how to set up the section: STEP 1: Add the Image carousel section to your desired location STEP 2: Set up Image blocks Click on the Image block to open its settings panel and customize these: Add Image and Image link for further redirection. Enter text content to show on the image: Sub-title content. You can also make further customizations (text font, size or letter spacing) by enable Custom sub-title. Title of the image. Text for further description/promotional message. Note that the text only displays on desktop devices when hovering the image. Add icon to show on the image. You can use an image as a custom icon. STEP 3: Customize the Image carousel section look Click on the Image carousel section to open its settings panel: Enter the Heading for the section. Wrap some text in [...] to highlight it. Enter Description and choose Content alignment. STEP 4: Click “Save” when done. 🤔 How to add a background to the Image carousel section? Want to add section background? Here's how: STEP 1: Click on the Image carousel section to open its settings panel.  STEP 2: Customize the background At Section layout settings group, you have options to set image/color as the background:  Background: Image  Background: Color Upload an Image to use as background. Choose a Color or Gradient color to use as background. STEP 4: Click “Save” when done. 🤔 How to adjust the section carousel look?  Here's how to style the section carousel look: STEP 1: Click on the Image carousel section to open its settings panel. Scroll to Carousel settings group to start editing. STEP 2: Style the image display Choose Image ratio. Adjust corner for the images. Choose carousel layout to display:  Focus Standard Gray out Set Opacity and Opacity color to control the transparency of the image overlay and set the base overlay tone. Adjust Opacity hovering (e.g., 32%) and Opacity hovering color to define how transparent the overlay becomes when hovering over an image. STEP 4: Customize navigation button Toggle Enable navigation button to display navigation arrows (desktop only). Adjust colors for navigation button and icon. Modify the button size. STEP 5: Click “Save” when done. 🤔 How to make advanced customizations to the Image carousel section?  Want to style the typography, color, or desktop/mobile layout of the section? Here's how: STEP 1: Click on the Image carousel section to open its settings panel. STEP 2: Customize the text typography  At Typography settings group, you can: Choose the font for heading and description text. Adjust the text size on desktop and mobile. STEP 3: Customize the text overlay At Text overlay settings group, you can style the text on the images: Choose the font for title and text. Adjust the font size separately for desktop and mobile. Adjust the size of the milestone, title and text. Choose Image content alignment and Image content position. STEP 4: Customize Desktop/Mobile layout At Desktop/Mobile layout settings group, you can: Select the Number of columns to display. Adjust content width, section width and padding. STEP 5: Customize colors At Color settings group, choose colors for section elements such as section text, heading,... STEP 6: Click “Save” when done. 5. Layout Recommendations The Image carousel section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Image carousel #1 Check out demo here. 📂  Image carousel #2 Check out demo here. 📂  Image carousel #3 Check out demo here. 6. Layout Recommendations Need help? Contact our support team at  Omni Themes Support .