Flow Cards

by Admin on Jan 02, 2025

1. What is Flow Cards?

The Flow Cards section presents a sequence of visual cards, ideal for guiding customers through product features, service steps, or storytelling. Each card can showcase a mix of text, images, and buttons to communicate clear and engaging content in a step-by-step or process-oriented layout.

2. Section Components

Section		Display a sequence of content or guide customers through a series of steps using visually appealing cards.
Available blocks		Used to link straight to a product page.
		Used to link straight to a collection page.
		Used when you just want to show an image or video.

3. Location & Setup

Go to “Online Store” > “Themes” > “Customize”.
Select where you want to place it
Click "Add Section".
Search for Flow Cards.
Click on it to add.

4. Highlight features

Step-by-Step Presentation
Arrange content in a step-based flow to guide customers through a series of actions or product features.
Visually Layered Cards
Create a visually stacked card effect to add depth and highlight each step.
Interactive Hover Effects
Add hover animations to each card, making them visually engaging when interacted with.
Progressive Navigation
Show progress through a series using indicators, making multi-step processes intuitive.

5. Common Use Cases

🤔 How to set up the Flow Cards?

The Flow Cards might be used in different cases, depending on your needs. Follow this common guide to set up the basic things:

STEP 1: Set up the general section:

Add the Flow Cards section, and enter the Heading (and Subheading).

STEP 2: Set up the blocks:

By default, your Flow Cards section includes 3 default blocks: Block Product, Block Collection, and Block Media. You can delete, hide, or add more blocks as needed.

Depending on the block you use, the setting might be slightly different:

Which block?	How to set up?
*Product* block (Default name: Step 1: Enter the 1st step name or a brief description of it.)	Click "Select" under Product to choose a product. Edit the Heading and Description. If needed, add a button by entering the Button Label and linking it.
*Collection* block (Default name: Step 2: Enter the 2nd step name or a brief description of it.)	Click "Select" under Collection to choose a collection. Edit the Heading and Description. If needed, add a button by entering the Button Label and linking it.
*Media* block (Default name: Step 3: Enter the 3rd step name or a brief description of it.)	Click "Select" under Media to add an image or video. If both are added, only the video will display. If you don't have a local file, embed a video using a URL. Edit the Heading and Description. If needed, add a button by entering the Button Label and linking it.

STEP 3:

Click “Save” when done.

If you want to explore more customization options for your Event calendar, continue reading the next part.

🤔 What customization options can you give your Flow Cards?

For the whole Flow Cards section:
✨ Change color scheme:	Click on the Flow Cards section, and choose the overall scheme you want to use in both light and dark mode in the Color schema.
✨ Change the heading size:	Click on the Flow Cards section, and choose the Heading size to be Small, Medium, or Large.
✨ Change the Heading tag (for SEO purposes)	Click on the Flow Cards section, and choose the Heading tag from the list.
✨ Change the heading alignment	Click on the Flow Cards section and choose the Heading alignment to be Left, Right, or Center.
✨Make the first tab open by default	Click on the Flow Cards section and turn on the Open the first tab by default to make the first tab always open when you first visit a page.
✨Change how users interact with the Flow card section	Click on the Flow Cards section, and find the Card section style setting. You can choose how users interact with the Flow card section: "On hover" will automatically expand tabs when moused over, while "On click" requires a click to expand.
✨ Change the position of the images	Click on the Flow Cards section, scroll down to Section layout: On desktop 🖥️: choose the Desktop image position to be Left or Right. On mobile 📱: choose the Mobile image position to be Top or Bottom.
✨ Change the height of images	Click on the Flow Cards section, scroll down to Section layout, and choose your preferred image height in Desktop height (for desktop 🖥️) and Mobile height (for mobile 📱).
✨ Change the section width, add padding, or add a divider	Click on the Flow Cards section, and scroll down to the Section layout group, and you will be able to change those settings.
*For a single Product/ Collection/ Media* block:**
✨ Show all or a part of the content	To adjust the height of the block's content, click on it, go to the Content section, and choose the desired height. Selecting a height other than Full will display a "Read more" button.
✨ Change the button style	Click on a block, then in the Button style setting, select to make it follow Primary or Secondary, or Link style.

Need help? Contact our support team at Omni Themes Support.