Flow Gallery
The Flow Gallery section allows you to create an engaging visual storytelling experience by combining a main banner image with multiple scrolling images. This section is ideal for showcasing collections, campaigns, or featured products with smooth scrolling effects and interactive visuals.
1. How to Add the Flow Gallery Section
- Log in to your Shopify Admin.
- Go to Online Store >> Themes.
- Click Customize on the Emoll-Apario theme.
- In the Theme Editor, click Add Section.
- Select the Flow Gallery section.
- Click Save to apply your changes.
2. Flow Gallery Settings
The Flow Gallery section includes multiple customization options that allow you to control layout, text, and visual appearance of the gallery.
- Scrolling Style: Choose between different scrolling styles (e.g., Style 1, Style 2) to control how images animate within the section.
- Main Heading: Add the primary heading text displayed at the top of the section.
- Heading Size: Select the heading size (H1, H2, etc.) based on your design preference.
- Heading Display: Choose between default or uppercase text styling.
- Heading Alignment: Align the heading to the left, center, or right.
- Image Alignment: Set how the main image and scrolling images are positioned (e.g., stacked).
- Image Max Width: Adjust the width of the main image using the slider.
- Image Heading: Add a secondary heading displayed over or near the main image.
- Select Image: Upload or choose the main banner image for the section.
- Aspect Ratio: Choose the shape of scrolling images (e.g., square).
3. Scrolling Image Block Settings
Each scrolling image acts as an individual block inside the Flow Gallery section. You can add multiple scrolling images to create a dynamic visual flow.
- Add Scrolling Image: Click this option to add a new scrolling image block.
- Select Image: Upload an image or choose one from your media library.
- Title: Add a label or caption for the scrolling image (e.g., collection name).
- Image Link: Link the image to a product, collection, or custom page.
- Open Link in New Tab: Enable this option to open the link in a new browser tab.
