Sync Images to Tabs and Accordions

Synchronizing images with tabs or accordion panes creates an engaging and interactive experience for your customers. This feature allows images to change dynamically as users click on different tabs or expand accordion items.

This is ideal for product landing pages where you want to show a specific product feature (image) only when the customer reads the corresponding description (tab/accordion).

How It Works

The feature links two separate areas of your page using specific CSS classes:

• The Trigger Area: This is your Tabs or Accordion block.
• The Visual Area: This is a container holding your images.

The system works by index matching. This means the first tab triggers the first image, the second tab triggers the second image, and so on.

Step-by-Step Implementation

To set this up, you will typically use a Row Layout with two columns (one for the text/tabs, one for the images).

Step 1: Set up the Triggers (Tabs or Accordion)

1. Add a Tabs or Accordion block to your section.
2. Fill in your content as usual.
3. In the section block, go to Advanced > Additional CSS class(es).
4. Add the class: synced-wrapper

Step 2: Set up the Images

1. In the other column, add your Image blocks.
2. Important: You must add exactly the same number of images as you have tabs. Ensure they are in the correct order (Image 1 corresponds to Tab 1).
3. Select the container Section (the one holding the images).
4. Go to Advanced > Additional CSS class(es).
5. Add the class: synced-images

Step 3: Test the Interaction

Save your page and view it on the frontend. When you click through the tabs, the images in the adjacent column should fade or switch automatically to match the active content.

Important Notes

• Order Matters: The script blindly links the first item of the wrapper to the first image of the container. If you have 3 tabs but only 2 images, the third tab will show nothing (or the last image, depending on behavior). Always keep the counts in sync.
• Layout: While a 2-column layout is the most common use case, you can place the images anywhere on the page as long as the classes are correct. However, for the best user experience, keep visuals close to the text triggers.

Why Use This Feature?

This technique combines text and visuals in a clear, user-friendly format. Instead of overwhelming the user with a long wall of images and text, you present information in bite-sized, interactive chunks. This streamlines the shopping experience and gives your store a highly professional, app-like feel.