Flow

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