OT: Theme Sections - Sections

OT: Theme Sections - Sections

Timeline

Timeline section allows merchants to showcase important milestones in their brand, products, or projects’ development journey. The section is a powerful storytelling tool that builds trust and helps visitors quickly understand your brand’s evolution and values. 1. Section Components Section Timeline Creates a chronological display of important milestones in your brand, product, or project journey. Available block Milestone Add individual entries with a title, date, description, and image/video. 2. Location & Setup To add & set up the Timeline section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add Section”. Select “OT: Timeline (#number of variant)”. 3. Highlight Features Chronological Display: Present milestones in sequential order for clear storytelling Rich Media Support: Add images, Shopify-hosted videos, or embedded videos from URLs Interactive Navigation: Timeline axis with clickable milestone labels 4. Common Use Cases 🤔 How to set up Timeline section? Want to set up a Timeline to highlight your brand’s milestones? Here's how: STEP 1: Add the Timeline section to your desired location STEP 2: Set up each Milestone block Click on the Milestone block to open its settings panel and customize these: Add Image or Video (Shopify-hosted or embedded via URL). If both are added, the image is shown as the thumbnail for the video. Enter Milestone (milestone name on the timeline axis, e.g., 2022). Add Title and Text. Add a Button text and Button link for further navigation. Add more Milestone blocks and repeat this step to set up other milestones. STEP 3: Customize the Timeline section look Choose Layout style for the section:  Vertical Horizontal Choose the position for the timeline bar and media.  At Content settings group, add a Heading and Description for the section.  STEP 4: Click “Save” when done. 🤔 How to make advanced customizations to the Timeline section?  Want to customize the typography, element size and style, or  desktop/mobile layout? Here's how: STEP 1: Click on the Timeline 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 buttons and elements At Items settings group, you can: Choose the Button display, Button style and animation when hovering the button. Adjust the size of the milestone, title and text. Choose Content alignment, padding, Image ratio, and Corner radius.  STEP 4: Customize Desktop/Mobile layout At Desktop/Mobile layout settings group, you can adjust content width, section width and padding. STEP 5: Customize colors At Color settings group, choose colors for section elements such as section background, heading, button... STEP 6: Click “Save” when done. 5. Layout Recommendations The Timeline section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!  📂 Timeline #1 Check out demo here. 📂 Timeline #2 Check out demo here. 📂 Timeline #3 Check out demo here. 📂 Timeline #4 Check out demo here. 6. Layout Recommendations  Need help? Contact our support team at  Omni Themes Support .  

OT: Theme Sections - Sections

Countdown

The Countdown section displays time-sensitive promotional content with countdown timers, creating urgency among customers and encouraging immediate purchases of discounted products or collections. 2. Section Components Section Countdown Showcases limited-time offers with countdown timers and promotional content. Available blocks Text Show promotional headings, descriptions, and discount codes Countdown Timer Used to show remaining time for the sale with customizable display options Button Used to create call-to-action buttons linking to products or collections 3. Location & Setup To add & set up the Countdown 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: Countdown (#number of variant)”. 4. Highlight Features Countdown Timer: Integrate a countdown timer to create urgency with ability to reset.  Flexible Positioning: Customizable spacing, padding, and text positioning Discount Integration: Embed discount codes directly within text blocks 5. Common Use Cases 🤔 How to set up a complete Countdown section? Don’t know where to start with this Countdown section, just follow these simple steps: STEP 1: Add the Countdown section to your desired page location STEP 2: Choose your background Click on Countdown to open its settings panel: Image: Upload your Image and Mobile image to use as a background image, then set the Image overlay opacity to 30–50% to ensure text is easy to read. Color: Simply pick your preferred Background color in the Colors group setting. STEP 3: Set up the Text block Under Countdown section, add Text block and open its settings panel: Enter a compelling Heading  Enter Text to show as the description Enter the Coupon code STEP 4: Set up the Countdown timer block Under Countdown section, add Countdown timer block and open its settings panel: Set end date, timezone STEP 5: Set up the Button block – set the Button label and Button link to your sale collection. You can add up to 2 buttons to the section. STEP 6: Customize the overall look of your section: At the Countdown settings panel: Choose your desired Section border Choose the Content layout on desktop to be Horizontal or Vertical Adjust the Content alignment STEP 7: Reorder the blocks if needed. Then click “Save” and preview. 🤔 How to set up a reset timer for the Countdown timer block? The Reset timer feature enables you to automatically restart or stop a timer after it has finished counting down. STEP 1: Open the Countdown timer block settings. STEP 2:  At Reset timer settings group: Next timer: Enter the number of seconds before the countdown resets. Loop countdown:  Turn OFF: The countdown will stop when it reaches 0. Turn ON: When next timer reaches 0, it will restart the next timer, otherwise it will stop when next timer reaches 0. STEP 3: Click “Save” when done. 🤔 How to customize the layout of the countdown timer? The Countdown timer block might be a little tricky to style. So here is a cheatsheet explaining how it works for you: In the Countdown timer block setting panel: Timer style: Square Round Rounded corners Line and border: ⚠️ Note: You can only see the line and border if you do not set the Background color. None Border Vertical line Overlay opacity & Colors: ⚠️ Note: The Overlay opacity works with the Background color setting inside the Colors group. Overlay opacity = 0% Overlay opacity = 100% 5. Layout Recommendations The Countdown section has 2 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Countdown #1 Check out demo here. 📂 Countdown #2 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Scrolling Announcement Bar

The Scrolling announcement bar section (only able to add at Header) creates a dynamic, eye-catching banner that moves across your store header to showcase promotions, announcements, or updates.  1. Section Components Section Scrolling announcement bar Create a moving banner that displays promotional elements with a scrolling effect. Available block Text Show simple text content with adjustable sizing Icon Add visual icons from built-in library or custom SVG Image Show images with custom dimensions and styling Button Create clickable buttons with different styling options 2. Location & Setup To add & set up the Scrolling 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: Scrolling announcement bar. 3. Highlight Features Smooth Animation: Adjustable scrolling speed and direction control Rich Content Blocks: Mix text, icons, buttons, and images Hover Controls: Pause animation when users hover over the banner 4. Common Use Cases 🤔 How to set up the Scrolling announcement bar? If you don't know where to start to set up this section, just follow this: STEP 1: Add the Scrolling announcement bar section to the Header. STEP 2: Add/delete, rearrange the blocks inside the section. Add more, delete the unused, or reorder Text, Icon, Button, and Image blocks to make the section fully yours. STEP 3: Change the content of each block: Click on the block to open its settings panel. Depending on the block you use, the setting might be slightly different.  Text block Enter Text to display on the scrolling announcement bar. Adjust Text size, Text color, and block padding. Icon block Choose from available icons or use custom icon with SVG code. Adjust Icon height and Icon color. Image block Upload Image to the section and adjust its ratio, height and edges. Button block Set up the button on the scrolling label by entering Button label and Button link. Style the button and choose its animation. Choose Colors for button elements. STEP 4: Adjust the scrolling effect: Click on the Scrolling announcement bar section, then find the Scrolling setting group. You can change the Speed, Direction of the scrolling effect, and enable Pause on hover to pause the banner scrolling when hovered. Note: The more seconds you choose at Speed, the slower the announcement bar scrolls. STEP 5: Click "Save" when done. 🤔 How to customize the Scrolling announcement bar's look?     To customize the look of the section, do this: STEP 1: Click on the Scrolling announcement bar section to open its settings panel. STEP 2: Scroll down to Colors, Desktop layout and Mobile layout settings groups to adjust: Color for background, line and borders. Content width, spacing, and padding of the section. STEP 3: Click "Save" when done. 5. Layout Recommendations   The Scrolling announcement bar section can create appealing layouts. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Layout recommend  #1 Check out demo here. 📂 Layout recommend  #2 Check out demo here. 📂 Layout recommend  #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Collection slider

Typically displayed prominently on the homepage or a dedicated landing page, the Collection slider provides an organized and visually appealing way for users to browse through different product categories or collections. 1. Section Components Section Collection list banner Showcase a list of collections together with its featured image. Available block Collection banner Add a separate collection, with its own text & banner (e.g. Deep cleanser). 2. Location & Setup To add & set up the Collection slider 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: Collection slider (#number of variant)”. 3. Highlight Features Multiple collections showcase: Display up to 6 collections with individual banners, each with its own title and featured media. Carousel support: Enable auto-play and choose transition styles for smoother, dynamic interactions. Appealing layout: Supports rich media to present your collections like images, videos, and is freely customizable. 4. Common Use Cases 🤔 How to set up the Collection list banner section? If you want to set up the section but don't know how to start, follow this: STEP 1: Add the section Add the Collection list banner section. STEP 2: Add and set up Collection banner blocks Under the Collection list banner section, add Collection banner blocks (up to 6). Once added, click on the block to open its settings panel: Choose the collection to feature in the banner. Enter a Custom title for the banner. If there's no custom title provided, it will use the selected collection's name. At Image, you can upload or explore free images for the banner, including separate options for mobile devices at Mobile image. You can also feature a Video by choosing a video hosted on Shopify or embedding one from a URL (supports YouTube and Vimeo). Note: If you upload both an image and a video, the video is displayed, and the image is disabled. Repeat STEP 2 to add more collections to this section. STEP 3: Customize the section's look Click on the Collection list banner section to open its settings panel, then: Choose the Pagination position for the section: Top Center Bottom Customize section width, padding, or media height for Desktop 🖥️ and Mobile 📱 layout. Choose colors for the overlay and collection title. STEP 4: Click "Save" to apply changes. 🤔 How to enable carousel for Collection list banner section? To enable carousel effect for the section, follow this: STEP 1: Click on the Collection list banner to open its settings banner. STEP 2: Scroll down to the Carousel setting group, then: Toggle "Enable auto-play" At Change slides every, decide how long a slide is shown before moving to the next one Choose Transition style among blocks: Slide or Fade. STEP 3: Click "Save" to apply changes. 5. Layout Recommendations The Collection slider section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Collection slider #1 Check out demo here. 📂 Collection slider #2 Check out demo here. 📂 Collection slider #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Map

The Map section is where you can display the map that shows the store location, allowing customers to easily locate nearby stores or pickup points. By integrating an interactive map, customers can view store addresses, contact information, and operating hours, enhancing their shopping experience. 1. Section Components Section Map Show the store location, contact information, and operating hours Available block Store name Add a heading area (store name) to the section. Address and hour Add store address and business hours to the section. Button Add a button that automatically links to the Google Map of the entered address. 2. Location & Setup To add & set up the Map 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: Map (#number of variant)". 3. Highlight Features Google Maps integration: Automatic location detection and display based on entered address. Flexible display options: Choose between interactive map or custom image display. Comprehensive store information: Show store name, address, hours, and contact details in organized blocks. 4. Common Use Cases 🤔 How to set up Map section? STEP 1: Add the section Add Map section to your desired position in the theme editor. Click on Map section to open its settings panel. STEP 2: Enter store address In the Map section settings: Type the accurate address (including zip code, if available) into the Store address. Ensure the address exists and is recognized on Google Maps. Google Maps will automatically locate and display the corresponding map. STEP 3: Click "Save" and preview. 🤔 How to show a custom image instead of the map? To show a custom image instead of the map: STEP 1: Click on Map section to open its settings panel STEP 2: Simply add an Image to the section. The section will prioritize displaying the image over the map. STEP 3: Click "Save" and preview. 🤔 How to customize the text and layout of the section? STEP 1: Click on Map section to open its settings panel STEP 2: Adjust section height and content display Choose section height on Desktop and Mobile. Choose Content position & Content alignment within the section. STEP 3: Add section blocks Under the Map section, you can add blocks to set up more info about the store name, opening hours. Here's how to set up: Block How to set up? Store name Set the heading text, size, and HTML tag (to enhance the SEO of the page). Address and hour Set the Text showing store address and opening hours. Adjust text size. Button Name the button label, for example: Get directions. Choose button style, animation and color. Result:   STEP 4: Adjust section styles and layout on different devices On the Map section's settings group: At Styles config group, choose colors for the section background, text… At Desktop layout/Mobile layout config groups, choose section width and padding. STEP 5: Click "Save" when done. 5. Layout Recommendations The Map section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Map #1 Check out demo here. 📂 Map #2 Check out demo here. 📂 Map #3 Check out demo here. 📂 Map #4 Check out demo here. 📂 Map #5 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Blog posts

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 browse and access the content easily.  1. Section Components Section Blog Posts Showcase blog posts on the site. 2. Location & Setup To add & set up the Blog Posts 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: Blog post (#number of variant)". 3. Highlight Features Customizable blog cards: Adjust blog item appearance with image position (top/left), title size, featured image ratio, and corner styles. Content visibility control: Decide which elements to show, such as author info, blog name, publication date, excerpts, tags, and comment counts. Carousel functionality: Enable carousel mode with swipe, arrow controls, auto-play, and adjustable transition timing for smooth navigation. 4. Common Use Cases 🤔 How to set up Blog posts section? STEP 1: Add the section Add Blog Post section to your desired position in the theme editor. STEP 2: Configure basic settings Under Blog Post section settings panel: Enter a Heading, Subheading, and Text for the section, adjust its size and alignment. Choose colors for those elements. STEP 3: Set up blog display Configure which content to show: At Blog, select which blog's posts you want to display. At Blog posts, set number of blog posts to display (2-8 posts). Adjust Number of columns showing blogs on the desktop and mobile. Toggle "Show 'View All' Button" to link to the full blog. STEP 4: Set up Desktop/Mobile layout Scroll down to Desktop layout/Mobile layout: Adjust spacing between blog post blocks. Enable section divider or adjust padding. STEP 5: Click "Save" and preview. 🤔 How to customize blog item appearance? STEP 1: Access the Blog Post settings panel. STEP 2: Customize individual blog items: Choose the position of the blog post card layout: Image top or Image left. Adjust Title size for each blog post. Configure Featured image display (show/hide, background color). Set Image ratio to modify featured image aspect ratio. Choose the edges for the blog posts. STEP 3: Control content visibility: Choose which elements to display for each blog item: Author information Blog name Publication date Post excerpt Tags Comment counts STEP 4: Click "Save" when done. 🤔 How to customize carousel settings? To make the section swipe in carousel layouts: STEP 1: Click on Blog Post section to open its settings panel. STEP 2: Configure carousel options: In the Carousel settings group: Enable "Enable carousel on desktop" for desktop carousel functionality. Turn on "Enable swipe on mobile" for mobile swipe navigation. Toggle "Enable next/previous arrow on mobile" for displaying mobile arrow controls. Check "Enable auto-play" for automatic slide transitions. Set "Change slides every" to adjust auto-play timing. STEP 3: Click "Save" when done. 5. Layout Recommendations The Blog Posts section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Blog post #1 Check out demo here. 📂 Blog post #2 Check out demo here. 📂 Blog post #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Before & After Image

Before & After Image is a section that allows users to compare two different images side by side, highlighting their distinct characteristics or differences. It's commonly used to showcase product comparisons or visual transformations. 1. Section Components Section Before & After Image Compare two different images side by side. Available blocks Heading Add a heading area to the section. Button Add a button to the section. 2. Location & Setup To add & set up the Before & After Image 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: Before & After Image (#number of variant)". 3. Highlight Features Interactive comparison: Seamlessly compare two images side by side with a draggable slider, letting customers clearly visualize the transformation or difference. Flexible layouts: Choose between horizontal or vertical layouts, with 5 ready-made design variations (#1–#5) for different use cases. Additional content blocks: Enhance the section by adding headings, subheadings, text, or CTA buttons for context and stronger engagement. 4. Common Use Cases 🤔 How to set up Before & after image section? STEP 1: Add the section Add Before & after image section to your desired position. STEP 2: Add Before & after images Click on Before & after image to set up: Upload images for before and after comparisons. Specify heading inside the image, its size, and position (start, middle, end). STEP 3: Enter section heading Enter Heading, adjust its size, and assign it a tag. STEP 4: Click "Save" when done. 🤔 How to adjust Before & after image layout and display? STEP 1: Open the section Open Before & after image settings panel STEP 2: Choose section layout At Layout, choose between: Horizontal Vertical Choose image height for Desktop and Mobile devices. (Optional) Enable the corner for Before & after image. STEP 3: Style the section's elements Scroll down to Styles settings group, choose colors for heading, background, line and borders... STEP 4: Style Desktop/Mobile layout At Desktop layout and Mobile layout settings group: Adjust Image alignment. Choose section width, padding, or enable section divider. STEP 5: Click "Save" when done. 🤔 How to add an additional content block to the section? If you want to add an extra block displaying content and CTA button, like this: STEP 1: Add the blocks Under Before & After image section, add Heading and Button blocks. STEP 2: Configure the blocks Block How to set up? Heading Add Heading, Subheading and Text content. Adjust the text size. Choose text color. Button Enter Button label and paste a link to redirect customers. Choose button shape at Button style. Choose button animation when hovered. Choose color for button elements. STEP 3: Click "Save" when done. 5. Layout Recommendations The Before & After Image section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Before & After image #1 Check out demo here. 📂 Before & After image #2 Check out demo here. 📂 Before & After image #3 Check out demo here. 📂 Before & After image #4 Check out demo here. 📂 Before & After image #5 Check out demo here. 6. Support Information  Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Logo list

The Logo List section allows you to display a series of logos in a visually appealing way. This is typically used to showcase brand partnerships, client logos, or any affiliations your store might have. 1. Section Components Section Logo List Showcase a list of logos on your site. Available block Logo Add a separate logo to the section. 2. Location & Setup To add & set up the Logo List 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: Logo list (#number of variant)". 3. Highlight Features Brand Partnerships: Showcase client logos and brand affiliations effectively. Flexible Layout: Choose between carousel and stacked mobile layouts. Auto-switch Logo: Set up automatic logo switching for dynamic presentation. 4. Common Use Cases 🤔 How to set up Logo list section? STEP 1: Add the section Add Logo list section to your desired position. STEP 2: Add and set up Logo blocks Under Logo list section, add Logo blocks. Click on the block to open its settings panel: Upload Logo. Paste a link to redirect customers. Repeat this step to set up other Logo blocks. STEP 3: Set up the Logo list section Click on the Logo list section to open the settings panel: Enter the Heading for the section. Adjust its size, tag, and alignment. Choose the Image ratio, adjust its corner. At Mobile/Desktop layout, choose the number of columns, block width, spacing, and padding... Choose Mobile layout for the section: Carousel Stacked Choose colors for block elements. STEP 4: Click "Save" when done. 🤔 How to enable carousel for the section? To make the section swipe in a carousel layout, follow this: STEP 1: Click on Logo list section to open its settings panel STEP 2: Scroll down to the Carousel setting group, then: Toggle "Enable carousel on desktop" to display the text column with icons in a carousel format on desktop devices. Turn on "Show navigation" to show the arrows so customers can click to see the next and previous blocks. Tick "Auto-switch logo" to automatically rotate through the items in the carousel. Set the "Change bar every" interval to determine how frequently the carousel items will automatically change. STEP 3: Click "Save" when done. 5. Layout Recommendations The Logo List section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Logo list #1 Check out demo here. 📂 Logo list #2 Check out demo here. 📂 Logo list #3 Check out demo here. 📂 Logo list #4 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Video hero

A Video hero section is a prominent, visually impactful part of a website that features a video as the background or central element, often with overlay text and call-to-action buttons. This section is designed to grab visitors' attention immediately upon landing on the page and to create a strong, memorable first impression. 1. Section Components Section Video Hero Showcase video with text and button at a prominent position. Available block Button Add a button to the section to redirect customers. 2. Location & Setup To add & set up the Video Hero 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: Video hero (#number of variant)". 3. Highlight Features Video background: Use a video as the main visual to create an eye-catching first impression. Call-to-action buttons: Insert button to guide customers to key pages or promotions. Overlay & styling: Apply overlay color and adjust opacity for better text readability. 4. Common Use Cases 🤔 How to set up Video hero section? STEP 1: Add the section Add Video hero section to your desired position. STEP 2: Set up section Click on the section to open its settings panel: Enter the Heading for the section. Adjust its size, tag, and alignment. You can wrap some heading text into [] to highlight it. Choose the highlight style at Marker type. Add some Text for further description. Upload Video or embed one from URL. Besides, if you want to add a button to the video hero, add a Button block to set it up. STEP 3: Set up layout & styles Customize the height of the video at Desktop height and Mobile height. (Optional) Add an overlay layer to your video, adjust its color and opacity. Change the position of the text & button on the desktop at Desktop position. At Mobile/Desktop layout, choose block width, spacing, and padding... Choose colors for block elements. STEP 4: Click "Save" when done. 5. Layout Recommendations The Video Hero section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Video hero #1 Check out demo here. 📂 Video hero #2 Check out demo here. 📂 Video hero #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Featured collection

The Featured collection section serves as a spotlight for the most notable collections on the site. It provides visitors with curated selections or complete collections, enabling easy exploration of products aligned with their interests. 1. Section Components Section Featured Collection Showcase notable collections on the site. Available block Collection Add a separate collection to the section. 2. Location & Setup To add & set up the Featured Collection 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: Featured collection (#number of variant)". 3. Highlight Features Multiple Layouts: Choose from 4 pre-designed layouts (#1–#4). Up to 3 Collections: Add and display up to 3 collections in one section. Carousel Option: Enable swipeable carousels on desktop and mobile for smoother navigation. Title Card: Add a banner with image or video, heading, text, and button to highlight promotions or sales. 4. Common Use Cases 🤔 How to set up Featured collection section? STEP 1: Add the section Add Featured collection section to your desired position. STEP 2: Add collections Under Featured collection, you can add up to 3 Collection blocks. Click on the block to set up: Select the Collection to be featured. Enter a custom Description for the collection if needed. Choose the content height. You can toggle Show vendor to display vendor/brand name of the product. STEP 3: Repeat STEP 2 to set up other Collection blocks. STEP 4: Style the section's general elements Click on the Featured collection section to open the settings panel: Enter the Heading for the section. Adjust its size, tag, and alignment. At Mobile/Desktop layout, choose the number of rows, number of products per row, block width, spacing, and padding... Choose colors for block elements. STEP 5: Click "Save" when done. 🤔 How to enable carousel for the section? To make the section swipe in a carousel layout, follow this: STEP 1: Click on Featured collection section to open its settings panel STEP 2: Scroll down to the Carousel setting group, then: Toggle "Enable carousel on desktop" to display the section in a carousel format on desktop devices. Choose the Carousel style between: Horizontal: Products slide left–right. Vertical: Products slide top–bottom. Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices for improved navigation. Turn on "Show navigation" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Tick "Auto-play" to automatically rotate through the items in the carousel. Set the "Change bar every" interval to determine how frequently the carousel items will automatically change. STEP 3: Click "Save" when done. 🤔 How to add a Title card to the section? The title card is used to provide additional information about promotions, sales, or details regarding the selected collection. To set up: STEP 1: Click on the Collection block that you want to add the title card. STEP 2: Enable the title card Scroll down to Title card settings group: Enable title card: Tick to add an image/or video with a title and description beside the product cards. Title card position: Desktop: Choose Left or Right alignment. Mobile: Automatically displays above or below the product cards, respectively, depending on the chosen alignment on desktop. Title card link: Enter a link that the customer will navigate when clicking on the title card. (Sticky behavior: When enabled, the title card remains fixed in its position, even when scrolling through product cards or enabling the carousel feature on all devices.) STEP 3: Add title card content Still at Title card settings group: Card image/Video: Add an image or a video for the title card Add other settings used to set up the title card content, such as Heading, Text, Button, etc. Enable text overlay: Tick the box to make the text and button appear on top of the image. Overlay opacity: Change the opacity of the overlay. Image ratio: Change the image ratio of the title card. Replace card with featured product: Select a product to replace the whole title card. STEP 4: Click "Save" when done. 🤔 Advanced customizations: Product cards To customize the Product cards' look, configure this: STEP 1: Click on the Featured collections to open its settings panel, scroll down to Product cards settings group. STEP 2: Layout & spacing settings Adjust the product title size at Title product card. Adjust side padding for Desktop and Mobile devices. Choose Content alignment. STEP 3: Image & media settings Choose Image ratio and effects when hovering over product images at Image hover effect. At Number of additional images, choose how many extra images the card can reference. Choose background color for the cards. STEP 4: Navigation settings Enable Next/Previous arrows and choose color for navigation arrows. Choose how long each slide automatically swipes. STEP 5: Click "Save" when done. 5. Layout Recommendations The Featured Collection section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Featured collection #1 Check out demo here. 📂 Featured collection #2 Check out demo here. 📂 Featured collection #3 Check out demo here. 📂 Featured collection #4 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

Collage collection

A Collage collection is a series of collections arranged in a creative and visually appealing layout, capturing the attention of your audience and conveying information effectively through visual storytelling. 1. Section Components Section Collage Collection Arrange a list of collections in a creative and visually appealing layout. Available block Collection Add a separate collection to the section. 2. Location & Setup To add & set up the Collage Collection 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: Collage collection (#number of variant)". 3. Highlight Features Creative layout: Arrange collections in unique collage styles to grab attention and make browsing more engaging. Flexible media display: Replace default collection images with custom ones for better branding and storytelling. Customizable sizing: Adjust the width, height, and spacing of each block for a tailored look. 4. Common Use Cases 🤔 How to set up Collage collection section? STEP 1: Add the section Add Collage collection section to your desired position. STEP 2: Set up Collection block Under Rich text, you can add multiple blocks (as shown above) to freely set up the section. Click on the block to open its settings panel: Choose a Collection from your store to display. (Optional) Upload an Image to replace the default collection image. Enter Title to show on the collection media. Repeat this step to set up other Collection blocks. STEP 3: Set up the section Click on the Collage collection section to open the settings panel: Enter the Heading for the section. Adjust its size, tag, and alignment. Choose the Edges of the collection media. At Mobile/Desktop layout, choose block width, spacing, and padding... Choose colors for block elements. STEP 4: Click "Save" when done. 🤔 How to modify the height and width of the section and each column block? STEP 1: Section setting Click on the Collage collection section to open its settings panel: Adjust the number of columns displayed on desktop devices. Set the spacing between blocks within the section. Define the height of each row of media within the section. For mobile layout, the settings are similar to desktop layout, but the number of columns is limited to 1-2 columns. STEP 2: Block setting Configure the layout settings for each individual block within the section. Set the number of columns wide for the block. Specify the number of rows tall for the block. STEP 3: Click "Save" when done. 5. Layout Recommendations The Collage Collection section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Collage collection #1 Check out demo here. 📂 Collage collection #2 Check out demo here. 📂 Collage collection #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .  

OT: Theme Sections - Sections

Rich text

The Rich text refers to a type of content format that allows for more flexibility and visual appeal compared to plain text. It enables store owners to incorporate various elements such as headings, paragraphs, images, buttons, and more within a single text block. 1. Section Components Section Rich text Add text with other elements like heading, media, button… Available blocks Heading Add a heading to the section Caption Add a caption to the section Text Add main text to the section Media Add image/video to the section Button Add up to 2 buttons to the section 2. Location & Setup To add & set up the Rich text 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: Rich text (#number of variant)". 3. Highlight Features Flexible content setup: Combine headings, captions, text, media, and buttons in one section. Interactive layout: Use the "Default content height" + "Read more" option for long text. Responsive layouts: Choose from 3 layout styles to fit both desktop and mobile screens. 4. Common Use Cases 🤔 How to set up Rich text section? STEP 1: Add the section Add Rich text section to your desired position. STEP 2: Set up blocks Under Rich text, you can add multiple blocks (as shown above) to freely set up the section. Click on the block to open its settings panel: Block How to set up? Heading Enter Heading, then adjust its size and choose tags for SEO purposes.Tip: Wrap the text between [ ] to add heading highlights. Text • Enter the main content for the section.• Choose Number of lines shown by default to control how much content is displayed before the "Read more" button is clicked. Caption • Add a tagline or caption for the section.• Adjust the size and style of the text. Media • Upload images or embed videos.• If you want to add a video, paste video URLs from YouTube or Vimeo.• Enable video autoplay if desired.• Adjust Media size to your preference. Button • Add up to 2 buttons to redirect customers.• Set up button label, style, and color. STEP 3: Click "Save" when done. 5. Layout Recommendations The Rich text section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Rich text #1 Check out demo here. 📂 Rich text #2 Check out demo here. 📂 Rich text #3 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Multi columns with images

The Multi columns with images is a layout that divides a section into multiple columns, each containing a combination of text and images. It's an effective way to highlight key information, showcase features, services, or products, and create a balanced visual experience. 1. Section Components Section Multi columns with images Divide a section into multiple columns, each showcasing images and content. Available blocks Column Add a separate column together with the image and content. 2. Location & Setup To add & set up the Multi column with images 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: Multi columns (#number of variant)". 3. Highlight Features Flexible column layout: Add as many columns as you need to showcase products, services, or features. Responsive layouts: Control the number of columns displayed on desktop versus mobile. Carousel option: Enable carousel with swipe, navigation arrows, and autoplay for a smoother browsing experience. 4. Common Use Cases 🤔 How to set up Multi columns with images section? STEP 1: Add the section Add Multi columns section to your desired position. STEP 2: Add and set up Column blocks Under Multi columns section, you can add Column blocks to set up images and content. Click on the block to open its settings panel: Upload Images. Enter Heading, Subheading, and further Text content. Add a button to redirect customers. Repeat this step to set up other Column blocks. STEP 3: Style the layout Click on the Multi columns section to open the settings panel: Enter the Heading for the section. Adjust its size, tag, and alignment. Choose the Image style, adjust its corner. At Mobile/Desktop layout, choose the number of columns, block width, spacing, and padding... Choose colors for block elements. STEP 4: Click "Save" when done. 🤔 How to enable carousel for the section? To make the section swipe in a carousel layout, follow this: STEP 1: Click on Multi columns section to open its setting panel STEP 2: Scroll down to the Carousel setting group, then: Toggle "Enable carousel on desktop" to display the section in a carousel format on desktop devices. Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices for improved navigation. Turn on "Show navigation" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Tick "Auto-play" to automatically rotate through the items in the carousel. Set the "Change bar every" interval to determine how frequently the carousel items will automatically change. STEP 3: Click "Save" when done. 5. Layout Recommendations The Multi columns with images section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Multi columns with images #1 Check out demo here. 📂 Multi columns with images #2 Check out demo here. 📂 Multi columns with images #3 Check out demo here. 📂 Multi columns with images #4 Check out demo here. 📂 Multi columns with images #5 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

FAQ

An FAQ section is dedicated to letting merchants provide answers to common questions that users may have about a product, service, or topic. It typically includes a list of questions along with the store owner's corresponding answers, organized in a clear and user-friendly format. 1. Section Components Section FAQ Provide answers to common questions regarding products/services in an accordion look. Available block Frequently asked question Used to show a single question and answer. 2. Location & Setup To add & set up the FAQ 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: FAQ (#number of variant)". 3. Highlight Features Expandable format: Expandable and collapsible answers to save space. Rich content support: Use text, links, or icons inside each answer. Various layouts: Choose from 3 available built-in layouts. 4. Common Use Cases 🤔 How to add questions and answers to the FAQ section? STEP 1: Add the section Add the FAQ section. STEP 2: Add questions and answers By default, there are 5 Frequently asked question blocks within the FAQ section. You can add more by clicking on "Add block". Click on one Frequently asked question block to open the settings panel. You can change: Icon with 3 options: Select an icon from the drop-down list or choose None to hide it. Add a custom SVG icon by pasting its code. Question: Fill in the question Answer: Fill in the corresponding answer. STEP 3: Click "Save" when done. 🤔 How to customize the FAQ section? STEP 1: Click on the FAQ section to open the settings panel STEP 2: Edit the content Enter a Heading for the whole FAQ area and adjust its size, alignment, or SEO tag. Toggle "Rows secondary background" to enable background for the FAQ rows. Tick "Collapsible" to hide the answer to a question, and it will expand on click. (Optional) Enable "View all" button and paste the button link. Choose color for the section elements such as background, text… STEP 3: Upload an image to the section Still under the FAQ setting panel, go to Image and upload an image. Choose the edge style for the image. STEP 4: Customize the desktop/mobile layout Under Desktop layout 🖥️ and Mobile layout 📱 setting panel: Choose the number of FAQ columns (only on Desktop layout 🖥️) 1 column 2 columns Choose the Image alignment Choose to show section divider, adjust padding, and make the section full-width. STEP 5: Click "Save" when done. 5. Layout Recommendations The FAQ section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 FAQ #1 Check out demo here. 📂 FAQ #2 Check out demo here. 📂 FAQ #3 Check out demo here. 6. Support Information Need help? Contact support@omnithemes.com or visit Omni Themes Support .

OT: Theme Sections - Sections

Slideshow

The Slideshow dynamically displays multiple images or content in sequence, commonly used to grab attention, highlight promotions, or tell a visual story. 1. Section Components Section Slideshow Displays multiple images or content in sequence. Available blocks Slide Add an individual image/video slide to the section. Media with Text Add a clean text-and-image split design. 2. Location & Setup To add & set up the 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: Slideshow (#number of variant)". 3. Highlight Features Dynamic image & video display: Showcase multiple images or videos in sequence with carousel effects to grab attention and tell your brand story. Flexible layouts (5 variants): Choose from 5 ready-made slideshow layouts, each designed for different storytelling and promotional needs. Advanced layout options: Use "Media with Text" slides to highlight products or stories with a clean text-and-image split design. 4. Common Use Cases 🤔 How to set up Slideshow? STEP 1: Add the section Add Slideshow section to your desired position. STEP 2: Add & customize Slide blocks Under Slideshow section, add Slide blocks and open its settings panel to set up: Upload a high-quality Image optimized for desktop and mobile. Add Heading, Subheading, and optional descriptive text. Add a Side link, so when users click on the banner, it will navigate to that link. Add up to two buttons per slide, customizing labels, links, and styles. Adjust the Desktop and Mobile look, including slideshow position, content alignment, and so on. STEP 3: Click "Save". 🤔 How to add carousel animation and pagination to your Slideshow? STEP 1: Click on the Slideshow section to open its settings panel STEP 2: Adjust the setting, depending on your need Setting name Purpose Enable auto-play Turn on to set a slide transition autoplay. Change slides every Adjust the duration between each slide change (from 5-10s) Next/Previous Arrows Enable to add left and right arrows to the slideshow. Pagination Choose your desired pagination style from the list: None: No pagination indicators. Dots: Simple dot indicators for slide navigation. Bars: Bars showing slide progress. Transition style Choose a Transition style (Slide or Fade). STEP 3: Click "Save". 🤔 How to use videos to display in Slideshow? To showcase videos in Slideshow, follow this: STEP 1: Add the section Add OT: Slideshow #5 section to your desired position. STEP 2: Add & customize Slide blocks Under OT: Slideshow #5 section, add Slide blocks and open its settings panel to set up: Upload a video under Shopify-hosted video or embed a video from URL. Adjust other block elements such as headings, buttons, and layouts. STEP 3: Click "Save" 🤔 How to create a Media with Text slide layout? Use this layout to highlight a product or story with text displayed separately from the image for a clean and modern look. STEP 1: Add a new Media with Text block to the OT: Slideshow #5 section. STEP 2: Upload the main Image for the slide. (Add a link to the Image link field, so when users click on the banner, it will navigate to that link.) STEP 3: Customize the content Add a Subheading, Heading, and optional text. Add up to two buttons with labels, links, and styles (Primary, Secondary, or Text link). STEP 4: Set up the layout Choose the look for your Media with text slideshow on both Desktop and Mobile under the Layout setting group. STEP 5: Click "Save". 5. Layout Recommendations The Slideshow section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Slideshow #1 Check out demo here. 📂 Slideshow #2 Check out demo here. 📂 Slideshow #3 Check out demo here. 📂 Slideshow #4 Check out demo here. 📂 Slideshow #5 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Media with text

The Media with text typically consists of one or more media elements, such as images or videos, alongside text content. The media elements serve to capture attention, evoke emotions, or showcase products, while the text content provides explanations, descriptions, or calls to action. 1. Section Components Section Media with text Showcase one or more media elements, such as images or videos, alongside text content. Available blocks Heading Add a heading for the section. Button Add a button to redirect customers. 2. Location & Setup To add & set up the Media with text 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: Media with text (#number of variant)". 3. Highlight Features 🖼️ Flexible media support: Add up to 2 images, upload your own video, or embed videos from a URL. 📱 Responsive layouts: Individually adjust desktop and mobile layouts, including image alignment, section width, and padding. 🎨 4 design variants: Pick from 4 pre-designed layouts tailored for different storytelling and product highlights. 4. Common Use Cases 🤔 How to set up Media with text? STEP 1: Add the section Add Media with text section to your desired position. STEP 2: Add media Click on Media with text to open its settings panel: Upload images (up to 2 images). Upload your own video or embed from URL. STEP 3: Style the media Choose image height/width Choose Image style (only applicable for 2 images) Normal Stacked Toggle "Add spacing between images". STEP 4: Style the desktop/mobile layout look Scroll down to Desktop layout and Mobile layout: Choose Image alignment for desktop and mobile layout. Adjust section width and padding. STEP 5: Set up heading and button Under Media with text section, you can add Heading and Button blocks to set up these elements for the section: With the Heading block, you can enter Heading and description, adjust heading size, or choose number of lines shown. With the Button block, you can set up a button by entering Button label, paste Button link, choose its style and color. STEP 6: Click "Save" and preview. 5. Layout Recommendations The Media with text section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Media with text #1 Check out demo here. 📂 Media with text #2 Check out demo here. 📂 Media with text #3 Check out demo here. 📂 Media with text #4 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support .

OT: Theme Sections - Sections

Testimonials

Testimonials are sections that contain statements or endorsements given by customers, clients, or users of a product or service, expressing their satisfaction and positive experiences. They serve as social proof, highlighting the value and benefits of what you offer, and can be presented in various formats, including written text, image, and star ratings. 1. Section Components Section Testimonials Display testimonials given by customers of a product or service. Available block Testimonial Add an individual testimonial to the section. 2. Location & Setup To add & set up the Testimonials 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: Testimonials (#number of variant)". 3. Highlight Features Flexible customization options: Adjust headings, fonts, sizes, borders, images and colors; fine-tune layouts for both desktop and mobile. Carousel support: Add arrow navigation and pagination for a smooth browsing experience, especially on mobile. Multiple layout variants: Choose from 5 pre-built Testimonials styles, offering flexibility for different store designs. 4. Common Use Cases 🤔 How to set up Testimonials? STEP 1: Add the section Add Testimonials section to your desired position. STEP 2: Add & customize Testimonial blocks Under Testimonials section, add Testimonial blocks and open its settings panel to set up: Icon: Choose from preset icons (e.g., 5 stars) or add a custom SVG code for your own icon. Title: Enter a heading for the testimonial (e.g., Happy Customers, What People Say). Text: Add the customer's review or feedback. Image (optional): Upload or select a reviewer's photo or relevant image. Caption: Add the reviewer's name or role (e.g., Jane Doe, Verified Buyer). Additional Text: Provide extra details such as location, order reference, or product link. STEP 3: Click "Save" and preview. 🤔 How to customize the look of Testimonials section? STEP 1: Open the section Click on the Testimonials settings panel. STEP 2: Customize general elements Enter Heading for the section. Adjust Heading size and Heading tag. Choose the Text alignment (Left, Center, or Right) STEP 3: Choose testimonial view At Testimonial items view, choose how testimonials are displayed: 1 column 2 columns 3 columns 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: Customize Color for the section In the Color setting group, choose colors for section elements such as background, heading, text, border… STEP 6: Click "Save" when done. 🤔 How to customize the images on Testimonials section? To adjust images the Testimonials section, follow this: STEP 1: Open the section Click on the Testimonials settings panel. STEP 2: Toggle "Show image" to display the image (you need to upload the image to the Testimonial block first). Choose Image alignment and Image style (Round or Square). Also, you can adjust image desktop height with square images. Adjust the corner of the image at Corner radius. Enable Lazy-load images for better site performance (Images will only load when they are about to appear in the visitor's viewport). STEP 3: Click "Save" when done. 🤔 How to enable carousel for the section? STEP 1: Click on Testimonials to open its settings panel. STEP 2: Toggle "Enable auto-play" and set the time for testimonial blocks to slide at Change slides every. Choose to Show navigation arrows and Show pagination. STEP 3: Click "Save" when done. 5. Layout Recommendations The Testimonials section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Testimonials #1 Check out demo here. 📂 Testimonials #2 Check out demo here. 📂 Testimonials #3 Check out demo here. 📂 Testimonials #4 Check out demo here. 📂 Testimonials #5 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.

OT: Theme Sections - Sections

Scrolling image

The Scrolling image section is a dynamic and eye-catching way to showcase images using glide smoothly across the screen. It is designed to capture attention, highlight collections, products, and make browsing more interactive for customers. 1. Section Components Section Scrolling image Display products, collections, or other content in a sliding image format. Available block Image Add an individual image and a link to redirect customers. 2. Location & Setup To add & set up the Scrolling image 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 image (#number of variant)". 3. Highlight Features Flexible customization options: Adjust headings, fonts, sizes, borders, and colors; fine-tune layouts for both desktop and mobile. Smooth scrolling effects – Control speed, direction, and hover-pause for an interactive browsing experience. Multiple layout variants: Choose from 5 pre-built Scrolling image styles, offering versatility for different store designs. 4. Common Use Cases 🤔 How to set up Scrolling image section? STEP 1: Add the section Add Scrolling image section to your desired position. STEP 2: Add & customize Image blocks Under Scrolling image section, add Image blocks and open its settings panel: Select an Image for the block. Paste a URL to redirect customers when clicking on the image. Enter an Image title. 💡 Tip: Here, you can feature product/collection images and paste links to redirect customers to the desired product/collection. STEP 3: Customize general elements Click on the Scrolling image settings panel, then you can: Enter the Heading of the section. Adjust Heading size, Heading tag, Heading font. Add some Text for further description about the section. You can adjust Text size and Font as well. STEP 4: Click "Save" and preview. 🤔 How to customize the look of section? To modify the look of the section, follow this: STEP 1: Click on the Scrolling image settings panel. STEP 2: Customize the Image elements Scroll down to Images setting group: Choose the Image title position, size and alignment. Adjust border for the image at Corner radius. Corner radius: 0% Corner radius: 50% Corner radius: 100% Choose Image ratio (1:1, 16:9, 4:3…). STEP 3: Customize Desktop/Mobile layout In the Desktop layout and Mobile layout setting groups: Adjust image width. Choose section width. Enable section divider if you wish. Adjust padding. STEP 4: Customize Color for the section In the Color setting group, choose colors for section elements such as section background, heading, text, border… STEP 5: Click "Save" when done. 🤔 How to customize scrolling effect for the section? STEP 1: Click on Scrolling image to open its settings panel. STEP 2: Scroll down to the Scrolling setting group, then: Choose the position of navigation arrows at Show navigation arrows. (Optional) Turn on "Show scroll border" to border the scrolling area. Don't forget to choose color for Line and border. Choose the scrolling Speed (From 6-50s) and Direction. Toggle "Pause on hover" to stop scrolling when hovering on the section. STEP 3: Click "Save" when done. 5. Layout Recommendations The Scrolling image section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Scrolling image #1 Check out demo here. 📂 Scrolling image #2 Check out demo here. 📂 Scrolling image #3 Check out demo here. 📂 Scrolling image #4 Check out demo here. 📂 Scrolling image #5 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.

OT: Theme Sections - Sections

Circle menu

A Circle Menu section is a type of visual navigation that presents products, collections, or other content in a circular or "bubble" format. It's a visually engaging and interactive component designed to improve the user experience and make it easier for customers to find what they're looking for. 1. Section Components Section Circle menu Display products, collections, or other content in a circular format. Available block Menu item Add individual product, collection or content to the section. 2. Location & Setup To add & set up the Circle menu 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: Circle menu (#number of variant)". 3. Highlight Features Flexible customization options: Adjust headings, fonts, sizes, borders, and colors; fine-tune layouts for both desktop and mobile. Carousel support: Add arrow navigation and pagination for a smooth browsing experience, especially on mobile. Multiple layout variants: Choose from 5 pre-built Circle menu styles (#1 – #4 and default), offering versatility for different store designs. 4. Common Use Cases 🤔 How to set up Circle menu? STEP 1: Add the section Add Circle menu section to your desired position. STEP 2: Add & customize Menu item blocks Under Circle menu section, add Menu item blocks and open its settings panel: Select an Image for the block item. Paste a URL to redirect customers when clicking on the item. Enter a Title for the item. STEP 3: Customize general elements Click on the Circle menu settings panel, then you can: Put some words of the Heading into the square brackets [ ] for text highlight effect. Adjust Heading size, Heading tag, Heading font. Add some Text for further description about the section. STEP 4: Click "Save" and preview. 🤔 How to customize the look of Circle menu section? To modify the look of the section, follow this: STEP 1: Click on the Circle menu settings panel. STEP 2: Customize the Menu item elements: Scroll down to Menu item setting group: Choose the font, size, height, alignment, and spacing of the title on each menu item. Toggle "Enable border" and adjust its thickness: Enable border: OFF Enable border: ON     Adjust Image & border spacing (the menu item image and border) on desktop and mobile. STEP 3: Customize Desktop/Mobile layout: In the Desktop layout and Mobile layout setting groups: Adjust item size and spacing. Choose block width and section width. Adjust padding. STEP 4: Customize Color for the section: In the Color setting group, choose colors for section elements such as heading, text, border… STEP 5: Click "Save" when done. 🤔 How to customize carousel settings for the section? STEP 1: Click on Circle menu to open its settings panel. STEP 2: Scroll down to the Carousel setting group, then: Choose the position of navigation arrows at Show navigation arrows. Select the size for the arrow button. (Optional) Turn on section pagination (for mobile). STEP 3: Click "Save" when done. 🤔 How to central align all the circles?  STEP 1: Click on Circle menu to open its settings panel. STEP 2: Scroll down to the Content Item setting, then select Center.  STEP 3: Click "Save" when done. 5. Layout Recommendations The Circle menu section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Circle menu Check out demo here. 📂 Circle menu #1 Check out demo here. 📂 Circle menu #2 Check out demo here. 📂 Circle menu #3 Check out demo here. 📂 Circle menu #4 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.  

OT: Theme Sections - Sections

Promotion banner

The Promotion banner section creates eye-catching visual elements to highlight special offers, promotions, or events with attention-grabbing graphics, text, and interactive elements. It serves as a powerful tool for brand reinforcement and user engagement, directing visitors to specific actions or pages through clickable elements. 1. Section Components Section Promotion Banner Displays promotional content with multiple images, text, and interactive elements. Available block Text Show headings, subheadings, and promotional descriptions. Buttons Create up to two call-to-action buttons with custom styling. Banner menu Show featured collections and navigation options. Countdown timer Show urgency with standard or evergreen countdown timers. 2. Location & Setup To add & set up the Promotion banner 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: Promotion banner (#number of variant)". 3. Highlight Features Multi-Image Support: Up to 3 desktop images and 1 mobile image Hero Section Mode: Optimized loading as the main page introduction Visual Customization: Overlay opacity, positioning, and alignment controls Navigation Integration: Menu display for custom links on the banner 4. Common Use Cases 🤔 How to create a basic promotion banner quickly? STEP 1: Add Promotion banner section to your desired position STEP 2: In the Promotional banner settings panel, upload 1-3 desktop images and 1 mobile image. Set the Banner link for overall image clickability. STEP 3: Under the section, add a Text block and enter the content into Heading, Subheading, and Text (for description). Some customization options for your Text block: Put some words of the Heading into the square brackets [ ] for text highlight effect. Add a color for the Content box (light/dark) and change its type to be Round or Square in the Content box type. Turn on Add frame to show a border around the box.   STEP 4: Under the section, add a Buttons block. You can set up to 2 buttons by entering the label and link. STEP 5: In the Promotional banner setting panel, adjust the Image overlay opacity to make your content easy to read. STEP 6: Click "Save" and preview. 🤔 How to create a flash sale banner with a countdown timer? STEP 1: Set up the basics of the banner, following the steps in the use case "How to create a basic promotion banner quickly?" above. STEP 2: Under the Promotion Banner section, add a Countdown Timer block. STEP 3: Set up the countdown timer To set it up: Choose the right Time zone. Set the exact time when the countdown should finish. STEP 4: Click "Save" when done. 🤔 How to customize the layout of the countdown timer? The countdown timer block might be a little tricky to style. So here is a cheatsheet explaining how it works for you: In the Countdown timer block setting panel, find the Timer style setting group, and you can see the options below: Timer style:⚠️ Note: This setting only works when you've already set a Background color for the timer. Square Round     Line and border: None Border     Overlay opacity & Colors:⚠️ Note: The Overlay opacity works with the Background color setting inside the Colors group. Overlay opacity = 0% Overlay opacity = 100%     🤔 How to show custom links on the promotion banner? You can display links to other important pages on the announcement bar just by doing these steps: STEP 1: Set up the basics of the banner, following the steps in the use case "How to create a basic promotion banner quickly?" above. STEP 2: Preparing a menu in the Shopify admin In the Shopify admin, click on the Content tab > Menu > "Create menu". Give the menu a Name, and click "Add menu items" to assign menu labels and links > click "Save". 💡 Note: Only the first level of your menu will be shown on the promotional banner. STEP 3: Add the Banner menu block under the Promotional banner section. STEP 4: In the Menu setting, click "Select" and choose the menu you created in step 2. STEP 5: Adjust the Menu text size, reorder the block position, and turn on Display on mobile if needed. STEP 6: Click "Save" when done. 5. Layout Recommendations The Promotion banner section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Promotion banner #1 Check out demo here. 📂 Promotion banner #2 Check out demo here. 📂 Promotion banner #3 Check out demo here. 📂 Promotion banner #4 Check out demo here. 📂 Promotion banner #5 Check out demo here. 6. Support Information  Need help? Contact our support team at Omni Themes Support.