Sections & Blocks

Text columns with images

Sections & Blocks

Text columns with images

on Jun 09, 2024

1. What are text columns with images? Text columns with images is a layout feature commonly used to present information in a visually appealing and organized manner. This layout typically involves dividing a section into multiple columns, each containing a combination of text and images. It's an effective way to highlight key information, showcase features, services, or products, and create a balanced visual experience. 2. How to add column items? To add column items with images and text in a Text Columns with Images section for your store, you need to follow these steps.  Click on the Add section and select Text Columns with Images. Enter the section heading. Adjust the heading size, text alignment, background color, and padding as needed. Click on Add column to add a new column item. Click Upload images to upload an image or select an existing image from your library. You can crop or adjust the image as needed. Enter the main heading and subheading (if needed) for the column item. Adjust the heading size and enter descriptive text. Enter the label for the call-to-action button. Paste the URL or search for the link that the button will lead to. Choose between Primary and Secondary button styles depending on your design preference 3. How to set up the section layout? To set up the section layout for your clothing store using the provided configuration options, follow these steps.  Heading Settings Enter the main heading for the section (e.g., "Discover Our Latest Collections"). Adjust the heading size using the slider (default is 100%). Choose the appropriate HTML tag for the heading (e.g., H2 for secondary headings). Background and Colors Configure any secondary background if applicable. Set the background for individual columns. Choose the style for images within the columns (e.g., Landscape 4:3). Set the background, heading, and text colors for both light and dark modes. Layout and Spacing Choose the number of columns to display on desktop (e.g., 3 columns). Set the spacing between blocks. Add left and right padding when the section is full-width. Adjust the padding at the top/bottom of the section. Mobile Layout Choose the number of columns to display on mobile (e.g., 1 column or 2 columns). Set the spacing between blocks on mobile (default is 16 px). Adjust the padding at the top of the section on mobile (default is 20 px). Adjust the padding at the bottom of the section on mobile (default is 20 px). By organizing and configuring these settings, you can create a visually appealing and responsive section layout for your clothing store that enhances user experience across all devices.

Collection list carousel

Sections & Blocks

Collection list carousel

on May 27, 2024

1. What is a Collection list carousel? The Collection List Carousel is a dynamic feature that presents your collection list in a visually engaging way. It allows you to showcase promotions or banners on one side while displaying related collections on the other. This layout is designed to provide an interactive and eye-catching experience for customers, enabling them to easily browse through various collections without feeling overwhelmed.  2. How to add collections in the section? To add a collection to your section, follow these steps and configure the settings accordingly: Step 1: Customize collection block Add the block Collection. Choose the collection you want to display from your store. Enable “Use collection description” to use the description of the selected collection. Enter an alternative description if you prefer not to use the collection's default description. Adjust the opacity of the overlay to enhance visibility and aesthetics. Enter the label for the button. The button directs to the selected collection page by default. Customize the color to match your theme or branding. Step 2: Setting up layout and appearance 2.1. Collection Card Choose the style of the image (e.g., original, rounded, etc.). Adjust the size of the collection title. Align the content to the Left, Center, or Right. 2.2. Grid Set the number of columns to be displayed on desktop devices. Choose between 1 column or 2 columns for mobile devices. 2.3. Layout Select the position of the image (Left or Right). Tick the checkbox “Make section full width”  to set the section’s width to match the full width of the user's device.  Tick the checkbox “Show section divider”  to display a divider that separates this section from the one above it. Adjust the padding for desktop and mobile devices to ensure optimal display. These configurations will help you effectively showcase your collections in a visually appealing manner, enhancing the shopping experience for your customers. 3. How to configure the image? Adding an image to this section is an excellent way to display promotions, calls-to-action, or banners, offering additional information about the selected collections. Here's how to configure the image in the section to ensure it complements your content effectively: Adding and Adjusting the Image Click the "Select image" button to choose an image from your library or explore free image resources. Use the image ratio setting to adjust the display ratio of the image. This helps ensure the image looks great in your section. Configure the position of the image within the section. Depending on the section, you might have options to place the image on the left, right, or center. Configuring Text in the Section Enter the heading of the section. Adjust the size of the heading (range from 50% to 200%) to make it more prominent or subtle. Choose the heading tag (e.g., H1, H2, H3) to define the HTML tag for the heading. Enter the text or subheading to display under the heading with a smaller size. Adjust the alignment of the heading (Left, Center, Right) to position the text appropriately within the section. By following these steps, you can configure both the image and the text within your section to create a visually appealing and well-organized layout. This setup is ideal for highlighting key information and ensuring that your content is both engaging and informative.

Page

Sections & Blocks

Page

on May 27, 2024

The Page section allows you to directly add the content of one page into the template of any other page. This is particularly convenient when you have content that needs to be reused across multiple pages. Admins do not need to recreate sections or text on different pages, saving time and ensuring consistency. Key Configurations Choose which page's content you want to display in this section. This allows for seamless integration of pre-existing content into new templates. Tick the checkbox “Make section full width”  to set the section’s width to match the full width of the user's device.  Tick the checkbox “Show section divider”  to display a divider that separates this section from the one above it. Customize the padding for desktop and mobile devices to ensure optimal display Note: The heading of a page used as a section should not be set as H1, as it may conflict with the H1 of the main page where the section is added. To avoid SEO issues, ensure that there is only one H1 tag per page.

Product comparison table

Sections & Blocks

Product comparison table

on May 15, 2024

1. What is the product comparison table? A product comparison table is a structured layout presenting a side-by-side comparison of multiple products. It typically includes various features, specifications, and attributes relevant to the products being compared, allowing customers to easily evaluate and make informed decisions based on their preferences and requirements. This table format provides a clear and concise overview of each product's strengths, weaknesses, and key characteristics, aiding customers in comparing different options and selecting the most suitable one for their needs. 2. How to set up the product comparison table? a) General settings: To set up the product comparison table, follow these steps: Text: Specify the heading for the table. Adjust the size and alignment of the heading. Customize the "View more" button label and link if needed. Table: Select up to five products to compare. Define the text to display for empty fields. Choose the product image ratio (e.g., square). Colors & Layout: Customize the background, criteria, heading, text, and line/border colors for both light and dark themes. Configure the desktop and mobile layout settings, including full width, section divider visibility, and top/bottom padding. b) Compare related products (on product page only) To improve the shopping experience on product pages, admin can add a feature that automatically fills the comparison table with similar products based on similar category or purchase history. This uses Shopify's recommendation rule, which looks at customer behavior and product details to suggest relevant items. This feature doesn't just make comparison easier, it also encourages customers to explore related products. This could lead to more cross-selling and overall customer satisfaction. This is the main product, and the automatically generated product comparison table corresponds to it. By configuring these settings, you can create a comprehensive and visually appealing product comparison table, allowing users to easily compare multiple products and make informed purchasing decisions. Adjust the content, colors, and layout to align with your brand's identity and design preferences. 3. How to add criteria to compare? To add criteria to compare, add the needed blocks: a) Use default product information to compare Use the blocks available within the section. There's no limit to the number of blocks you can add: Include various blocks and showcase default product information for comparison. Customize settings within each block as needed.  Add Product Summary block to show product image, name, price, and other relevant details.  Use blocks Variant option to display variant options such as material, size, or color. Please make sure to enter the exact name of the product option. Enable color swatches if needed. Add Description/Buttons/Rating/Vendor name blocks to provide additional information or actions related to the product. Note that there are no customizable settings available for these blocks. b) Use product metafields Add a "Product metafield" block and enter the metafield key to access and display custom product information. Please refer to the documentation of Shopify here to create metafields.  Detailed guide to set up: Step 1: Create metafields: In the Shopify admin, navigate to Settings => Custom data => Metafield Definitions => Products, and add a definition. Provide a name, Namespace, and key (optionally enter Description). Select a suitable type, such as text or number. Be noted to Choose "One value", and then save. Step 2: Set up the metafields for each product Go to Admin => Products. For individual products, select the product, find the metafields section, and enter the values. Save the configuration. For bulk editing, select all products you want to set up. Add a column if not already present and choose the metafield created in the previous step. Step 3: Add block Product Metafield Open the Theme editor, locate the Product comparison table section, and add a Product metafield block. Enter the metafield key to access and display custom product information within the comparison table. If you need any support, feel free to contact us. Click on this link to create a support ticket. Our team will be happy to help you. 

Image comparison

Sections & Blocks

Image comparison

on May 15, 2024

1. What is image comparison? Image comparison is a section that allows users to compare two different images side by side, highlighting their distinct characteristics or differences. It's commonly used to showcase before and after images, product comparisons, or visual transformations, enabling users to easily discern changes or variations between the two images. This feature enhances user experience by providing a clear and visual representation of differences, aiding in decision-making or understanding of the content being presented. 2. How to set up image comparison? To set up image comparison, follow these key configurations: Section Heading: Specify the heading for the section & Adjust heading size and tag. Before and After Images: Upload images for before and after comparisons. Specify heading inside the image, its size, and position (start, middle, end). Desktop and Mobile Layout: Choose to show images in horizontal or vertical layout. Customize desktop and mobile image heights. Set corner radius for images. Configure section width and padding. Show or hide section dividers. Adjust top and bottom padding. Styles: Customize heading and background colors for light and dark themes. 3. How to add heading and additional text to the section? To add a heading and additional text to the section, follow these steps: a) Heading Block: Add a "Heading" block to the section. Customize the following settings: Optionally, provide a subheading for additional context. Enter the main heading text & Adjust the size of the heading. Choose the HTML tag for the heading (e.g., H1, H2, etc.). Add any additional text content. Choose the color for the heading text. b) Button Block: Add a "Button" block to the section. Configure the button settings: Enter the text for the button & Paste the URL link for the button. Optionally, check this box “Show as primary button” to highlight the button as the main call-to-action. Set up the color for the button to match your branding or design scheme. By adding these blocks and configuring the settings accordingly, you can easily include a heading and additional text, as well as a button, within your section. When these blocks are added, the text block will appear beside the image. Adjust the content and styling to align with your brand's identity and messaging.

Flow

Sections & Blocks

Flow

on May 08, 2024

1. What is a flow? The "Flow" section in the Eurus theme is a visually engaging component designed to showcase a sequence of elements, often used to introduce collections or product lists. It accommodates up to six content blocks across three types, promoting organized and visually appealing content presentation. Users can seamlessly explore various collections or products, enhancing their interactive experience on the website. 2. How to showcase different products or collections as each step in the flow? To showcase different products or collections as each step in the flow: Choose either the "Products" or "Collections" block. Products Block: Automatically displays images of products, allowing customization of text, headings, and other details. Collections Block: Similar to the Products block, but showcases collections’ information instead. Add custom text and headings to provide context or highlight key features of the products or collections being showcased. Optionally, add links to specific products or collections using buttons or custom links. This allows users to easily navigate to the desired product or collection for further exploration or purchase. 3. How to show custom images or videos at each step? Add a media block and choose between uploading an image or video by follow these simple steps: You can upload images directly or select a video uploaded to Shopify. Alternatively, if no Shopify-hosted video is chosen, you can provide a URL from YouTube or Vimeo.  Customize the heading and description by adding text content to provide context or information related to the image or video.  Enter the text for the button and paste the link for it. Optionally, check "Show as primary button" to highlight this button as the main action. 4. How to change the layout of the section? To change the layout of the section, use the settings within the section itself.   Adjust the desktop layout and choose the image position.  Expand the section to fill the entire width of the screen and add left and right padding when it's full-width.  Optionally display a divider above the section and adjust the height of the section for desktop devices.  Add padding at the top and bottom of the section.  Similar settings are available for mobile devices as well. These settings allow for comprehensive layout customization directly within the section editor.

Collection list banner

Sections & Blocks

Collection list banner

on May 08, 2024

1. What is a collection list banner? Typically displayed prominently on the homepage or a dedicated landing page, the Collection List Banner provides an organized and visually appealing way for users to browse through different product categories or collections. This section serves as a navigational aid, helping users quickly find and access the products they are interested in. It also helps to highlight featured or seasonal collections, promote new arrivals, or showcase best-selling categories. 2. Use section as the page hero "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 collection banner? You can add up to six banners for this section, each configured with its own collection, title, image or video, text content, button, and visual styles. This allows for a dynamic and visually engaging presentation of multiple collections or promotional content within the section. Here's a brief overview of the configuration options for each block: Choose the collection to feature in the banner. Enter a custom title for the banner. If there's no custom title provided, it will use the selected collection's name. You can upload or explore free images for the banner, including separate options for mobile devices. Choose a video hosted on Shopify or embed one from a URL (supports YouTube and Vimeo).  You can add a subheading and main heading for the banner, adjusting the size and HTML tag for the heading. Additionally, you can include extra text content for the banner, with the option to use the collection description. Enter the label and link for the button, with the option to display the button as the primary style. Choose the position of the banner. (Custom Horizontal Position & Custom Vertical Position are only used with custom positions) Set the alignment of the content (left, center, right). Choose the color for text and button shown on the banners. 4. How to customize the animation and styles of the banner? 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 banners every 5 to 10 seconds. Choose the pagination style that best fits your design. Options may include none, dots, or bars for indicating banner progress. Select the transition style for banner changes. Common options include slide or fade effects. If desired, enable the parallax effect. This adds depth to the banner 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 banner. Adjust the height of each banner to ensure it displays optimally within your web page layout. Customize the padding around the banner to control its spacing within the page content.

Map

Sections & Blocks

Map

on May 03, 2024

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. 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.

Product attribute table

Sections & Blocks

Product attribute table

on Apr 15, 2024

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. 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. 

Promotion banner

Sections & Blocks

Promotion banner

on Apr 15, 2024

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: 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.

Slideshow

Sections & Blocks

Slideshow

on Apr 15, 2024

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. 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? 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.

Media with text

Sections & Blocks

Media with text

on Apr 15, 2024

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. Use text blocks to add content such as subheadings, headings, and descriptions to the section. 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. 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.

Scrolling promotion

Sections & Blocks

Scrolling promotion

on Apr 11, 2024

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: 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).

Promotion grid

Sections & Blocks

Promotion grid

on Apr 11, 2024

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. 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

Recently viewed products

Sections & Blocks

Recently viewed products

on Apr 11, 2024

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. 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.

Logo list

Sections & Blocks

Logo list

on Apr 11, 2024

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. 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.

Collage

Sections & Blocks

Collage

on Apr 11, 2024

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. 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.

Shop the look

Sections & Blocks

Shop the look

on Apr 11, 2024

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. 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:

Video

Sections & Blocks

Video

on Apr 11, 2024

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%. 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. 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.

Video Hero

Sections & Blocks

Video Hero

on Apr 11, 2024

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%. 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. 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.