Sections & Blocks
Sections & Blocks
Sections & Blocks
1. What is the map? Map section is where you can display the map that shows the store location, allowing customers to easily locate nearby stores or pickup points. By integrating an interactive map, customers can view store addresses, contact information, and operating hours, enhancing their shopping experience. This feature is particularly beneficial for omnichannel retailers who offer both online and offline shopping options, as it helps bridge the gap between digital and physical storefronts. 2. How to add a valid address? To add a valid address, please follow these simple steps: Type the accurate address (including the zip code, if available) into the address field. The address provided must exist and be recognized on Google Maps. Google Maps will automatically locate and display the map corresponding to the entered address. If Google Maps fails to find or inaccurately locate the address, you can use a custom image instead. 3. How to show a custom image instead of the map? Simply add an image to the section. The section will prioritize displaying the image over the map. 4. How to customize the text and layout of the section? Adjust section settings such as desktop and mobile height, content position, alignment, and layout preferences. Customize each block within the section: For the "Store name" block, set the heading text, size, and HTML tag. Select the heading tag for this section to enhance the SEO of the page. For the "Address and hour" block, set the text and its size. For the “Button” block, specify the button label. In such cases, the button within the section will automatically link to the google map of the correct address entered, requiring no additional setup.
Sections & Blocks
1. What is the product attribute table? A product attribute table is a structured presentation of key attributes or features of multiple products. It serves as a comparison tool, allowing users to easily evaluate and contrast different products based on one specific criteria. The primary benefit for a product attribute table is to provide a side-by-side comparison of various products, highlighting their distinguishing values or characteristics in a particular criteria. This enables customers to make informed decisions by quickly assessing the differences and similarities between products. On Home page (or other page template) > Template section group > Add section > Click on the Product attribute table to customize this section of Eurus theme. 2. How to show the option values (columns values)? The "Criteria option" configuration allows you to specify the attribute options or values that you want to display as columns in the attribute table. Here's how you can set it up: Enter the exact name of the option used in your store, separated by commas. This should match the name of the product option you've set up in the backend. Provide variations of the option name if it's spelled differently in different languages or formats (e.g., Color, Colour, Couleur). In the admin settings: In the theme settings: If you want to use metafields for the criteria options, follow these steps: Create a metaobject with the key "product_specs_list" and add a field named "specs" (Single line text/One value). Populate the metaobject with entries representing different attribute values (e.g., "Dry Skin", "UV Protection"). Create a product metafield with the key "product_specs" (Metaobject/List of values) and link it to the previously created metaobject. Assign specific attribute values to each product via the product metafield on the admin product detail page. Fill in the key "product_specs" of the respective metafield in the "Criteria option" field. It's important to note that this setup method may not be optimal for the general public, so our team at Eurus is planning a release in the near future. For more detailed assistance or support, feel free to reach out to us. 3. How to select products in the table? In this section, click “Add product” For each block, choose the products you want to compare from your product catalog. You can add up to 5 products for comparison and a custom image for each block added. Additionally, you can customize the comparison section by adding a heading, text, or other content to provide context or instructions for users. Select the heading tag for this section to enhance the SEO of the page. Video guide of configuration can be found here. By following these steps, you can easily select and display the products you wish to compare on your website.
Sections & Blocks
1. What is a promotion banner? A promotion banner is a visual element displayed to highlight special offers, promotions, or events. It typically includes attention-grabbing graphics, text, and sometimes buttons or links to direct users to specific actions or pages. Promotion banners serve several purposes, including: Banners can feature branding elements such as logos, colors, and slogans, helping to reinforce brand identity and recognition. They often include clickable elements that direct users to relevant pages, such as product collections, landing pages, or promotional events. 2. How to show multiple images on the banner? To display multiple images on the banner, follow these steps: Look for an option to add images to the banner. Typically, you'll be able to upload multiple images directly from your device's storage or choose from existing images in your media library. Upload the images you want to include in the banner. you can add up to three images for desktop and one image for mobile devices. If you want to link the banner to a specific page or URL, find the option to add a link: “Banner link”. Enter the URL you want to link to, and make sure to set it to open in a new window if desired. By following these steps, you can showcase multiple images on the banner section of your website, enhancing its visual appeal and engaging visitors with compelling imagery. 3. Use slideshow as page hero section Enabling the "Use as hero" option in the promotion banner settings allows you to make the banner stand out as the main section at the top of a page. This gives you the ability to use the banner's eye-catching design to create an engaging introduction to your page content. Keep in mind that images used in the hero section won't be lazy-loaded, with the aim of preventing an increase in page load times and minimizing any negative impact on user experience (UX), so it's best to limit having only one hero section per page to avoid impacting performance. 4. How to add content for the banner? To add content to the promotion banner, follow these steps: Select the heading tag for this section to enhance the SEO of the page. Add images for the banner by selecting the appropriate images for desktop and mobile devices. You can add up to three images for desktop and one for mobile. Specify the banner link, which determines where users will be redirected when they click on the image. Customize the appearance of the images by adjusting settings like overlay opacity, position, and alignment. Some elements of the banner can be customized through various blocks, allowing for the rearrangement of block positions to suit your preferences. Block “Text”: Configure text content by entering the heading, subheading, and main text for the banner. You can adjust the size of the heading and text, choose the text box type and color, and add a frame if desired. Block “Buttons”: Set up buttons by providing labels and links for up to two buttons. You can customize the button colors and text styles, including hover effects. Block “Banner menu”: Add a banner menu block to your banner section. This block can be utilized to display featured collections, provide additional navigation options, and more. Select the menu that you want to display from your existing menus. Then, adjust the menu text size to your preference using the available settings. 5. How to show the flash sale countdown timer on the banner? To show the flash sale countdown timer on the banner, follow these steps: Add a countdown timer block to the banner. Configure the countdown timer block by selecting the appropriate time zone for scheduling the announcement. Choose the date and time for the timer to countdown to, specifying the year, month, day, hour, and minute. Ensure that the time selected is in the future, as the section will count down the time from the setup date to the present date. Customize the appearance of the countdown timer by selecting the desired colors for the timer itself, the text, and the background. Choose between light and dark color schemes to compliment your banner design. By adding and configuring the countdown timer block with these settings, you can display a visually striking and informative countdown to your flash sale on the banner.
Sections & Blocks
1. What is a slideshow? A slideshow is a display of a series of images or other content, typically displayed in sequence, often with added transitions between each image. It is commonly used on websites to showcase multiple images or pieces of content in a visually appealing and dynamic way. They are often used for presenting portfolios, product galleries, or highlighting key features or promotions. In Eurus theme, go to the homepage, in the Template section group, add the “Slideshow” section. 2. Use slideshow as the page hero section. "Hero" refers to the prominent section at the top of a webpage, often used to grab the visitor's attention and deliver key messages or visuals. By enabling the "Use as hero" configuration in the slideshow settings, you can designate the slideshow to serve as the hero section on a page. This allows you to leverage the dynamic and visually engaging nature of a slideshow to create an impactful introduction to the page content. Keep in mind that images used in the hero section won't be lazy-loaded, with the aim of preventing an increase in page load times and minimizing any negative impact on user experience (UX), so it's best to limit having only one hero section per page to avoid impacting performance. 3. How to set up each slide? Click “Add slide” set up each slide in the slideshow: a) Image Select an image for the slide. Optimize the image for mobile devices if necessary. Adjust the opacity of the image overlay. A higher value makes the image darker. b) Content & content position: Enter the subheading, heading, and text to display on the slide. Select the heading tag for this section to enhance the SEO of the page. Customize the labels and links for up to two buttons. Choose whether to show buttons as primary buttons with full styling or as outline buttons. Align the text and buttons on the slide. Customize the horizontal and vertical positions if needed. Choose colors for the primary button, including hover effects, text color, and hover text color. Optionally, set colors for the secondary button. These settings allow you to create engaging and visually appealing slides with customized content and styling for each slide in the slideshow. 4. How to customize the animation and styles of the slideshow? Two Layouts and Image Pagination for the Slideshow Section: Media with Text Slide: This layout displays the image and content separately, without an overlay like a regular slide. It showcases the image alongside the story or details of the product. You can change the background color of the content section. Desktop: The image and content are arranged separately on a single row, with the option to swap the left and right positions. Mobile: The image and content are arranged separately, with the option to switch between displaying the image above or below the content. To set the background color for the content section, customize the Content Background Color. You can also adjust the Button Color, Button Text Color, and other styling options to fit your theme. Three-Fold Slide: This layout features two additional images with accompanying content, providing a more comprehensive way to tell the product's story. Desktop: Two images are positioned on either side, with the content placed in between on a single row. Mobile: The two images are displayed on the same row, split into two, with the content positioned either above or below the images. There are 2 configuration groups for setting 2 images for the slide. Upload your first & second images for the slide. Check the user guide for recommended image sizes. Add mobile-optimized versions for better responsiveness. You can also paste or search for image links if needed. Add a subheading and main heading with optional text formatting. Use highlights and underlines to emphasize important text. Configure the first and the second button. Choose button styles and positions according to your design preferences. To set the background color for the content section, customize the Content Background Color. You can also adjust the Button Color, Button Text Color, and other styling options to fit your theme. Image Pagination: (Applicable only on desktop) This option previews the image of the next slide, enhancing the visual appeal of the pagination. In addition to enhancing visual appeal, this feature also functions as a navigation tool, allowing users to move back to the previous slide or forward to the next slide with a preview. You can set up pagination in the Slideshow section: To customize the animation and styles of the slideshow, follow these steps: Enable autoplay and adjust the timing for changing slides. You can typically set the duration to change slides every 5 to 10 seconds. Choose the pagination style that best fits your design. Options may include none, dots, or bars for indicating slide progress. Select the transition style for slide changes. Common options include slide or fade effects. If desired, enable the parallax effect. This adds depth to the slideshow by moving background images at a slower rate than foreground content: Theme settings => Design => Enable “Disable parallax effect". By disabling this configuration, you effectively enable the parallax effect for the slideshow. Adjust the height of each slide to ensure it displays optimally within your web page layout. Customize the padding around the slideshow to control its spacing within the page content.
Sections & Blocks
1. What is media with text? The "Media with text" layout typically consists of one or more media elements, such as images or videos, alongside text content. The media elements serve to capture attention, evoke emotions, or showcase products, while the text content provides explanations, descriptions, or calls to action. 2. How to set up the media with text? In the Theme editor, select your desired page, and under the "Template" section group, add the Media with text section to your preferred location. Then follow these simple steps: Choose image/video: Choose one or two images or a video to feature in the section. 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. Use text blocks to add content such as subheadings, headings, and descriptions to the section. Select the heading tag for this section to enhance the SEO of the page. 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. Customize the color of the heading and text, choosing between light or dark options. Configure buttons with labels and links to facilitate user interaction and engagement by using button blocks. Then, set up layout & padding: Adjust the height and width of the images separately for desktop and mobile devices to ensure optimal display. Customize the layout and corner radius of the images to suit your design. Align the images as desired and configure the content layout and text position for optimal presentation. Enable the "Add spacing between images" option. When selected, a small fixed spacing will be added between two images. This spacing only applies when there are exactly two images. Choose whether the section should span the full width of the device or adhere to a predefined width. Select the background color for the section, opting for either a light or dark theme. Set padding for the top and bottom of the section to control spacing.
Sections & Blocks
1. What is a scrolling promotion? The Scrolling section is designed to showcase various calls-to-action and promotions dynamically. This moving display captures the attention of visitors, making it an effective tool for highlighting key offers and driving engagement. By incorporating this section, you can ensure that important promotions do not go unnoticed. Whether you're promoting a sale, a new product, or a special event, the Scrolling Promotion section adds a lively and interactive element to your store's homepage. 2. How to set up the scrolling promotion? a) Configuration Blocks Text block Enter the text to display on the scrolling bar. Adjust the size of the text (range from 50% to 200%). Icon block Choose from the list an icon to display on the scrolling bar. Note: We provide 21 premade icons to help you easily customize. However, you can also customize icons by using SVG code or add custom images as icons. Adjust the height of the icon (range from 20px to 150px). Button block Enter the label of the button on the scrolling bar. If left empty, the button will be hidden. Enter the link the users will be redirected to when they click the button. Tick the checkbox “Show as primary button” to set the button's styles to be the same as the style of the primary buttons. Otherwise, it will follow the outline button's style. Image block Choose an image to display on the scrolling bar. Click the "Select image" button to choose an image from your library or free image resources. Adjust the height of the image (range from 20px to 150px). b) General settings: Select the heading tag for this section to enhance the SEO of the page. Adjust the spacing of each element on the scrolling bar (range from 10px to 150px). Tick the checkbox "Show section borders" to display borders around the scrolling bar. Scrolling Adjust the scrolling speed to run a full round of content (range from 6s to 50s). Adjust the scrolling direction (Left to right or Right to left). Tick the checkbox “Pause on hover” to pause the scrolling bar when the user hovers over it. Style Choose the background color of the scrolling bar to display in light/dark mode. Choose the text color of the scrolling bar to display in light/dark mode. Adjust the padding on bottom/top of the section (range from 0 to 100 px).
Sections & Blocks
1. What is a promotion grid? A promotion grid is a section that displays promotions using images or videos along with short descriptions and optional labels. Unlike product grids, promotion grids don't directly show products; instead, they provide links to specific products or collections. They're useful for highlighting special offers and drawing attention to specific promotions or products. 2. How to set up the media? To set up the media with the given settings: Click on the "Add promotion" button to add a new promotion block. a) Image: Click the "Select image" button to choose an image from your library or free image resources. After selecting the image, you can click "Change" to replace it with another image. Set the overlay opacity by adjusting the slider. A higher value will make the image darker. Enter the URL where users will be redirected when they click the image. b) Video: If you choose to add a video, click the "Select video" button to choose a video from your store's data. Enter the URL of the video in the "Embed Video From URL" field. Only YouTube and Vimeo videos are supported. Tick the checkbox next to "Enable video autoplay" if you want the video to play automatically. 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. Enter alt text for the video in the "Video alt text" field. Once you've configured all the settings according to your preferences, you can save the changes and the media block will be set up accordingly. 3. How to modify the height and width of each media block? a) Section settings: Adjust the number of columns displayed on desktop devices. Set the spacing between blocks within the section. Define the height of each row of media within the section. For mobile layout, the settings are similar to desktop layout, but the number of columns is limited to 1-2 columns. b) Promotion block Adjust the number of columns wide by selecting a value between 1 and 6. This determines 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. Adjust the number of rows tall by selecting a value between 1 and 6. This determines the height of the media block. Enter the title of the media block in the provided field. Adjust the size of the title by selecting a percentage value between 50% and 200%. Enter the content of the media block in the provided text field. Choose the alignment of the content (Left, Center, Right) using the provided options. If you want to include a button on the media block, enter the label of the button in the "Button label" field. Enter the link where users will be redirected if they click on the button in the "Button link" field. 4. 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 (ranging 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. 5. How to add a sale label to the promotions? Sales labels can be added to promotions to highlight campaigns.To execute this function, navigate to the Sale label settings group within each individual promotion. Here, users can input up to three lines of text and apply various styling configurations: Enter the content for each line of the sale label in the respective fields (Line 1, Line 2, Line 3). This could include promotional messages like "SALE", "50% OFF", or any other relevant information. Adjbetween 50% and 200% in the corresponding "Line X font size" fields. ust the font size for each line of the sale label by selecting a percentage value Choose the position of the sale label from the available options: Top left, Top right, Bottom left, Bottom right. Choose the style of the sale label from the available options: Square, Circle, Flag, Angle. Select the background color of the sale label by choosing a color from the available options. Choose the text color of the sale label by selecting a color from the available options. Example: Circle Example: Flag
Sections & Blocks
1. What are recently viewed products? Recently viewed products are a feature that display items that a user has previously looked at during their browsing session. This section benefits your store by enhancing user experience, increasing engagement, and maximizing sales opportunities through personalized recommendations and convenient access to previously viewed items. 2. How to set up recently viewed products? Enter the title for the section, default is "Recently viewed products". Adjust its size. Select the heading tag for this section to enhance the SEO of the page. Tick the checkbox “Enable Clear History” to allow users to clear their viewing history manually. Tick the checkbox “Show Section Divider” to display a divider above this section. Set the maximum number of products to display in the section (2 to 10). Use the setting “Number of Columns on Desktop” to adjust columns displayed (1 to 5) and enable carousel. Select to display vendor name and product rating. In the “Mobile Layout” setting group, you can adjust number of mobile columns (1 or 2) and enable swipe functionality. Adjust top and bottom padding (0 to 100px) at the setting of section padding. 3. Why are there no products shown after I dragged and dropped the section in the page template? It's likely that there are no products shown in the section because you haven't viewed any products yet. To resolve this, try the following steps: Click on a different product to view it. Return to the section “Recently viewed products” on the previous page The products you just viewed should now appear in the section. This process ensures that the section displays products based on your browsing history, showing recently viewed items for your convenience.
Sections & Blocks
1. What is a logo list? The Logo List section allows you to display a series of logos in a visually appealing way. This is typically used to showcase brand partnerships, client logos, or any affiliations your store might have. This section is perfect for building credibility and trust with your customers by highlighting your associations with well-known brands or clients. You can add multiple logos and configure their appearance to align with your store's design. 2. How to add logos to the section? Step 1: Adding a Logo Block Click the "Select image" button to choose an image for the logo from your library. Enter the URL that users will be redirected to when they click the logo. Step 2: Configuring Style and Layout Adjust the range slider (0 to 100px) to set the corner radius of all logo images, giving them rounded edges if desired. Adjust the number of columns to be displayed on desktop devices to control how many logos appear in a single row. Choose the background color for the logo list section in either light or dark mode to match your store's theme. Tick the checkbox "Enable Carousel on Desktop" to display logos in a sliding carousel format on desktop devices. Tick the checkbox "Auto-switch Logo" to enable the automatic switching of logos. Adjust the range slider (3 to 9 seconds) to set the interval for auto-switching logos. Note: This setting only works if the "Auto-switch Logo" option is enabled. Tick the checkbox "Show Navigation" to display navigation arrows, allowing users to manually slide through the logos. Choose the layout for mobile devices, either Carousel or Stacked. This setup will ensure your logo list is both functional and visually appealing, enhancing the professional look of your store. 3. How to set up the section layout? To configure the section layout effectively, follow these settings to customize the heading, width, dividers, mobile layout, and padding: Enter the heading of the section to provide a title or context. Adjust the size of the heading (range from 50-200%) to make it prominent. Select the heading tag for this section to enhance the SEO of the page. Adjust the padding at the bottom/top of the section (range from 0 to 100 px) to create space above the content. These settings will help you tailor the section layout to your design preferences and ensure it looks great on both desktop and mobile devices.
Sections & Blocks
1. What is collage? A collage 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 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. 2. How to set up the collage section? To set up the collage section, please follow these simple steps: a) General settings: Enter the title 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 any supplementary information or description. Choose the background color for light or dark mode. b) Block settings: Admin can add blocks to incorporate various types of content. The Eurus theme supports four types of blocks: Image block: Select an image from your library or free resources. Enter the URL for the image link. Maintain the original aspect ratio of the image. Video block: Choose a video from your store’s data. Paste the URL of a YouTube or Vimeo video. 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. Provide alternative text for the video. Product block: Select a product from your store to display in the section. Set up Product Cards in the section setting: Set up to display the product vendor information & optionally include product ratings in the display. Collection block: Choose a collection from your store to feature in the section. 3. How to modify the height and width of the section and each media block? a) Section setting Adjust the number of columns displayed on desktop devices. Set the spacing between blocks within the section. Define the height of each row of media within the section. For mobile layout, the settings are similar to desktop layout, but the number of columns is limited to 1-2 columns. b) Block setting Configure the layout settings for each individual block within the section. Set the number of columns wide for the block. Specify the number of rows tall for the block.
Sections & Blocks
1. What is shop the look? Shop the Look is an interactive feature commonly used in homepage to enhance the shopping experience. It allows customers to view and purchase an entire outfit or collection of related items that are styled together. This feature is designed to support and guide upsell strategies by recommending products that complement each other. 2. How to add a shoppable image to the section? To add a shoppable image to the "Shop the Look" section and customize its settings for both desktop and mobile devices, you can follow these steps. This guide will help you set the image, adjust its height, and configure the section's width and padding. Add Images for Desktop and Mobile: Click the “Select image” button under the Image option. Choose the image you want to display on desktop/mobile devices. upload separate images optimized for each device type to ensure that the image height is suitable for both desktop and mobile views. Under “Desktop image alignment”, select either Left/Right/Layered Section settings: Find the field labeled “Heading” and enter the desired heading text. Use the slider or input box to adjust the heading size. Select the heading tag for this section to enhance the SEO of the page. Tick the checkbox labeled “Make section full width” to set the section’s width to match the full width of the user's device. Tick the checkbox labeled “Show section divider” if you want a divider to separate this section from the one above. 3. How to add products to show as image hotspots? To add products as image hotspots in the "Shop the Look" section, you need to configure each product and its hotspot position for both desktop and mobile views. Here's a step-by-step guide on how to add and configure these hotspots, as well as customize the content displayed for each product. Adding Products as Image Hotspots In the "Shop the Look" section settings, add a new block by selecting Add block. Select the product you want to associate with the hotspot by clicking the Choose product button. Choose the color of the hotspot by selecting a color from the color picker. This color will be used to mark the hotspot on the image. Use the horizontal position slider to adjust the hotspot's position on the x-axis. A value of 0% places the hotspot near the left border, while 100% places it near the right border. Use the vertical position slider to adjust the hotspot's position on the y-axis. A value of 0% places the hotspot near the top border, while 100% places it near the bottom border. You also can set up hotspot positions for mobile devices separately. Customizing Product Cards For each product hotspot, you can customize the product card display to enhance user experience. These settings apply to how the product information is shown when a user interacts with the hotspot. Adjust the ratio of the featured image (e.g., 1:1, 4:3). Choose the alignment of the content (Left, Center, Right). Select the size of the product card for desktop (Small, Medium, Large). Enable “Show Quick View Button” to allow users to quickly view product details. Display the vendor name and/or product ratings Notes: You can add up to 5 products as hotspots in the "Shop the Look" section. Ensure hotspots and product cards are tested on both desktop and mobile devices for optimal user experience. Example:
Sections & Blocks
1. What is video? A video section is a part designed to embed and display a video. It is used when the goal is to have visitors concentrate on the video content without the additional elements that might be present in a video hero section. This section is ideal for detailed product demonstrations, in-depth tutorials, or any content that requires the viewer's full attention. 2. How to add video to the section? To enhance your section with engaging video content, follow these steps to add and customize a video: Heading Provide a heading for the video 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. Add a smaller subheading to display under the main heading. Cover Image: Choose an image from your library to set as the cover of the video. This cover image will appear before the customer clicks play, making it an excellent opportunity to show promotions or catch attention. By selecting a visually appealing and relevant image, you can effectively draw in viewers and create a strong first impression. Video Source Options Click the Select video button to choose a video from your store’s data. If you prefer not to choose a video from your store’s data, you can use an existing video from YouTube or Vimeo by pasting the URL of the video. If both a Shopify-hosted video and an embedded URL are provided, the embedded URL will take priority. 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. Provide alternative text for the video to improve accessibility and SEO. Layout and Appearance: Tick the checkbox “Make Section Full Width” to make the video's width span the full width of the user’s device. If disabled, the video’s width will match the page width set in the theme settings.
Sections & Blocks
1. What is a video hero? A Video Hero section is a prominent, visually impactful part of a website that features a video as the background or central element, often with overlay text and call-to-action buttons. This section is designed to grab visitors' attention immediately upon landing on the page and to create a strong, memorable first impression. This section is perfect for creating visual effects and emphasizing key messages. In contrast, the video section is best when you want visitors to focus solely on the content of the video. 2. How to set up the video hero? To effectively set up the Video Hero section and make it a visually appealing centerpiece on your site, follow these steps: Enter the subheading to display above the main heading in a smaller size. Enter the main heading text for the promotion banner. Adjust the heading size, ranging from 50% to 200%. Select the heading tag for this section to enhance the SEO of the page. Video Upload/Link Click the "Select video" button to choose a video from your store's data. Embed Video From URL: Enter the URL of the video. Only YouTube and Vimeo videos are supported. If both a hosted video and URL are provided, the URL will be prioritized. 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. Enter alt text for the video to improve accessibility and SEO. Button Configuration Enter the text for the button that appears on the banner. Enter the URL where users will be directed when they click the button. Adjust the alignment of the button (e.g., Left, Center, Right). Choose the color of the primary button if the "Show as Primary Button" option is enabled. By configuring these settings, you can create a compelling Video Hero section that not only captures attention with visual effects but also directs visitors to key areas of your store.
Sections & Blocks
1. What are testimonials? Testimonials are sections that contain statements or endorsements given by customers, clients, or users of a product or service, expressing their satisfaction and positive experiences. They serve as social proof, highlighting the value and benefits of what you offer, and can be presented in various formats, including written text, image and star ratings. 2. How to set up the testimonials? To set up the testimonials section on your website, follow these steps to add and configure blocks, customize layout and display settings, and manage individual testimonial reviews. Section setting: Enter the heading for the testimonials section in the Heading field (e.g., "What Our Customers Say"). Adjust the size of the heading using the Heading size slider (range from 50-200%). Select the heading tag for this section to enhance the SEO of the page. Choose the text alignment (Left, Center, Right) for the heading and testimonials using the “Text alignment” option. Select Multiple to show 3 items at a time on the screen or Single to show only one item at a time. You can tick “Enable auto-play” to automatically transition between testimonial. Specify the duration in seconds between each testimonial transition by using config “Change slides every”. For example, setting this to 5 seconds will change slides every 5 seconds. Choose the background color for the section and background color for individual testimonial blocks in light and dark modes. Set the color for the heading, title and text color for testimonials. Adjust the padding at the top and bottom of the section(range from 0 to 100 px), and optionally show a section divider on top of the section. Adding and Configuring Testimonial Blocks Click on Add Testimonial to add a new testimonial block. Choose an icon for the review, either a Quote or 1-2-3-4-5 stars. Enter a title for the review in the Title field (e.g., "Excellent Service"). Enter the review text. Click the Select image button to upload or choose an image for the author from your library or free image resources. Enter the author's name. Add additional information about the author in the “Author's note” field, such as their address, associated product, or specific characteristics. Notes Ensure the testimonials are visually appealing and easy to read. Adjust the text alignment, padding, and colors to fit your website’s overall design. Regularly update the testimonials section with new reviews to keep the content fresh and relevant. >>> Create a faster photo and video review system for your Shopify store by importing and requesting reviews from anywhere. Try for free here!
Sections & Blocks
1. What is email signup? The Email signup section is a component designed to capture email subscriptions from visitors. It typically includes a newsletter form where users can enter their email addresses to subscribe to updates or promotions. Additionally, this section may feature added text to provide context or incentive for users to sign up. 2. How to set up the section? To set up the Email signup section, please follow these steps: a) Add text blocks: Heading block: Enter the heading for the email signup section and adjust its size. Select the heading tag for this section to enhance the SEO of the page. Text block: Enter the message users will see below the heading. Email form block: Customize the text for the subscribe button. The default is "Subscribe". Choose between Small or Large for the width of the email form. b) General section settings: Optionally upload images for desktop and mobile views. Adjust the opacity of any overlay on the background image. Choose the background, text, button and line colors for the section in light or dark mode.
Sections & Blocks
Overview The Custom Liquid section allows you to add custom Liquid code directly into your theme. This powerful feature lets you create highly customized content and functionality on your Shopify store. Use the Custom Liquid section when you need to: Add custom text, products, collection templates, images, or other custom elements that are not available through the standard Shopify settings. Implement advanced customizations that require specific Liquid code. Create dynamic content that changes based on specific conditions or inputs. To add the Section, please follow these simple steps: In your Shopify admin, go to the theme editor. Click on the “Add section” button in the left-hand navigation bar and search for Custom Liquid. Once you add the Custom Liquid section, a textbox will appear on the right-hand side where you can enter your Liquid code. This code can include a wide range of elements, from simple text to complex dynamic content. With Liquid, you can: Display text or HTML content; Embed products, collections, and other store data dynamically… Support and Tips: Technical Support: If you need assistance with technical issues or customizations, contact Eurus theme support. Tips: One of the significant benefits of using the Custom Liquid section is that your customizations will not be lost when the theme is updated. This ensures that your store maintains its unique customizations without the risk of losing them during updates.
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: 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. 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 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> Custom data > 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 let 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. How to add questions and answers? In the Theme editor, navigate to Theme sections, select your desired page, and under the "Template" section group, add the FAQ section to your preferred location. By default, there are 4 frequently asked question blocks within the FAQ section, you can add more by clicking on Add block. 🤔 How to set up each Q&A block? Click on one Frequently asked question block and to open the setting panel, you can change: Icon: 3 options: Choose your favorite icon from the drop-down list. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. Enter an SVG code. Question: Fill in the question Answer: Fill in the corresponding answer. 3. How to customize the FAQ section setting? After adding an FAQ section, click on it to open the settings panel and you can: Heading: Enter a heading for the whole FAQ area. Put some words inside the [] brackets to add a highlight effect. Marker: Choose the highlight effect of the heading to be Underline or Font highlight. Heading size: Drag the bar or enter a specific number to change the size. Heading tag: Give the heading a tag for SEO purposes. Heading alignment: Change the position of the heading to the left, center, or right side. Show border: Tick to add a border around the question box. Rows alternative background: Tick to add a background to the question box. This will disable the Show border feature above. Collapsible: Tick to hide the answer to a question, and will be expanded when someone clicks on the down arrow. Untick it to make the answer always visible. Show "View all" button: Tick to show the View all button. "View all" button position: Choose its position to be on Top or at the Bottom. "View all" button link: Paste a link for the View all button. Image: Add an image above the FAQ content. SEO > Enable microdata schema: Tick it for SEO purposes. For more information, check out this guide about Microdata schema. Desktop layout: Desktop layout: Make the layout 1 or 2 columns on the desktop Image alignment: Change the image alignment to left or right Desktop image height: Choose the image height. Show section divider: Add a divider line between the FAQ section with others Make section full page wide: The FAQ items will span the entire width of the page when displayed in a single column. Top padding & Bottom padding: Add a top & bottom padding for FAQ section Mobile layout: Image alignment: Choose to put the image before or after the Q&A section. Mobile image height: Choose the image height. Show section divider: Add a divider line between the FAQ section with others Top padding & Bottom padding: Add a top & bottom padding for FAQ section 4. 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. This simplifies the process of setting up an FAQ page, allowing users to quickly create and customize it to their needs. 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.
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 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. 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. 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. 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.
