Add a Shoppable Video Section

The Shoppable Video component lets you combine video content with selected products, allowing customers to discover and shop products while watching the video.

Use this component to showcase:

• Product demonstrations

• Styling inspiration

• Tutorials and how-to content

• New arrivals

• Campaign or creator videos

You can upload a video, attach products, select a layout, and customize how product information and shopping actions appear.

1. From Shopify Admin, open Ego Mobile Builder.

2. Go to App Design and open the design you want to edit.

3. Select the screen where you want the video to appear.

4. Open Sections Library.

5. Search for Shoppable Video.

6. Drag the component to the preferred position on the screen.

Select the Shoppable Video component to open its configuration panel.

Upload the video you want customers to see, then check the result in the mobile preview.

For the best mobile experience:

• Use a clear, high-quality video.

• Keep the video focused on the featured products.

• Avoid placing important content too close to the edges.

• Keep text inside the video short and readable.

• Preview the video on a mobile device before publishing.

Supported file formats, file size and video duration should follow the requirements shown in the upload field.

Click Add Product, then search for and select the products featured in the video.

Make sure:

• The products shown in the video match the selected products.

• Each product is active and available in Shopify.

• Product images, prices and variants are up to date.

• Products are available to your mobile app.

Customers will see the selected product information together with the video and can use the available shopping actions.

Under Layout, select how the product card should appear with the video.

For example, the Inline layout displays the product information directly within the video experience.

Use the mobile preview to check:

• How much of the video remains visible.

• Whether product information is easy to read.

• Whether the shopping buttons are easy to access.

• Whether the layout works with the number of selected products.

You can configure the appearance of the product card, including:

• Product name

• Price

• First price

• Text styles

• Text colors

• Visibility of supported elements

Use the eye icon beside an element to control whether it appears in the component.

Keep the product card simple so it does not cover important parts of the video.

Configure the primary and secondary actions shown with the product.

Depending on the available settings, you can customize:

• Button action, such as Add to Cart or Buy Now

• Background color

• Icon color

• Button icon

• Icon size

Use consistent button styles across your app so customers can easily recognize the main shopping action.

Changes appear immediately in the mobile preview while you configure the component.

Review:

• Video quality and cropping

• Product information

• Product selection

• Button actions

• Text readability

• Overall layout

When the component is ready:

1. Click Save.

2. Open Ego Live Preview and test the design on a mobile device.

3. Confirm that the video plays and each product action works correctly.

4. Click Publish to make the changes available in your app.

• Feature products that are clearly visible in the video.

• Keep each video focused on one campaign or product group.

• Use vertical video where possible for a better mobile experience.

• Avoid attaching unrelated products.

• Keep product names and buttons readable against the video.

• Test Add to Cart and Buy Now actions before publishing.

• Place the component near relevant product or campaign content.

The video does not appear

Confirm that the upload completed successfully, then save and refresh the editor.

A product does not appear

Check that the product is active, available to the app and successfully added to the component.

Product information covers the video

Try another layout or reduce the number of visible product details.

A shopping button does not work

Review the selected button action and test the related product in Ego Live Preview.

Changes do not appear in the app

Confirm that the design has been saved and published, then reopen the mobile app.