Sections & Blocks
Sections & Blocks
Sections & Blocks
1. What is the contact form? A contact form is a section that allows visitors to send messages or inquiries directly to the site owner or support team. It typically includes fields for the visitor's name, email address, and message. By using a contact form instead of an email link, businesses can reduce spam messages and provide a convenient way for customers to reach out with questions, feedback, or support requests. 2. How to set up the contact form? a) How to set up the form name and description? To configure the contact form's name and description, follow these steps: Enter the heading of the contact form section. Adjust the size of the heading (range from 50-200%). Select the heading tag for this section to enhance the SEO of the page. Enter the text to display under the heading or leave it blank. Choose the background color in light or dark mode. Enter the label for the Submit button. The default text is “Send”. b) Adding Custom Fields to the Form By default, the contact form includes the following fields: Name, Email, Phone Number, and Message. You can customize the label for each field. The Email field is always required as per Shopify regulations, even if the Email block is hidden or removed. You can optionally mark other fields as required for form submission. To add custom fields to the contact form, you can use the Form Item block. The theme supports various form types. Here’s how to set them up: Enter the label for the field. Enable “Mark as Required” to make this field required for form submission. Choose the input type for this field (Text, Dropdown, Radio Button, Checkbox). Enter the input values for dropdowns, radio buttons, and checkboxes. Options are separated by a semicolon. Note: This setting only works if you choose the input type as Dropdown, Radio Button, or Checkbox. Example: Dropdown type Example: Radio button After the customer submits the form on the frontend, an email will be sent to the store administrator through the Store Sender Email configured in the settings. You can find this setting by navigating to: Shopify admin => Settings => Notification This email address is where the admin will receive notification emails when a customer contacts them. Result in store sender email: c) How to show Date/Time input field to the contact form? STEP 1: In the Theme Editor, add Contact form section. STEP 2: Under Contact form section, add Form item block. STEP 3: Enter the Label for the field. STEP 4: Enable “Mark as Required” toggle to make this field required for form submission. STEP 5: Choose Date or Time options in Form input type setting. ⚠️ Note: One Form item block can only be used for either a Date input field or a Time input field. If you want both, add 2 separate Form item blocks. STEP 6: Save changes. 3. How to show an image next to the form? If store owners want to make the section more engaging by showing a map, directions, or a store photo, they can add an image for illustration. Go to the section settings and in the option “Show additional content”, select Image. Click to upload images from your library or select from free image resources. Adjust the height of the image on desktop or mobile devices. 4. How to show the store contact information? If you want to display store information to make it easier for customers to contact you, you can add the store information to the section. Go to the section settings and in the option “Show additional content”, select Contact information. Then configure it: Enter the store address, store's phone number, email address and the operating hours of the store. If you want to display both an image and contact information alongside the form, in “Show additional content”, select the option Both. This will allow you to configure and display both an image and the store contact information in the section. 5. How to create and show a contact page? Creating a contact page allows customers to easily reach out to your store with questions or concerns. Here’s a step-by-step guide to set it up: A contact page typically includes a contact form, store contact information, and possibly a map or an image to make it more dynamic. Step 1: Create a New Template: Follow this guide to create a new template: From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, and then click Customize. Use the Template drop-down menu to select a template. Click + Create template. Give your template a unique name. Select which existing template you want to base your new template on from the Template drop-down menu. Click Create template. In the new template, drag the Contact Form section into place. For more details, Please follow the instructions of Shopify documentation. Step 2: Create a Page and Assign the Template: Apply the new template to a page by following this guide: From your Shopify admin, go to Online Store > Pages. Click the title of the store page you want to edit or create a new page. In the Online store section, use the drop-down menu to select the new theme template you created. Click Save. For a quicker setup, you can use the ready-to-use templates available in the Eurus theme. These templates are designed to be easily customizable and provide a professional look for your contact page, ensuring a smooth and quick setup. By following these steps, you can create a functional and attractive contact page that makes it easy for customers to reach out to your store. 6. How to customize the success and error message of the form? You can customize the success message in the section settings of the contact form. This message will be displayed to users after they successfully submit the form. Navigate to the contact form section settings. Look for the Success message field. Enter the message you want to display after a user submits the form. Error messages are handled by the browser and cannot be customized through the theme. These messages ensure users provide the necessary information in the correct format before the form can be submitted. By customizing the success message, you can provide a clear and personalized response to users, enhancing their experience when contacting your store.
Sections & Blocks
1. What is a collection list? 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. 2. How to set up the collection list? To set up the collection list, follow these steps: Enter the heading of the collection list section. Adjust the size and alignment of the heading. Select the heading tag for this section to enhance the SEO of the page. Choose the style of collection image (Square, Rectangle, Landscape, Standard, Round, Natural). Optionally, show a "View all" button and a section divider. Determine whether the section should be full width. Choose the background color for light and dark modes. Adjust the number of columns to display on desktop and mobile devices. Add spacing between blocks if desired. Enable carousel settings to display blocks in a slide type on desktop and mobile devices. Adjust the padding on the top and bottom of the section. Add collections to the list by configuring each collection block. For each block, Click the "Select collection" button to choose a collection to display. If you want to customize the collection's display name, customize it in Custom title. Arrange the order in which collections appear. 3. 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: Click on "Add block" and select "Promotion." Configure the settings within the promotion block: Enter the heading & the text of the section that will be displayed under the heading. Select an image or video to set as the background of the promotion block. Adjust the overlay opacity of the background image. 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. Choose the background color in light or dark mode. Choose the text color of the promotion block in light or dark mode. You can also add an image directly to the collection list without using a promotion block. Upload or select an image to display within the collection list. Example for text block: Example for image block: 4. Show customized collection images with metafield. ✍️ Why would you need to use metafield for collection images? You want to show a designed image for the collection on the menu, without changing the featured images of that collection. You want to show higher-resolution images on the menu. ✍️ How to do it? Step 1: Create a collection metafield: In Shopify admin, go to Settings> Metafields and metaobjects > Collection > Add definition. Give your metafield a name. Choose type as File. Click Save. Step 2: Assign a value for the collection metafield: Go back to Shopify admin, and click on the Products > Collection tab. Choose a collection. Scroll down to Metafields. Upload an image in the newly created collection metafield. Click Save. 👉 Refer to this guidance about “How to create Product metafields” for a detailed explanation. Step 3: Set up in Theme Editor: In Theme Editor (Visit it by clicking on Online store > Themes > Customize) Visit the page you want to add a collection list, then tap on the Collection list section. A new panel will appear, scroll down to find Auto-fill collection images with metafield. Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill collection images with metafield” field. (See the image below) Click Save. 5. How to customize the look of the collection card Depending on how you want your collection card to look like, you can choose the setting that best matches: You can find the position of this setting by clicking on the Collection list section, and locating the Collection card on the new panel shown up. 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.
Sections & Blocks
1. What is FAQ? An FAQ (Frequently Asked Questions) 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. The purpose of an FAQ section is to address common inquiries and provide helpful information to users, reducing the need for them to contact customer support or seek answers elsewhere. 2. Section Components Section FAQ Provide answers to common questions regarding products/services in an accordion look. Available block Category Used to show a heading category for the frequently asked questions block below. Frequently asked question Used to show a single question and answer. 3. Location & Setup To add and set up the FAQ section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add Section”. Select “FAQ”. 4. Highlight Features Organized by categories: Group related questions under a single topic. Expandable format: Expandable and collapsible answers to save space. Rich content support: Use text, links, or icons inside each answer. 5. 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 4 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 setting panel. You can change: Icon with 3 options: Select an icon from the drop-down list or choose None to hide it. To use a different icon, choose Use another icon and paste its exact name from the icon list. Add a custom SVG icon by pasting its code. Question: Fill in the question Answer: Fill in the corresponding answer. STEP 3: (Optional) Add a category for the FAQ If you want to group some relevant FAQs into a category/topic, use Category block. Here are the steps: Under the FAQ section, add Category block Drag it on top of all the Frequently asked question blocks that belong to this group. Click on the Category block to open the setting panel. Then you can change: Icon Title of the category STEP 4: 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. Put some words inside the [] brackets to add a highlight effect. Under Marker, choose the highlight effect of the heading to be Underline or Font highlight. Toggle “Show border” to add a border around the question box. Tick “Collapsible” to hide the answer to a question, and it will expand on click. Add Background color for the section in light and dark theme modes. STEP 3: Upload an image to the section Still under the FAQ setting panel, go to Image and upload an 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 🖥️) Choose the Image alignment Choose to show section divider, adjust padding, and make the section full width. STEP 5: Click “Save” when done. 🤔 Does the theme have an FAQ page? Yes, the theme includes an FAQ page feature. Within the FAQ section, there is a pre-configured link to the FAQ page (optional), typically labeled as "View more". The theme also provides pre-made templates for the FAQ page. To create an FAQ page, customers can navigate to the admin Page section, create a new page, and select one of the FAQ templates provided by the theme. Note: Ensure Eurus is a live theme so you can access the theme's templates. Don't forget to publish the theme before assigning templates. 6. Support Information Need help? Contact support@omnithemes.com or visit omnithemes.com.
Sections & Blocks
1. What is a blog post? The Blog Post Section is a dedicated area on your website where multiple blog posts are displayed together. This section typically showcases the most recent or most relevant blog posts, allowing visitors to easily browse and access the content. It can help enhance user engagement by offering valuable information, updates, and stories in an organized manner. This section can also be customized to match your website's design and layout, ensuring a seamless integration with the rest of your site. 2. How to set up the blog post section? First, you need to create a blog post in your Shopify admin. Follow the steps outlined in the official Shopify documentation. Then configure the Blog Post Section by following these steps: Specify the heading, subheading for the blog post section. Set the size of the heading, ranging from 50% to 200%. Select the heading tag for this section to enhance the SEO of the page. Choose the alignment for the heading (Left, Center, Right). Choose which blog’s posts you want to display in this section. Determine how many blog posts to display in this section (ranging from 2 to 8 posts). Adjust the number of columns to display on desktop devices. Enter blog tags into the Blogs with tags field to only display posts that match those tags. (One tag per line) Choose how blog posts will appear on mobile devices (Image top, Image left). Tick the checkbox “Show 'View All' Button” to display a “View all” button that links to the full blog. Tick the checkbox “Show Section Divider” to show a divider that separates this section from the section above. Check the option labeled "Enable carousel on desktop" to activate the carousel feature on desktop devices. Within the same carousel settings, find the option labeled "Enable swipe on mobile". Check this option to allow users to swipe through carousel items on mobile devices. Turn on "Enable next/previous arrow on mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Check the "Enable auto-play" option to enable the carousel to automatically cycle through items without user intervention. Configure the slide speed using the "Change slides every" setting to adjust how frequently the slides transition. Add a "Show more button". These settings allow you to customize the Blog Post Section to fit your website's design and layout, ensuring a cohesive and user-friendly experience for your visitors. 3. How to customize the information in each blog item? You can customize the information displayed for each blog item in the Blog Post Section. Adjust the title size of the section. Adjust the "Image ratio" to modify the featured image's aspect ratio. This option only works when the featured image function is enabled. Options include showing/hiding the featured image, setting a background color, and displaying details like author, blog name, date, excerpt, tags, and comment counts. Adjusting these settings allows you to tailor the presentation and content of each blog item to your preferences.
Sections & Blocks
1. What are text columns with icons? Text columns with icons is a section 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 your audience and making it easier for them to digest important details at a glance. By pairing icons with brief text descriptions, admin can effectively communicate the benefits or highlights of products or services, enhancing the overall user experience and guiding visitors towards the desired actions on the website. 2. How to set up the columns? To set up the columns in the Text columns with icons section, please follow these steps: a) Add column blocks: You can add multiple column blocks, each representing a single column in the section. 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 size of the heading. Enter the content for each column. Optionally, add a button label for each column. Enter the link users will be redirected to when they click the button. b) Setup section layout: Heading: Enter the heading for the entire section. Wrap your text between [] to add heading highlights. Marker: Choose the style for the highlighted text. Heading tag/ Heading size: Adjust the size of the section heading. Select the heading tag for this section to enhance the SEO of the page. Secondary background: 3 options to choose: Option Name Function Image "None" This option will disable the Background color setting under the Color setting group. "Column background" This option colors the column's background using the color you choose in the Background color setting. "Section background" This option colors the section's background using the color you choose in the Background color setting. Line and border: Choose 1 in 4 options (None; Dashed border; Full border; Vertical line) for the border and line of each column. Column content alignment: Align the text within the columns. Make section full width: Tick this checkbox to expand the section to full width. Top padding/ Bottom padding: Set the top and bottom padding for the section. Column layout: Change the numbers of columns show up per row on desktop (max 6 columns) and mobile (max 2 columns). c) How to enable the carousel? Tick "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 "Enable next/previous arrow on mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Tick “Enable 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. Configure these settings to create visually appealing and informative text columns with icons that effectively communicate key points or features to your audience.
Sections & Blocks
1. What is rich text? 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. Rich text enhances the presentation of information, making it more engaging and easier to understand for readers. By combining different elements within the same block, admin can create visually appealing content that effectively communicates their message and captures the attention of their audience. 2. How to set up the rich text? To set up the rich text section, follow these steps: a) General Layout Settings: Adjust the content position and alignment for desktop devices (Left, Center, Right). You can also choose the desired alignment to align the content specifically for mobile devices Choose whether to show a divider above the section. Select the background color for the section in light/dark mode. Customize the top and bottom padding for the section. b) Set up types of content blocks: Heading Block: Enter the heading text for the section. Adjust the size of the heading. Select the heading tag for this section to enhance the SEO of the page. Text Block: Enter the main content for the section. Use the "Default Content Height" setting to control how much content is shown before the "Read more" button is clicked. You can select from 4 options: Show full content, Small, Medium, or Large, based on your preference for how much content is visible initially. Button Block: Configure buttons for the section. Enter labels and links for up to two buttons. Choose whether to display buttons as primary/ secondary/ or text link. Caption Block: Add a tagline or caption for the section. Adjust the size and style of the text. Image Block: Upload images or embed videos. If you want to add a video, paste video URLs from YouTube or Vimeo. Enable video autoplay if desired. Add alternative text for images. These settings allow you to create dynamic and engaging content within the rich text section, combining text, buttons, captions, and multimedia elements to effectively convey your message to users.
Sections & Blocks
1. What is a media gallery? The media gallery is a feature used to showcase various types of media related to products or promotions on an e-commerce website.: Showcase Product: The media gallery allows you to display high-quality images and videos of your products from different angles, providing customers with a comprehensive view before making a purchase decision. Promotion: You can use the media gallery to highlight promotional images or videos, such as special discounts, limited-time offers, or seasonal sales, to attract customers' attention and encourage them to explore further. Buyer's Review: Including images or videos submitted by satisfied customers in the media gallery can serve as social proof and build trust with potential buyers. Social Images: In some cases, social media images related to your brand or products act as a substitute for an Instagram feed or aggregating user-generated content to foster community engagement. 2. How to set up the media? To set up media, you can add either images or videos to each block. Images provide visual content while videos offer dynamic multimedia experiences. In the Media Gallery section, you can customize various aspects: Enter a heading for the media gallery and a subheading if needed. Select the heading tag for this section to enhance the SEO of the page. Adjust the color for background, heading, and text. Image: Upload an image from your library or free resources. Enter a link for users to be redirected to when clicking the image. Adjust the overlay opacity of the image to control its visibility. 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. Locate the “Show sound control” checkbox. Check the box to enable the sound control feature. By default, this checkbox is set to false. Once enabled, an icon will appear on the storefront, allowing customers to toggle sound on or off as needed. Add alternative text for the video for accessibility purposes. Layout group section: 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’s size. Enter the content to accompany the media, such as a description or caption. Adjust the alignment of the content within the block (Left, Center, Right). 3. How to add and display products on the section? STEP 1: Add the Product block Under Media gallery section, add the Product block. STEP 2: Set up the block Click on the block to open its settings panel: Choose a Product to display on the section. (Optional) Show vendor, product rating,.. Choose the layout of the block. STEP 3: (Optional) Show customized product image with metafield ✍️ Why would you need to use metafield for product images? You want to show a designed image for the product on the section, without changing the featured images of that product. You want to show higher-resolution images. Then follow this: 3.1: Create a product metafield: In Shopify admin, go to Settings> Metafields and metaobjects > Products > Add definition. Give your metafield a Name. Choose type as Image (File). Click Save. 3.2: Assign a value for the product metafield: Go back to Shopify admin, click on the Products, and then find the product (that is chosen in STEP 2) to assign the metafield value. Scroll down to Product metafields. Upload an image in the newly created product metafield. Click Save. 👉 Refer to this guidance about “How to create Product metafields” for a detailed explanation. 3.3: Set up in Theme editor: Back to Media gallery section > Product block. Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill product images with metafield” field. Click Save. STEP 4: Save your changes 4. How to add and display collections on the section? STEP 1: Add the Collection block Under Media gallery section, add the Collection block. STEP 2: Set up the block Click on the block to open its settings panel: Choose a Collection to display on the section. Adjust text size, title size or choose custom image. Choose the layout of the block. STEP 3: (Optional) Show customized collection image with metafield ✍️ Why would you need to use metafield for collection images? You want to show a designed image for the collection on the section, without changing the featured images of that collection. You want to show higher-resolution images. Then follow this: 3.1: Create a collection metafield: In Shopify admin, go to Settings> Metafields and metaobjects > Collections > Add definition. Give your metafield a Name. Choose type as Image (File). Click Save. 3.2: Assign a value for the collectionmetafield: Go back to Shopify admin, click on the Products > Collection tab. Find the collection (that is chosen in STEP 2) to assign the metafield value. Scroll down to Collection metafields. Upload an image in the newly created collection metafield. Click Save. 👉 Refer to this guidance about “How to create Product metafields” for a detailed explanation. 3.3: Set up in Theme editor: Back to Media gallery section > Collection block. Copy the text after “custom.” of the metafield’s Namespace and key. → Paste to this “Auto-fill collection images with metafield” field. Click Save. STEP 4: Save your changes 5. How to modify the height and width of each media block? To modify the height and width of each media block, follow these two main steps: a) Adjust the layout settings in the section settings for desktop and mobile: 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. b) Customize the individual media block settings: Choose the number of columns wide to adjust the width of the media block. Please note that: The number of columns here cannot exceed the number of columns configured in the section settings above. 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. 6. How to show content outside of the media? To display content outside of the media, you can use the Overlay feature in the media block settings. 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. If you prefer the content to be outside the image, simply disable the “Enable the content overlay” settings. 7. How to create a Swipeable media gallery on mobile? 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: In Theme Editor, click on the Media gallery section. Scroll down to the Mobile layout setting. Check the box that says Enable swipe on mobile. (Optional) Turn on "Enable next/previous arrow on mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Click Save. 8. 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 like on the Eurus theme. 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.
Sections & Blocks
1. What is Featured product? The Featured product section, often placed on the homepage, showcases a new or noteworthy item with key details at a glance. It lets customers explore the product and even purchase or add it to their cart directly, streamlining the shopping experience. 2. Section Components Section Featured product Display a key product on the homepage Default blocks Price Show the product price. Labels and badges Highlight key information - like discounts, low stock, or new arrivals. Description Add the product description. Variant picker Allow customers to select product variants. Quantity selector Let customers choose the quantity to purchase. Buy buttons Add "Add-to-cart" and Buy buttons. 3. Location & Setup To add and set up the Featured product section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click "Add section". Select "Featured product". 4. Highlight Features Direct product spotlight: Showcase a single product prominently on the homepage to grab customer attention. Quick purchase options: Customers can view details, select variants, and add to cart or buy instantly without leaving the section. Customizable layout with rich blocks: Adjust product title size, heading tag, media layout, image ratio, and button styles to match your brand. 5. Common Use Cases 🤔 How to set up the Featured product section? To set up the section, follow this: STEP 1: Add the section Add the Featured product section. STEP 2: Set up the section Click on Featured product to open its settings panel. Choose the Product you want to feature. Adjust product Title size and Heading tag. Under the Media setting group, configure how media is displayed: Choose Desktop layout, Image ratio, and enable media thumbnails on desktop/mobile. STEP 3: Click "Save" when done 🤔 How to set up the section's blocks? Under Featured product section, each block represents different information of the product (for example: Price, Description…). There are 6 default blocks to adjust the basics of the section. If you want to add more information to the product, add the advanced blocks following the guide below: 👉 Set up default blocks Block Settings Price Adjust the Text size of the price. Label and badges Adjust the Label position. Description Choose the Icon to show on the description, or adjust its content height. Variant picker Choose how product variants are displayed (Dropdown or Button) or enable color swatches. Quantity selector Choose the style of the select button. Buy buttons Choose Button style, pre-order status, or colors for elements. 👉Set up advanced blocks The Featured product section also supports various blocks to showcase product information. You can add any block you want, and follow the setting instructions (attached) to set up: Product title SKU Vendor name Payment methods Volume pricing table Inventory status Collapsible tab Social sharing Text Size chart Estimated delivery time Separator HTML Product rating Trust badge View product details Gift wrap Engraving Back to stock alert Coupon code Video shopping STEP 3: Click "Save" when done 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is a product grid? The product grid in Eurus theme showcases product listings in a structured layout with thumbnails or images arranged in rows and columns. It allows customers to efficiently browse through a collection, displaying essential details like product name and price. This layout serves as the main interface for exploring products, offering a visual overview and enabling quick scanning. Integrated features such as sorting options and filters enhance the browsing experience, helping users refine their search criteria effectively. 2. How to set up the number of items per page? To set up the number of items per page in the product grid, you can adjust the "Product per page" configuration. By default, the number of products displayed will be the first value entered into the field. 3. How to set up the pagination? a) How to choose type of pagination: In the section Product grid, find the Pagination setting. You have 3 options to choose from: Pagination (Default): This is the normal way to see products. Customers can click on numbers to go to different pages. Infinite scroll: This is like a never-ending page. When you scroll to the bottom, more products will appear automatically, stopping only when there are no more products to show. Click to load: You'll see a button that says "Load more." Click it to see more products. Which one should you choose? Infinite scroll is good if you want to show lots of products quickly, without requiring your customers to do any more actions. Click to load is good if you want to control how many products your customers see at a time. And let them control. Pagination (Default) is always a good choice if you're not sure. b) How to change the pagination indicator style: In the section Product grid, find the Pagination type setting, you can choose between 2 options: 1️⃣ Circle: 2️⃣Underline: 4. How to customize the product cards in the product grid? To customize the product cards on a collection page, you can typically show or hide various elements to tailor the display according to your preferences. Here's a brief overview: You can choose to display or hide the product rating on the product cards. The rating typically represents the average score based on customer reviews. You may have the option to include or exclude a quick view button on the product cards. This button allows customers to view product details in a popup without leaving the collection page. You can opt to show or hide the vendor name on the product cards. The vendor name indicates the brand or manufacturer of the product. You can also choose to show the description in the list view. If you tick this checkbox, this allows customers to see a brief description of the product directly on the product listing page. By adjusting these settings, you can customize the appearance of the product cards to best suit your branding and user experience preferences. 5. How to add a banner in the middle of the Product grid? Inside your Product grid, you can add some banners by adding some Promotion blocks. With this, you can attract attention and promote specific products or offers effectively. ✍️ Here's how to add a promotion block to the product grid: In Theme Editor, under the Product grid section, click “+” or “Add Promotion block”. ✍️ Here's how to customize the promotion block: Inside Theme Editor, tap on the Promotion block to open the setting panel, from here you can adjust: Position: Arrange the position of the block. Desktop background image: Upload an image for the banner Video: Select a video from the library or paste the URL to use it as background. Overlay opacity: Adjust the image overlay opacity if needed to enhance its visibility. Desktop layout: Adjust the width and height of each promotion banner on the desktop. Mobile layout: Adjust the width and height of each promotion banner on the mobile. Some other settings: Customize the text accompanying the banner, such as subheading, heading size, text size, alignment, and content position, according to your preferences. Preview the changes to ensure the banner is positioned correctly within the Product grid and adjust settings as necessary.
Sections & Blocks
1. What are featured collections? The Featured Collections 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. Eurus theme provides the flexibility to showcase up to five featured collections within this section. Each collection can feature up to 20 products, providing a comprehensive overview of the highlighted categories. 2. How to set up featured collections? To set up featured collections, please follow these simple steps:Open the Theme editor and navigate to the Template group section. Then, enable the Featured collections section. a) Setup display: In this section, admin can: Heading: Enter the title for the section, put the text inside [] brackets to add a highlight effect. Marker: Choose the highlight style between Underline or Font highlight. Heading size: Adjust the size of the heading and align the heading text as desired. Heading tag: Select the heading tag for this section to enhance the SEO of the page. Heading alignment: Change the alignment of the heading. Subheading: Add a subheading above the heading. Text: Enter the description for the section in this area. Show “View all” button: Tick to add a button for customers to click and see all the products inside that collection. "View all" button position: Change the button position to Top or Bottom. Button style: Choose the style for the view all button. b) Set up collection: Click on the Featured collections section to set up, under the Collection area, you can: Title size: Drag or enter a specific number to change the size of the heading of that collection. Text style: Choose the style of collection name text as Default, Capitalize, Uppercase, or Lowercase. Title position: Choose where you want your collection's title to place. Under heading Inline with heading Note: You must choose the Heading alignment to be Left or Right to make it work. Carousel: Enable carousel on desktop: Tick to make the product auto-slide on desktop. Carousel style: Choose between Horizontal and Vertical style. (“Vertical” style is only available when the “Title card” feature is being used. Read more) Enable swipe on mobile: Tick to make all the products of that collection shown in one row, customers can swipe right to see more. Enable next/previous arrow on mobile: Turn on to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Enable auto-play: Automatically change the slide every X seconds. Change slides every: Adjust the amount of X seconds each slide will last before changing. Desktop layout: Products per row on desktop: Drag or enter to change the number of products shown on each row Number of rows: Drag or enter to change the number of product rows in this section Block spacing: Change the spacing among the product images. Make section full width: Tick to make the Featured collection fill the whole screen on the desktop. Show section divider: Add a division line between the Featured collection section and others. Top & bottom padding: Set up the top and bottom distance from the section content to the border. Mobile layout: The same settings patterns you use for the desktop layout. 3. How to add collections to the section? Under the Featured collection section, you can add up to 5 collections by clicking on “Add Collection”. For each collection, you can: Collection: Select the collection to be featured. Show description: Choose to show or hide the collection’s description. Description: Enter a custom description for the collection if needed. Default content height: Choose to show full description of the collection or just a part with a Read more button. “Read more” label: Change the title of the button, only available if the Default content height is not “Show full content”. "See less" label: Set the text for the button that collapses the collection description back after expanding it. Product cards: Show vendor Show product rating Show Quick view button (on the product card) Title card: The title card is used to provide additional information about promotions, sales, or details regarding the selected collection. 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. (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.) Title card link: Enter a link that the customer will be navigated when clicking on the title card. Card image: Add an image for the title card 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. Shopify-hosted video: Upload or choose a video from the library from the title card. Show sound control: Tick to show a button for customers to control the sound of the video. Or embed video from url: Paste a link of a video from Youtube or Vimeo to show it on the title card. Video alt text: Enter a text to show when video is still loading, for SEO purposes. Replace card with featured product: Select a product to replace the whole title card. Other settings are used to set up the title card content such as Heading, Text, Button, etc. Result:
Sections & Blocks
1. What is Flash Sale? The Flash Sale section displays time-sensitive promotional content with countdown timers, creating urgency among customers and encouraging immediate purchases of discounted products or collections. 💡 Note: If you want a countdown timer section with more customization options, check out Promotion banner. 2. Section Components Section Flash Sale Showcases limited-time offers with countdown timers and promotional content Available blocks Text Used to 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 Flash Sale section: Open the Shopify Theme Editor (Online store > Themes > Customize) Decide where you want to place the new section. Click “Add Section”. Select “Flash Sale”. 4. Highlight Features Countdown Timer: Multiple timer types, including standard and evergreen options Dual Mode Design: Optimized color schemes for both light and dark modes Responsive Layout: Separate image configurations for desktop and mobile 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 flash sale section? Don’t know where to start with this Flash Sale section, just follow these simple steps: STEP 1: Add the Flash Sale section to your desired page location STEP 2: Choose your background Image: Upload your Image and Mobile image, 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 Enter a compelling Heading (put some words in the [ ] brackets for text highlight effect) Enter Text to show as the description Enter the Coupon code STEP 4: Set up the Countdown Timer block Choose the Countdown type as Standard timer Set end date, timezone STEP 5: Set up the Button block – set the Button label and Button link to your sale collection. STEP 6: Customize the overall look of your section: 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 an evergreen countdown timer for the section? Evergreen timers create continuous urgency by automatically restarting, perfect for ongoing promotions that don't have a fixed end date. STEP 1: In the Countdown Timer block, change Countdown type to Evergreen timer STEP 2: Set your Start date – this determines when the timer begins counting. Future Start Date: Timer shows 0h0m0s until the start date arrives Current Start Date: Timer begins counting down immediately Past Start Date: Timer calculates where it should be in the current loop cycle STEP 3: Set your desired Duration (per loop) and Unit – e.g., 7 days STEP 4: Don’t forget to set the right Time zone for your store. STEP 5: 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: Text position: ⚠️ Note: The Aside option only works when the Line and border setting is set as None. Below Aside Timer style: ⚠️ Note: This setting only works when you’ve already set a Background color for the timer. Square Round 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% 6. Support Information Need help? Contact our support team at Omni Themes Support.
Sections & Blocks
1. What is a Product bundle? Overview: Product Bundle is a feature in Eurus Theme allowing you to group and offer multiple products together as a single package. This simplifies the shopping process and provides benefits for both merchants and customers. Basic Use Cases: Convenient Sets: Bundle products with a common purpose or belonging to the same set, offering customers a convenient one-click purchase for related items. Discounted Groups: Create discounts for a group of products by bundling them together. This strategy encourages customers to buy multiple items, boosting overall sales. B2B Bulk Orders: Ideal for B2B stores, enable bulk purchases by creating bundles. This streamlines the bulk ordering process, catering to wholesale transactions efficiently. 2. How to set up bundles? In the Theme editor, navigate to Theme sections, select your desired page, and under the "Template" section group, add the Product Bundle section to your preferred location. a) Heading and Button Label: With product bundle section of Eurus theme, you can: Add a compelling heading to your bundle, adjusting its size from 50% to 200%. Select the heading tag for this section to enhance the SEO of the page. Align the heading as per your preference – left, center, or right. Include descriptive text below the heading to provide additional context. Tailor the "Add to Bundle" button label with the content you desire. b) Product Selection for the Bundle: Admin can choose products to display in the bundle. Options include selecting from a collection or hand-picking individual products, whether they belong to a set or complement each other. If you select both individual products and collections, the individually selected products will override any chosen collections. Refer to detailed instructions provided below each configuration option for clarity on selecting collections or products. For the checkbox "Each product can be added to bundle once": Yes (Default): Each product can be added to the bundle only once, but if the product has multiple variants, each variant can also be added once. For example, if Product A has variants 1A, 1B, 1C, and 1D, you can add each variant - 1A, 1B, 1C, and 1D - once to the bundle. Each variant is treated as a separate product. After adding a specific variant, the "Add to bundle" button will be disabled for that variant. No: Show quantity selector settings will appear to let customers adjust the quantity of each product they want to add to the bundle. For example, if product A has variants 1A, 1B, 1C, and 1D, you can add 1A twice, 1B four times, 1C once, and 1D six times to the bundle - no limits. In the Variant picker settings group, you can choose how the variant picker displays on each bundled product card. At Type settings, choose among: Adapt to variant type in theme settings (Default): The variant picker style follows the setting configured in Theme Settings > Product > Variant picker. Dropdown: All variant pickers on bundle product cards display as a dropdown, regardless of the theme setting. Button: All variant pickers to display as buttons, regardless of the number of options or the theme setting. You can also set the maximum number of variants displayed in button form; variants exceeding this limit will automatically switch to dropdown form. c) Bundle Summary Block: Admin can adjust the desktop summary position (left/right) for optimal visual placement. This bundle block summary will be displayed as a sticky element on mobile devices. You also can input a bundle heading and additional text to provide context and information. After that, choose colors for backgrounds, text, buttons, lines, and borders,... for both light and dark theme mode. d) Styles and Layout: Adjust layouts for desktop and mobile to make your bundle visually appealing. 3. How to apply a discount for a bundle? a) Set up Discounts in Shopify Admin: Create a discount for 'Amount off products' and select the 'Automatic discount' method. (Product Bundle Section only applies to this Discount type) Apply only one discount per order and avoid combining it with other discounts, regardless of whether they are of the same or different types. For config 'Applies to': Select the products or collections to which you want to apply the discount in the product bundle. b) Set up in Product Bundle Section: Ensure that the products/collection listed in the Product bundle section are included in the 'Applies to' list of items in the Shopify discount rule. Adjust the minimum number of items required in the bundle to qualify for discounts, ranging from 2 to 12. Ensure that all discount configurations, such as discount value and type, match those set in the Discount rule under Admin > Discounts > Amount off products. Any discrepancy may cause confusion among customers. In Config Discount value of Discount type, there are 2 cases: For percentage, decimal numbers are not allowed; only positive integers are allowed; For Fixed amount, both decimal and non-decimal numbers are accepted. In both cases, the value must be greater than 0. Configure the discount setup to align with the "Only apply discount once per order" setting in the preferred discount rule in the admin. If disabled, the discount amount will be deducted from each eligible item in the order - same logic as admin Discount section. 4. How to add the discount value label to the heading? Step 1: Enable the label:In the theme editor, navigate to the Product Bundle section, toggle Show discount value label to enable it. Step 2: Customize the label appearance:Adjust these settings to achieve your wanted look: Label Type: Choose from 4 styles (Rounded, Rounded corners, Mixed, Square) Discount value label: Select a custom color for the label background. If left empty, it will inherit the price background color. Discount value label text: Set the text color for the label. If left empty, it will follow the default text color. Step 3: (Optional) Change the label content The discount number on the label of the Product bundle section comes from your "Discount type" and "Discount value" settings. To change it, edit those settings. If you choose the “Discount type” as Fixed amount and disable the Only apply discount once per order setting, then the label will be shown as {Discount value} OFF/product. ⚠️Important note: Make sure these settings match the discount you created in your Shopify Admin. Otherwise, the wrong discount might show, even though the correct discount will still be applied when you buy it. 5. Limitations When setting up, store owners must ensure that the products or collections listed in the Product bundle section are included in the 'Applies to' list of items in the Shopify discount rule. Verify that the Config “Discount value” of the “Discount type” is accurately entered in the admin. Please note that the discount in the product bundle section won't apply automatically; it merely displays the discounted price for multiple products simultaneously, without going to the cart page. 6. How to add and set up a promotion block to the section? If you want to showcase media and text in the Product bundle section in an appealing way, like this, please follow this guide: STEP 1: Add the block Under Product bundle section, add Promotion block (You can only add one Promotion block.). STEP 2: Set up the text elements Click on the Promotion block to open its settings panel: Enter the Heading, Subheading, and Content for further description. At Heading, wrap some text between [] to highlight it. Choose the highlight style at Marker. Adjust Heading size and Text size. STEP 3: Set up media elements Still at Promotion block: Upload background image for Desktop and Mobile. Upload video or embed video from URL. Enable video autoplay or show sound control. You can also adjust the Overlay opacity level for image/video background. STEP 4: Set up button Still at Promotion block, enter Button label and paste the Button link to redirect customers. STEP 5: Set up colors You can choose colors for Promotion block elements such as text, background or button… STEP 6: Click “Save” when done. 7. How to adjust the position, height and width of the Promotion block? Note: To adjust the position, height and width of the Promotion block, make sure that the carousel effect is disabled. STEP 1: Click on Promotion block to open its settings panel STEP 2: Set up the block position At Position settings, you can choose the position of the block: Position 1: The promotion block lies above the products in the bundle. Position 2: The promotion block lies below the first product in the bundle. The block position follows the same pattern as other position levels. STEP 3: Set up the block height and width At the Desktop layout and Mobile layout settings: Choose Number of columns wide. Choose Number of rows tall. STEP 4: Click “Save” when done
Sections & Blocks
Advanced - Related Collections
1. What are related collections? Related Collections is a unique section in Eurus, providing smart suggestions on your collection pages. They are added to collection pages by default, but you can also remove or hide them if needed. This section is exclusively available for addition to collection pages, intelligently displaying collections that either share common products or are manually set up by the admin. This feature aims to boost promotions, increase customer engagement, and conveniently guide users to discover relevant product assortments within your online store. 2. How does Eurus Theme's smart collection suggestion work? The collections displayed in the Related Collection section are gathered from all the collections that the products on the current page belong to, except for the collection of the current page itself. In simpler terms, if a product is linked to multiple collections, those collections (except the one of the current page) will be suggested in the Related Collection section. This ensures that customers receive recommendations based on shared products, providing a convenient and engaging browsing experience. Example: Let's consider a collection called "Makeup" that contains three products: Lipstick A, B, C Lipstick A also belongs to the "Lipstick" collection. Lipstick B also belongs to the "Eyes & Lips" collection. Lipstick C also belongs to the "New Arrivals" collection. In the Related Collection section within the Makeup collection page, you would find three suggested collections: "Lipstick," "Eyes & Lips," and "New Arrivals." These suggestions are derived from the shared collections of products within the Makeup collection, excluding the Makeup collection itself. 3. [Advanced] Add related collections manually for each collection page If you want to manage related collections for a specific collection or the entire collection of your store, set up metafields following the instructions below: Step 1: Create a Collection Metafield Navigate to your Shopify admin. In the left-hand menu, go to "Settings" and select "Metafields and metaobjects" Select “Collection” then click on "Add definition" to create a new metafield. Set the key as "related_collections" and choose the type as "Collection (List of collections)". The key must be accurate; otherwise, the metafield may not display as intended. Save the metafield definition. Step 2: Assign Collections to the Metafield Go to the Collections section in your Shopify admin. Edit each collection page (or bulk edit) where you want to showcase related collections using metafield. Look for the newly created metafield "related_collections." Select the collections you want to display in the Related Collections section. Save the changes for each collection. Note: If no metafield data is found, the theme detects the related collections automatically based on the collections of the product in the current collection (follow the rules in the above part: How does Eurus Theme's smart collection suggestion work?) When using a collection metafield, it will no longer include auto-generated collections that are not associated with the specified metafield. For more details, please refer to our video guide. 4. How to add promotion blocks and an icon to the section The promotion block allows you to highlight special offers, flash sales, or important announcements within the related collections section. You can customize the icon, heading, text, and background to match your store’s aesthetic. Add a new promotion block within this section. Set the position of the block (1 indicates the first position). Choose an icon for this block. Or you can custom icons, input your SVG code in the provided field. Enter the heading text, such as "Flash sale". Adjust the size of the heading. Select the heading tag for this section to enhance the SEO of the page. Input the main promotional content & Adjust the text size. Upload or select a background image. Choose an image from your files or explore free images. Configuring the Button Align the content left, center, or right. Set the color for light and dark themes. Conclusion: By following these steps, you've successfully created a metafield to manage related collections. Now, whenever you edit a collection page, you can handpick the collections you want to feature in the Related Collection section. This provides a customized and curated experience for your customers, enhancing their journey on your online store.
Sections & Blocks
1. Overview Elevate your storefront with the Event Calendar section, a dynamic tool to showcase your events, promotions, announcements, and product releases. This feature has several prominent benefits such as: Effectively communicate important dates and engage your audience with upcoming activities. Link products to your events and sell them as tickets, creating a seamless shopping experience. Provide map directions and event details to help attendees easily locate and participate in your events. Allow users to add events to their personal calendars, ensuring they stay informed and engaged with upcoming activities. Enable users to confirm their attendance and manage event capacity. 2. How to set up events on the storefront? Find the part of the event calendar you want to change below to learn how to set up: a) Event Details: Provide essential information such as the event name, date, and time. Optionally, include the event location. There's an option to display both start and end times, ensuring flexibility for events spanning multiple days. b) Description: Craft a concise description that will be showcased on the event card: For event preview description: Enter the content in the Summary field. For event pop-up description: When your customers click on the heading, a new pop-up containing detailed information about the event will show. If you want to add/change this information, do it in the Detailed description field. Select the heading tag for this section to enhance the SEO of the page. c) Direct Calendar Integration: Customers can easily add events directly to their personal calendars with a single click - no additional setup is required. This feature is enabled by default, making it simple and convenient for busy users to stay organized. For more details, refer to the following section. 3. How can customers add the event directly to their calendar? Discover the uniqueness of our event calendar feature, enabling customers to easily add comprehensive event details, including names, dates, and locations,... directly to their calendars. This functionality extends across various platforms, such as Google Calendar, Apple Calendar, Outlook, Yahoo and Ical, streamlining the process without the need for additional calendar apps. 4. How to sell tickets to your events? This feature allows you to link an event to a product, setting the product as a ticket for users to book for the event. Ensure that the ticket product is properly configured with the necessary variants (e.g., seat types, dates). Enable the option “Offer tickets for this event” to offer tickets for the event. Paste a link or search for the ticket page. Add a ticket page to sell tickets to attendees: Create a digital product to provide more information about the event, and optionally hide it from product listings. For more advanced customization, you can contact our support to exclude ticket products from internal search results and product recommendations. Set the label for the ticket button, e.g., "Buy Tickets." Choose your preferred Button style: Primary, Secondary, or Text link.
