Shopify

Follow these simple steps to integrate Videobot with your Shopify website.

---

Option A: Instant, No-Code Embed (OS 2.0 Themes)

Best for a quick iFrame/widget drop-in

Step 1: Log in to Shopify 🛠️

1. Open your web browser and navigate to Shopify.com.
2. Click on the Sign In button at the top-right corner and log in to your account.
3. After logging in, go to Online Store > Themes.
4. Click Customize on your live theme.

Step 2: Copy the Embed Code from Videobot 🎥

1. In a separate browser tab, log in to your Videobot Dashboard.
2. Select the Videobot you want to embed.
3. Navigate to Share & Embed, then choose Widget or iFrame.
4. Click Publish, then Show Embed Code.
5. Copy the generated embed code.

Step 3: Add a Custom HTML Block

1. In the theme customizer (left sidebar), click Add section.
2. Choose Custom Liquid (sometimes labeled Custom HTML).
3. Paste your Videobot <iframe> or widget code into the box.

Step 4: Publish Your Shopify Site 🌐

1. Click Save in the customizer.
2. Preview your site to confirm the Videobot is showing and working.
3. If all looks good, hit Publish to make it live.

---

Option B: Custom Section via Theme Code (All Themes)

Use when you need extra settings or OS 1.0/legacy themes

Step 1: Log in to Shopify 🛠️

1. Open your web browser and navigate to Shopify.com.
2. Click on the Sign In button at the top-right corner and log in to your account.
3. After logging in, go to Online Store > Themes > Actions > Edit code.

Step 2: Copy the Embed Code from Videobot 🎥

1. In a separate browser tab, log in to your Videobot Dashboard.
2. Select the Videobot you want to embed.
3. Navigate to Share & Embed, then choose Widget or iFrame.
4. Click Publish, then Show Embed Code.
5. Copy the generated embed code.

Step 3: Create a New Section in Your Theme

1. Under Sections, click Add a new section, name it videobot-embed.liquid, and confirm.
2. In that file, paste this minimal Liquid wrapper:

   {% schema %}
   {
     "name": "Videobot Embed",
     "settings": [
       { "type": "text", "id": "embed_code", "label": "Embed code" }
     ]
   }
   {% endschema %}
   
   <div class="videobot-wrapper">
     {{ section.settings.embed_code }}
   </div>

3. Click Save.

Step 4: Embed the Code in the New Section

1. Exit the code editor and open the Customizer.
2. Click Add section > Videobot Embed.
3. Paste your Videobot embed code into the Embed code field.
4. Click Save.

Step 5: Publish Your Shopify Site 🌐

1. Preview to ensure the Videobot appears and functions correctly.
2. If everything looks good, hit Publish to go live.

---

That’s it! You’ve successfully embedded Videobot on your Shopify site. 🎉