OT: Theme Sections - Sections
OT: Theme Sections - Sections
OT: Theme Sections - Sections
Testimonials #1 - #2 - #3 - #4 - #5
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 #1 - #2 - #3 - #4 - #5
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
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 #1 - #2 - #3 - #4 - #5
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.
OT: Theme Sections - Sections
Scrolling promotion #1 - #2 - #3 - #4
The Scrolling promotion section creates a dynamic, eye-catching banner that moves across your store to showcase promotions, announcements, and calls-to-action. 1. Section Components Section Scrolling Promotion Create a moving banner that displays various promotional elements with customizable styling and animation effects. 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 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: Scrolling banner (#number of variant)". 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 Dual Mode Styling: Separate colors for light and dark themes 4. Common Use Cases 🤔 How to set up the Scrolling promotion? If you don't know where to start to set up this section, just follow this: STEP 1: Add the Scrolling promotion section to your theme. 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 banner. Style the text by toggling Use custom font and choose Custom font. Adjust Text size, Text color, or add Text link. 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. Choose Colors for button elements. STEP 4: Adjust the scrolling effect: Click on the Scrolling promotion section, then find the Scrolling setting group. You can change the Speed, Direction, and Pause on hover. STEP 5: Click "Save" when done. 🤔 How to customize the Scrolling promotion section's look? To customize the look of the section, do this: STEP 1: Click on the Scrolling promotion 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 promotion section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Scrolling promotion #1 Check out demo here. 📂 Scrolling promotion #2 Check out demo here. 📂 Scrolling promotion #3 Check out demo here. 📂 Scrolling promotion #4 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
OT: Theme Sections - Sections
A Spin the Wheel is an interactive gamification tool that engages your customers with a chance to win discounts, free shipping, or other prizes in exchange for their email address. This section is a powerful lead-generation tool that turns website visitors into loyal subscribers. 1. Section Components Section Spin the Wheel Add a customizable wheel to your website that offers a chance to win prizes. Available block Heading Add or edit the main title for the Spin the Wheel section. Text Add a sub-heading or descriptive text to provide more context. Email form A customizable form to collect customer data like email addresses. Wheel item Define the different prizes or discounts for each segment of the wheel. Thank you popup Display a customizable popup after a successful user action, like a form submission. 2. Location & Setup To add & set up the Spin The Wheel section: Open the Shopify Theme Editor (Online Store > Themes > Customize) Decide where you want to place the new section in Template (for single page only) or Footer/Overlay (for the whole site). Click "Add Section". Select "OT: Spin The Wheel". 3. Highlight Features Customizable Design: Change colors, adjust mobile sizes, and set the position to better engage with customers. Minimal Popup: Show a small, sticky message with delayed appearance or a reappearing setting to ensure customer engagement in all circumstances. Email Capture: Automatically add new subscribers to your Shopify mailing list. Flexible Placement: Choose to display the wheel as a standalone section on a page or as a timed or exit-intent pop-up. 4. Common Use Cases 🤔 How to set up the Spin The Wheel? To set up the Spin The Wheel section, please follow these steps: STEP 1: Add and set up blocks Under the Spin The Wheel section, you can add blocks to incorporate various types of content. OT: Theme Section app supports four types of blocks: Heading block: Customize the content of the Heading and Subheading and their colors to match your brand styles and key message. Text block: Add your message or description about the promotion and offers, or guide how to play the wheel. Email form block: Adjust colors, button styles or event custom icons as your preference. Wheel item block: Add a label with a heading, text, and a coupon code, all with a custom color to match your store's campaigns. Thank you popup: Thank customers and provide detailed information about what they've won. STEP 2: Click "Save" when done. 🤔 How to set up Display rules The Display rules setting contains many options for Wheel, including: 1. Show for guests only: Displays the popup exclusively to new visitors or those not logged into a customer account, ideal for lead generation. 2. Show on mobile: Recommended for better accessibility and to capture leads from all device types. 3. Delay: Sets the number of seconds (0-5) a visitor must be on a page before the popup appears, preventing it from interrupting their initial browsing. 4. Reappear after: Controls how long (in days) a visitor must wait before the popup can be shown to them again after they have closed it. Setting it to 0 will show the popup on every visit. 🤔 How to set up Minimal Popup? The Minimal Popup displays a small, sticky message at the bottom of the screen instead of a full-size pop-up. Clicking the message opens the full pop-up, providing a less intrusive way to engage customers. 1. Minimal Image: The image displayed in the small, sticky popup (e.g., a wheel or "Spin to Win" icon). 2. Enable on desktop/mobile: Toggles the minimal popup on or off for desktop and mobile devices. 3. Default style on desktop/mobile: Sets the default view to either the full popup or the minimal sticky message. 4. Minimal popup position: Choose to display the minimal popup on the bottom-left or bottom-right of the screen. 5. Layout Recommendations The appearance of the Spin the Wheel section will differ mainly based on how you set up the colors and promotions. If you need support with setting up the layouts, please don't hesitate to chat with us! 📂 Basic color Check out demo here. 📂 Valentine palette Check out demo here. 📂 Colorful palette Check out demo here. 📂 Back to school palette Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
OT: Theme Sections - Sections
Media gallery #Image - #2 - #3 - #4 - #5 - #6 - #7 - #8
The Media gallery is a feature used to showcase various types of media such as products, promotional media, buyer review, or social images in various flexible layouts on an e-commerce website. 1. Section Components Section Media gallery Showcase various types of media regarding products or promotions. Available block Media Add individual media to the section. 2. Location & Setup To add & set up the Media gallery 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 gallery (#number of variant)”. 3. Highlight Features Versatile media support: Add high-quality images or videos for showcasing products, promos, or customer reviews. Custom layout & style: Freely control the size, alignment, and layout of each media block. Mobile-friendly carousel: Enable swipe on mobile for better navigation. 4. Common Use Cases 🤔 How to set up the Media gallery section? To set up the Media gallery section, please follow these steps: STEP 1: Add media Under the Media gallery section, add Media blocks. You can add multiple Media blocks, each representing a single media in the section. STEP 2: Set up Media blocks With each Media block, you can add an image or a video. Click on Media block to open its setting panel: Image: Upload an Image from your library or free resources. Enter a Link for users to be redirected to when clicking the image. Video: Select a Video from your store's data or embed one from YouTube or Vimeo by entering its URL. Choose whether to Enable video autoplay. Check the “Show sound control” box to enable the sound control feature, allowing customers to toggle sound on or off as needed. STEP 3: Set up the Media block’s look Still in the Media block setting group: Provide a Title for the media block. Choose an Icon for each block. Or you can custom icons, input your SVG code in the provided field. Then, adjust the Icon size. Enter the content to accompany the media, such as a description or caption. Adjust the Content alignment within the block (Left, Center, Right). Add a button to the media by providing Button label and Button link to redirect customers to the desired page. Choose the Colors for all elements of the block. STEP 4: Click “Save” when done. 🤔 How to modify the height and width of each Media block? To modify the height and width of each media block, follow these steps: STEP 1: Click on Collection list to open its setting panel STEP 2: Adjust the layout settings Click on the Media gallery section, scroll down to Desktop layout and Mobile layout setting group: For Desktop layout: 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. (Optional) Enable "Keep block ratio on different screen width" to maintain the block's aspect ratio across screen sizes, but disables the Row height setting. For Mobile layout, the settings are similar to desktop layout, but the Number of columns is limited to 1-2 columns. STEP 3: Customize the individual media block settings Click on the media block that you want to adjust the height and width, then scroll down to the Layout setting group: Choose the Number of columns wide to adjust the width of the media block. Select the Number of rows tall to adjust the height of the media block. 👉 For example, you can set the number of columns wide to 2 for a media block to display it with a specific size on your storefront. These settings allow you to control the dimensions of each media block according to your preferences and design requirements. STEP 4: Click “Save” when done. 🤔 How to show content outside of the media? To display content right on the media, you can use the Overlay feature in the media block settings. STEP 1: Click on the Media block you want to make the content overlay to open its settings panel. STEP 2: Scroll down to the Overlay content setting group, and: Toggle “Enable content overlay” to activate the feature. Choose the Overlay content position towards the media (Top, Center, Bottom). If you want the content to appear in the image, enable the content overlay option and adjust the overlay opacity (range from 0% to 100% - the higher the value, the darker the image is) and overlay content position settings accordingly. STEP 3: Click “Save” when done. 🤔 How to make Media gallery carousel? If you have more than three images in your media gallery section, a swipeable carousel can be a better way for customers to view them on mobile devices. To enable this feature: STEP 1: Click on the Media gallery section. STEP 2: Scroll down to the Mobile layout setting group and toggle Enable swipe on mobile. STEP 3: Click “Save” when done. 🤔 How to showcase Instagram media on your store? If you want to display your Instagram posts on your feed, use our FREE OT: Easy Instagram Feed app to make the process easier than ever. With our app, you can: Link to Instagram account and display Instagram posts (photos, videos, reels) in various layouts. Make posts shoppable to let customers buy instantly. Create drag-and-drop feed to make the perfect display in seconds. To install the app, follow this guide. 5. Layout Recommendations The Media gallery section has 8 appealing layouts available. If you want support to set up the layouts, don’t hesitate to chat with us! 📂 Media gallery Image Check out demo here. 📂 Media gallery #2 Check out demo here. 📂 Media gallery #3 Check out demo here. 📂 Media gallery #4 Check out demo here. 📂 Media gallery #5 Check out demo here. 📂 Media gallery #6 Check out demo here. 📂 Media gallery #7 Check out demo here. 📂 Media gallery #8 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
OT: Theme Sections - Sections
Collection list #1 - #2 - #3 - #4 - #5
A Collection list is a compilation of different collections, often displayed prominently on the homepage. Collection lists serve as a convenient way for users to explore a variety of product categories right from the homepage, streamlining the browsing experience and guiding them towards relevant products of interest. 1. Section Components Section Collection list Display different collections on the homepage. Available block Collection Add collections to showcase. Promotion Describe a promotion, make announcements, or welcome customers to your store. 2. Location & Setup To add & set up the Collection 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: Collection list (#number of variant)". 3. Highlight Features Flexible media display: Upload and customize various media types like images, videos, collections, and products. Carousel support: Carousel mode and navigation button for space-saving and better navigation. Promotional blocks: Highlight campaigns or special collections to drive conversions. Pre-designed layout options: Choose from 5 layout styles to match your store's aesthetic. 4. Common Use Cases 🤔 How to set up the Collection list? To set up the Collection list section, please follow these steps: STEP 1: Add collections Under the Collection list section, add Collection blocks. You can add multiple collection blocks, each representing a single collection in the section. STEP 2: Set up Collection blocks Click on Collection block to open its setting panel. Then you can: Select the Collection you want to display. Upload a Custom image to replace the default collection image. Enter the Title for the collection. STEP 3: Repeat the above steps for other blocks to add more collections. STEP 4: Click "Save" when done. 🤔 How to customize the Collection list section's look? To customize the section's look, follow these: STEP 1: Click on Collection list to open its setting panel STEP 2: Customize the section's look Enter the Heading for the entire section. Adjust the size and alignment of the section heading. Select the Heading tag for this section to enhance the SEO of the page. (Optional) Toggle to Show "View all" button. Choose the Background color for the section. In the Grid setting group, adjust the number of columns to display on desktop and mobile devices. STEP 3: Customize the section Desktop 🖥️/ Mobile 📱 layout Scroll down to Desktop/Mobile layout, you can: Enable section divider. Change the block spacing, section width, and top/bottom padding. STEP 4: Click "Save" when done. 🤔 How to customize the look of the collection card? To customize the collection cards' visuals, you should: STEP 1: Click on the Collection list to open its setting panel STEP 2: Scroll down to the Collection card setting group, then: If you want to… You can… Adjust your collection card image ratio: Choose the Image style: Adjust the title size of your collection card Slide left or right or enter a number to the box under the Title size section Adjust the title alignment Choose your desired alignment under Content alignment Make the title of the collection card appear on top of the image: Tick the box Enable text overlay Adjust the transparency background on top of the image to make the title more outstanding Slide left-right or enter a specific number to the box under Overlay opacity section Change the title position on the image Choose your desired position under the Content position section Note: This is only applicable when the Text overlay setting is enabled. STEP 3: Click "Save" when done. 🤔 How to enable carousel for the section? To make the section display blocks in a slide type, follow this: STEP 1: Click on Collection list to open its setting panel STEP 2: Scroll down to the Carousel setting group, then: Toggle "Enable carousel on desktop" to display the collection list in a carousel format on desktop devices. Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices. Turn on "Enable mobile navigation button" to show the navigation arrows on mobile. You can also set the color for elements of the navigation button. STEP 3: Click "Save" when done. 🤔 How to add a promotion or image in the collection list? The purpose of a promotion image is to provide information about featured collections, ongoing sale campaigns, or create focal points to attract customers' attention. It serves as a visual representation to highlight specific products or collections, enticing users to explore further and potentially make a purchase. To add a promotion or image in the collection list, follow these steps: STEP 1: Under Collection list section, click on "Add block" and select Promotion block. STEP 2: In the Promotion block setting panel, customize these: Choose to show Icon in the block, with 3 options: Use available icon, choose icon from the icon list or custom icon with SVG code. Adjust the Icon size if needed. Enter the Heading & the text of the section that will be displayed under the heading. Select an Image to set as the background of the promotion block and adjust its overlay opacity. Enter the label of the button. Leave empty if no button is required. Enter the link users will be redirected to when they click on the button. Adjust the alignment of all elements (heading, text, button) in the promotion block. In the Button design setting group, choose the button style, animation, and colors. STEP 3: Click "Save" when done. 5. Layout Recommendations The Collection list section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Collection list #1 Check out demo here. 📂 Collection list #2 Check out demo here. 📂 Collection list #3 Check out demo here. 📂 Collection list #4 Check out demo here. 📂 Collection list #5 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
