> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop/sections/shoppable-video.md).

# 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.

{% hint style="success" %}

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.
   {% endhint %}

<figure><img src="/files/Ie39CN63VGgwmEfx0xLi" alt=""><figcaption><p><strong>Add Section</strong> > <strong>Shoppable Video</strong></p></figcaption></figure>

### **Settings & Customization**

<figure><img src="/files/OWrZzC6q1j4WiHP93zhC" alt=""><figcaption></figcaption></figure>

#### L**ayout**

* **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**&#x20;

* **Heading:** Set a custom title (Default: "Shop From TikTok").
* **Heading Size:** Choose from **Small, Medium, or Large**.
* **Text :** 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.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

<figure><img src="/files/YdSDkI2OUvkNv5JcU9Q3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
click **Shoppable Video > Add Video**
{% endhint %}

### **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.