OT: Theme Sections - Sections
OT: Theme Sections - Sections
OT: Theme Sections - Sections
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 pop-up: Shows the results after the wheel is spun. The content of the results may include different discount codes, special offers, or a "better luck next time" message, depending on the settings in the "Wheel item" block. 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. 🤔 How to Manage Subscribers and Receive Email Notifications? Our sections use Shopify's default newsletter functionality. This means that when a customer submits their information, it's automatically recorded in the Customers tab of your Shopify admin. To receive automated notifications for new subscribers, you'll need to leverage a third-party email marketing app or a Shopify Flow automation. Please check out this blog for a detailed guide on how to manage your subscribers and set up automated email notifications for the Spin the wheel section. 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
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
The Footer is a section typically found at the bottom of a webpage. It provides valuable information and navigation options for users, often including links to important pages, social media icons, newsletter signup forms, copyright information, and other relevant details about the website or company. 1. Section Components Section Footer Provide key information and navigation links to your customers. Available block Menu Add one or more navigational menus. Image Insert a brand logo or decorative image. Custom text Add additional messages. Contact Show store address, phone number, email, or working hours. Newsletter Add a newsletter signup form. 2. Location & Setup To add & set up the Footer section: Open the Shopify Theme Editor (Online Store > Themes > Customize). Decide where you want to place the new section in Footer. Click “Add Section”. Select “OT: Footer (#number of variant)”. 3. Highlight Features Various content blocks: Add menus, images, contact info, newsletter, and custom text—fully flexible for layout. Localization & payment icons: Display language switcher, currency selector, payment icons, and social links to enhance global user experience and trust. Customizable branding area: Edit or hide Shopify credit, add custom copyright text. 4. Common Use Cases 🤔 How to show localization selector, payment icons, social icons on the Footer? STEP 1: Click on the Footer section to open its settings panel. STEP 2: To set up, scroll down to: ✍️ Language and Currency: Enable "Show language selector" to let users pick their preferred language. Enable "Show currency selector" to allow users to select their preferred currency. ✍️ Additional information: Choose “Show payment icons“ to display payment icons. Enable “Show social icons” to display social media icons. The copyright format includes the current year and store name. If left empty, only the default copyright is shown. Enter Additional copyright text if needed. Choose Additional information desktop layout: Horizontal Vertical STEP 3: Click “Save” when done. 🤔 How to add content to the footer? OT: Theme Sections app comprises 5 types of blocks in Footer section: Image, Menu, Contact, Custom text and Newsletter each offering distinct functionalities to enhance the footer's utility and aesthetics. To set up each block, please follow these steps: Image: STEP 1: Under the Footer section, add an Image block. STEP 2: Click on the Image block to open its settings panel: Click the "Select" button to choose an image from your library. Adjust the Image width using the scrollbar. Enter the Link where users will be redirected when they click the image. Adjust the Image alignment on large screen (Left, Center, Right). You can also edit Additional information and Block spacing. STEP 3: Click “Save” when done. Menu: STEP 1: Under the Footer section, add a Menu block. STEP 2: Click on the Menu block to open its settings panel: Enter the Heading for the menu. Choose the Menu you want to display. STEP 3: Click “Save” when done. Custom text: STEP 1: Under the Footer section, add a Custom text block. STEP 2: Click on the Custom text block to open its settings panel: Enter the Heading for the text block. Add Subtext below the heading. You can also add an Image for this block and adjust Image width. Optionally enable Show social icons or paste a Link into the box. STEP 3: Click “Save” when done. Newsletter: STEP 1: Under the Footer section, add a Newsletter block. STEP 2: Click on the Newsletter block to open its settings panel: Enter the Heading for the newsletter block. Add custom Text below the email form. To Show social icons footer-wide, enable social icons in section settings. STEP 3: Click “Save” when done. Contact: STEP 1: Under the Footer section, add a Contact block. STEP 2: Click on the Contact block to open its settings panel: In the Contact block, you can input up to three lines of text: For each line, you have the option to customize the Icon, add a Custom icon, include a Heading, insert Text, and provide a Text link. This allows for concise and informative contact information to be displayed in the footer section of the website. STEP 3: Click “Save” when done. For each block, except for the image block, there's a "Open by default on mobile footer" configuration. When enabled, the block will automatically appear in the footer on mobile devices. By following these steps, you can customize the footer of your website to include various types of content and provide important information to your visitors. 🤔 How to hide "Powered by Shopify" text? Hiding the Shopify attribution allows you to personalize your website fully, giving you complete control over the branding and messaging displayed to your audience. Please follow these steps: STEP 1: Click on the Footer section block to open its settings panel: STEP 2: Scroll down and untick the Show "Powered by Shopify" text setting. STEP 3: Click “Save” when done. 🤔 How to customize the Copyright information? To adjust the Copyright information, follow these: STEP 1: Click on the Footer section block to open its settings panel: STEP 2: Toggle the Show copyright text setting. STEP 3: In “Additional copyright text” setting, input your desired copyright information or any additional text you want to display along with the copyright symbol. Example: STEP 4: Click “Save” when done. 🤔 How to show the Follow on Shop button? The Follow on Shop button lets customers follow your store on Shop (a platform that allows customers to discover brands, track orders, and manage purchases in one place) to receive personalized recommendations and notifications about your products. To show the button, follow these steps: STEP 1: Follow this guide from Shopify to set up the Shop basics. STEP 2: Click on the Footer section to open its settings panel. STEP 3: Scroll down the Follow on Shop setting group, activate “Enable Follow on Shop” toggle. STEP 4: Adjust Horizontal position setting to your preference (whether the button appears on the Left, Center, or Right side of the footer area). STEP 5: Click “Save” when done. 5. Layout Recommendations The Footer section has 6 appealing layouts available. If you want support to set up the layouts, don’t hesitate to chat with us! 📂 Footer #1 Check out demo here. 📂 Footer #2 Check out demo here. 📂 Footer #4 Check out demo here. 📂 Footer #5 Check out demo here. 📂 Footer #6 Check out demo here. 📂 Footer #7 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
OT: Theme Sections - Sections
A Collage Media is a collection of images, text, or other visual elements arranged in a creative and visually appealing layout. This section in our theme supports this type of display, allowing you to add various types of content blocks and arrange them in a flexible layout. With a collage media section, you can showcase multiple elements in an artistic and engaging way, capturing the attention of your audience and conveying information effectively through visual storytelling. 1. Section Components Section Collage Media Add a collection of images, text, or other visual elements in flexible layouts. Available block Image Add image to the section. Video Feature video on the section. Collection Display a product collection in the section. Product Highlight individual products in the layout. 2. Location & Setup To add & set up the Collage Media 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 "Collage Media (#number of variant)". 3. Highlight Features Flexible content: Add various types of content like images, videos, products, or collections. Freely layout control: Adjust size, rows, and columns for each block on desktop and mobile to build the perfect layout. Pre-designed layout options: Choose from 6 available layout styles to match your store's vibe. 4. Common Use Cases 🤔 How to set up the Collage Media? To set up the Collage Media section, please follow these steps: STEP 1: Add and set up blocks Under the Collage Media section, you can add blocks to incorporate various types of content. OT: Theme Section app supports four types of blocks: Image block: Select an Image from your library or free resources. Adjust Overlay opacity and Overlay color for the image. Enter the URL for the image link to redirect customers to your desired page. Maintain the original aspect ratio of the image. Video block: Choose a Video from your store's data or embed the URL of a YouTube or Vimeo video. (Optional) Toggle Enable video autoplay to make the video autoplay when scrolling through. Tick the "Show sound control" checkbox to allow customers to toggle sound on or off as needed. Product block: Select a Product from your store to display in the section. Select the Content alignment on the product card. Change the Desktop size of the product card (Small, Medium, Large). Collection block: Choose a Collection from your store to feature in the section. STEP 2: Set up the section look. Click on Collage Media section to open its settings panel. Then you can: Enter the Heading of the collage section. Adjust the size & choose the HTML tag for the heading. Set the alignment of the heading (Left/Center/Right). Add additional text below the main heading. Enter Text for any supplementary information or description. Adjust the Colors for section elements, such as background, heading, and text. STEP 3: Click "Save" when done. 🤔 How to modify the height and width of the section and each block? To modify the height and width of each block, follow these steps: STEP 1: Click on Collage Media to open its settings panel STEP 2: Adjust the layout settings Click on the Collage Media 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. 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 block settings Click on the 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 block. Select the Number of rows tall to adjust the height of the block. STEP 4: Click "Save" when done. 🤔 How to customize Collection card and Product card on Collage Media? With Collage Media, you have multiple settings to customize the look and function of Collection card and Product card. STEP 1: Click on Collage Media to open its settings panel. STEP 2: Customize Collection card Scroll down to Collection card and toggle Show item count to display how many products the collection includes. STEP 3: Customize Product card Scroll down to Product card, and you have some main customization options: Show vendor: Toggle to show or hide the vendor name. Background color: Set the background color of the product card. Title size: Adjust the product title's font size. Desktop/Mobile padding: Control the spacing around the content. Image ratio: Choose how product images are displayed (e.g. Natural, Square, etc.). Image hover effect: Select an effect, such as "Hover to reveal second image." Next/Previous arrows: Show navigation arrows for product view. Auto-play: Set how often slides change automatically (in seconds). You can also enable Product swatches on Product card. STEP 4: Click "Save" when done. 5. Layout Recommendations The Collage Media section has 6 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Collage Media #1 Check out demo here. 📂 Collage Media #2 Check out demo here. 📂 Collage Media #3 Check out demo here. 📂 Collage Media #4 Check out demo here. 📂 Collage Media #5 Check out demo here. 📂 Collage Media #6 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
OT: Theme Sections - Sections
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 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
The Text with icon section is designed to highlight key points or features using a combination of icons and short text snippets. This feature allows store owners to present information in a visually engaging manner, capturing the attention of the target audience and making it easier for them to digest important details at a glance. 1. Section Components Section Text with icon Displays a row of columns with icons and text to highlight key store features. Available block Column Allows you to add an icon with content in each column. 2. Location & Setup To add & set up the Text with icon 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: Text with icon (#number of variant)". 3. Highlight Features Carousel text with icon: Display text with icon in a swipeable format, ideal for saving space. Flexible layout: Choose the number of columns, with control over alignment and spacing. Custom icons: Use built-in or custom SVGs and adjust size, image, and thickness to match your brand. 4. Common Use Cases 🤔 How to set up the Text with icon? To set up the Text with icon section, please follow these steps: STEP 1: Add Column blocks Under the Text with icon section, add Column blocks. You can add multiple column blocks, each representing a single column in the section. STEP 2: Set up Column blocks Click on Column block to open its settings panel. You can configure each column block by adding an image, heading, text, and optional button. Set up the icon: You have 4 options: Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icon. Find your preferred one in the Icon list, copy and paste its exact name to the "Use another icon" field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Upload a Custom icon image. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Set up the content: Enter the Heading for each column & adjust the Heading size. Enter the content for each column. Enter the Heading link users will be redirected to when they click the heading. STEP 3: Repeat the above steps for other blocks. STEP 4: Click "Save" when done. 🤔 How to customize the Text with icon section's look? To change the section's look, customize these: STEP 1: Click on Text with icon to open its setting panel STEP 2: Customize the section's look Enter the Heading for the entire section. Adjust the size of the section heading. Select the Heading tag for this section to enhance the SEO of the page. Choose 1 in 3 Line and border options (None, Column, Vertical line) for the border and line of each column. Also, choose Border style. Choose Column content alignment among Left, Center, Right. For icons, choose Icon positions, Icon size, and Icon thickness. Adjust Colors for section elements such as background, column, heading, text… STEP 3: Customize the section desktop 🖥️/mobile 📱 layout Scroll down to Desktop/Mobile layout, you can choose: Column layout: Choose the number of columns to display (up to 5 columns for desktop and 2 columns for mobile). Section height: Choose among Small, Medium, Large. Change the block spacing, section width, top/bottom padding. 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 Text with icon to open its setting 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. Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices for improved navigation. Turn on "Show navigation on desktop/mobile" 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 without requiring user interaction. Set the "Change bar every" interval to determine how frequently the carousel items will automatically change. These two settings apply to both desktop and mobile views. STEP 3: Click "Save" when done. 5. Layout Recommendations The Text with icon section has 7 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us! 📂 Text with icon #1 Check out demo here. 📂 Text with icon #2 Check out demo here. 📂 Text with icon #3 Check out demo here. 📂 Text with icon #4 Check out demo here. 📂 Text with icon #5 Check out demo here. 📂 Text with icon #6 Check out demo here. 📂 Text with icon #7 Check out demo here. 6. Support Information Need help? Contact our support team at Omni Themes Support.
