Extensions

Getting Started

The4 Theme

FAQs

Shoppable video

Shoppable Video is an engaging sales-boosting tool that allows merchants to showcase products directly through video content. Designed to support multiple display formats such as grid, carousel, reel popups, and stories, this feature brings a dynamic shopping experience to life. Each video can be tagged with multiple products, enabling customers to browse and purchase items effortlessly while watching. This interactive format not only enhances product discovery but also drives higher conversion rates and customer engagement by seamlessly combining content with commerce.

1. Why Choose Shoppable Video from EcomRise?

In today’s fast-paced eCommerce landscape, shoppers expect more than static product pages — they want immersive, interactive, and convenient experiences. EcomRise’s Shoppable Video delivers just that.

1.1. Advanced Customization

Shoppable Video allows merchants to customize how videos are displayed with multiple layout styles such as grid, carousel, reel popup, and stories format. Videos can also be tagged with multiple products, styled freely, and integrated flexibly across the site.

1.2. Ease of Use

Videos can be placed and managed easily on the home page, collection pages, landing pages, or any custom section—with no coding required. This flexibility helps merchants drive engagement from key locations.

1.3. Enhanced Tracking and Reporting

Built-in video analytics show performance metrics like views, clicks, interactions, and conversions—so merchants can understand what content drives sales.

1.4. Premium Support

We have a Premium support team, they are specialized in addressing promotion-related questions and troubleshooting specific to "Shoppable video" setups.

2. How to install the Shoppable video extension.

From the EcomRise Dashboard, click Upsell & Cross sell on the left sidebar > Click Install extension button

If the app has not had enough permission before, it will ask you to update the app first.
In this step, please check and click the Update button to access permissions for the extension.
Then you can install this extension after giving all the permissions.

3. How to Create, Customize, and Add the Shoppable video to the theme page.

3.1. Create a new Gallery

Step 1. Open the Shoppable video dashboard then choose Create gallery to create the gallery.

Step 2. Start to config the Settings and Design.

3.2. Settings Tab

The Settings tab is where you configure the behavior, targeting, and product connections for your Shoppable Video Gallery. This tab allows you to upload your video, tag related products, define visibility conditions, and set actions that occur after a customer adds a product to their cart.

Gallery Name.

The text input at the top lets you name your gallery.

Video Section

Select video: Upload or choose the video that will be featured in the gallery.
Search products: Search and select the products you want to tag in the video.
Add item / Clear all:
- Add item: Adds another video this gallery.
- Clear all: Removes all added itmes from current list.

In this section, you can move videos up or down to change their order and delete any video after it has been added.

Other settings

This setting defines what happens immediately after click “Add to Cart” button on a product from your shoppable video gallery.

Action after add to cart: You can choose the action after click “Add to Cart” button.

- Stay current page: After adding items to the cart, your page remains on the current page without any redirection
- Open theme cart drawer: After adding items to the cart, your page will open the theme cart drawer. Note: If you choose this option, you'll need to select a Theme from the dropdown list just below, so we can make sure the option works properly with your theme.
- Go to cart page: After adding items to the cart, your page will automatically direct to the Cart page.
- Reload page: After adding items to the cart, your page will be reloaded.
- Go to checkout page: After adding items to the cart, your page will automatically direct to the Checkout page.

Save / Discard Buttons

Use Save to store your gallery settings or Discard to cancel changes.

Gallery ID

This is the unique identifier for the gallery. You can copy this ID to reference it when embedding or using it in custom placement. The Gallery ID will be displayed after you click Save.

Status: Choose between

Active: The gallery is live and visible.
Draft: The gallery is hidden from customers.

Conditional for Product Page:
Select where this gallery should appear in relation to product pages. Options include:

Do not display: The gallery will not appear on any product page.
Display to specific products: The gallery will only be shown on the selected product pages you specify.
Display to all products: The gallery will be shown on every product page across your store.

Conditional for Collection Page:
Similar logic, but applies to collection/category pages.

3.3. Design Tab

3.3.1. General

The General section allows you to control core video playback behavior, product display timing, and layout positioning for your gallery.

Video quality: Choose the resolution of the video (e.g., HD – 720) to balance visual clarity with loading speed.
Video ratio: Select the aspect ratio for your video display (includes: 1:1, 3:4, 9:16)
Play video: Decide when the video should start playing: automatically, on click, or on hover.
Video loop: When enabled, the video will play continuously in a loop.
Product slider duration: Sets how long each product appears when sliding (in seconds); only works if the value is greater than 0.
Product position: Choose where the tagged product information appears — over the video or below the video.

3.3.2. Display

Width: Set the width of the gallery container. You can choose Full width or enter a Custom width (e.g., 1440px).
Vertical padding: Controls the spacing above and below the gallery. Helps with vertical alignment on the page.
Horizontal padding: Adjusts the spacing to the left and right of the gallery. Useful for centering or spacing within wider layouts.

Layout Settings

These settings let you fine-tune the layout based on device type and visual style.

Layout type (Grid / Carousel / Reel Pops / Stories):
Choose the gallery layout style:

Grid: Displays videos in a fixed grid format — all videos are visible at once.
Carousel: Scrollable horizShows videos in a horizontal slider — users can scroll side to side.
Reel Pops: Plays one video at a time in a pop-up reel format, like TikTok or Instagram Reels.
Stories: Fullscreen or popup-style story view.Displays circular thumbnails — tapping opens vertical story-style videos.

Responsive Layout Settings

Number of videos on desktop viewport: Set how many videos are displayed side by side on desktop (e.g., 4 videos).
Number of videos on tablet viewport: Controls the number of visible videos on tablet screens (e.g., 3 videos).
Number of videos on mobile viewport: Defines how many videos appear in a row on mobile (e.g., 2 videos).
Gap between videos on desktop: Adjusts the spacing between video cards on desktop view (e.g., 18px).
Gap between videos on tablet: Spacing between videos on tablet devices (e.g., 14px).
Gap between videos on mobile: Controls spacing between videos in mobile view (e.g., 12px).

Visual Style

Border radius: Sets the roundness of the corners on each video card (e.g., 16px).
Box shadow: Adds a subtle shadow behind each video card to create depth and visual separation.

Carousel

With the Carousel layout, you can further customize the options below. These settings allow you to control the carousel's behavior and visual appearance.

Infinite loop: Enables the carousel to loop continuously—when it reaches the last slide, it seamlessly starts again from the first.
Show dots: Displays navigation dots below the carousel, allowing users to see and click to move between slides.
Auto next slide: Automatically advances to the next slide after a set duration, creating a hands-free browsing experience.
Next slide duration: Sets the number of seconds before the carousel automatically moves to the next slide. Only applies when Auto next slide is enabled.
Navigation shape: Choose the shape of navigation buttons:
- Circle – Perfectly round buttons
- Rounded – Buttons with soft corners
- Square – Sharp-edged buttons
Navigation style: Select the appearance of the navigation buttons (e.g., Solid, Outline, etc.).
Navigation size: Adjust the size of the navigation arrows/buttons using a pixel value.
Navigation color: Sets the default color of navigation buttons.
Navigation hover color: Defines the hover color of the navigation buttons when a user moves their mouse over them.

Reel pops

With the Reel Pops layout, you can further customize the design using the options:

Width on desktop: Sets the width (in pixels) of the reel popup when viewed on desktop screens.
Width on tablet: Sets the width of the reel popup for tablet devices to ensure responsiveness.
Width on mobile: Adjusts the width of the popup for mobile screens for optimal viewing.
Position (Left / Right): Choose whether the reel popup appears on the left or right side of the screen.
Offset from bottom: Controls the vertical distance (in pixels) between the popup and the bottom of the screen.
Offset from side: Adjusts the horizontal distance from the chosen side (left or right) to the popup.
Close action:
After closing the Reel pops, you have two options in the dropdown menu:
- Open after reload: This option means the Reel pops will reopen after the webpage is reloaded.
- Open after time range: When this option is selected, you can set a specific time duration. Once the set time has passed, the Reel pops will reopen automatically.
- Time to open again: Allows you to enter the amount of time (in minutes).

Stories

With the Stories layout, you can further customize the design using the options:

Border width: Adjusts the thickness of the circular border around each story thumbnail (px).
Border color: Sets the color of the border around the story thumbnails.
Show duration circle: When enabled, displays a progress circle around each story to show playback duration.
Duration color: Sets the color of the duration/progress circle.
Stories alignment: Aligns the entire row of stories to the Left, Center, or Right within the container.

3.4. How to add the Shoppable video to your page

From dashboard > Click Add block to add the Gallery to your page.
Paste gallery ID into block.
You can move the block to a different location while you’re in the theme editor.

3.5. Filter Action

Once the Gallery has been created, the status bar from the Dashboard of that extension can be seen at the bottom. Such as:

All: Displays all galleries regardless of their status (both Active and Draft).
Active: Shows only the galleries that are currently published and live.
Draft: Shows only the galleries that are saved but not yet published or visible to users.