Shoppable Video

A Shoppable Video enables customers to purchase items featured in a video without leaving the page. By tagging products directly in the video, you create an immersive shopping experience that blends entertainment with commerce.

1. Go to Shopify Admin > Online Store > Themes.

2. Click Customize on your active theme.

3. In the theme editor, click Add Section > Shoppable Video

4. Customize the appearance by adjusting video placement, product tags, and links to ensure smooth navigation.

Add Section > Shoppable Video

Settings & Customization

Layout

• Expand to Full Width: Enable this option to extend the section across the entire screen width.

• Color scheme: You can customize the section’s appearance by changing the text color, background color, and more using preset color options.

• Background Opacity: Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.

Content

• Heading: Set a custom title (Default: "Shop From TikTok").

• Heading Size: Choose from Small, Medium, or Large.

• Subheading: Add additional descriptive text if needed.

• Text Position: Choose placement relative to the heading:

  • Above Main Heading : Display subheading above the main heading.

  • Below Main Heading : Display subheading below the main heading.

• Desktop Content Alignment: Align content to Left, Right, or Center (automatically centered on mobile screens).

• Aspect Ratio: Choose how the video scales Square, Portrait, or Adapt to Video .

Product Settings

• Show Product: Enable to display featured products linked to the video.

• Product Color Scheme: Choose a preset color scheme for background and text.

• Product Position:

  • Below the Video : Displays products under the video.

  • Over the Video : Products appear on hover.

• Product Content Space: Adjust spacing between products.

Column Settings

• Desktop Columns: Choose the number of columns for desktop view. (Options: 3, 4, 5) automatically adjusts to a single column on mobile.

Carousel Settings

• Enable Carousel: Activate a sliding format for product display.

• Change Slides Every: Set transition delay (in seconds). If set to 0, auto-play is disabled.

• Gap: Define spacing between items (Default: 30px, auto-adjusts for mobile).

• Pagination : Choose the pagination type: Dots (dot indicators), Arrow (manual navigation), or None (no indicators).

• Pagination Style : Choose the style: Classic (traditional) or Modern (updated look).

Section Padding

• Top Padding: Adjust spacing above the section.

• Bottom Padding: Adjust spacing below the section.

Shapes & Styling

• Shaper: Adds shape effects to the section. Options: Shaper Top, Shaper Bottom, Shaper Both, None, Border Top, Border Bottom, and Both Border.

• Shaper Top Color: Customize the top shape color (choose your preferred color).

• Shaper Bottom Color: Customize the bottom shape color (choose your preferred color).

Theme Customization

• Adjust additional styles in Theme Settings.

• Use Custom CSS for further design modifications.

click Shoppable Video > Add Video

Add Video

• Select Product: Choose the product featured in the video (e.g., 5-in-1-facial-serum).

• External Video Link:

  • Add a YouTube or Vimeo URL (e.g., https://www.youtube.com/watch?v=_9VUPq3SxOc).

  • Helps share your brand story by embedding a video directly into your store.

Shopify-Hosted Video (Optional)

• Upload a Shopify-Hosted Video: Selecting a Shopify-hosted video will override the external video link above.

• Use this option if you prefer to host your videos directly on Shopify for better performance and control.