# 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/qmUuCNXkrpqvVrCYKkG2" alt=""><figcaption><p><strong>Add Section</strong> > <strong>Shoppable Video</strong></p></figcaption></figure>

### **Settings & Customization**

<figure><img src="/files/tY5JLov5UVt5Jz4VaQnD" 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**

* **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/cZ4gWDdsaEeRMR53INfx" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themessupport.gitbook.io/lollipop-theme/sections/shoppable-video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.