# Shopify - Embed Guide

Ready to showcase your shows and classes directly on your Shopify store? Perfect! While most theaters use dedicated websites, many also sell merchandise, tickets, or promote events through their Shopify stores. This guide will walk you through adding CrowdWork widgets to your Shopify site.

### ✅ What You'll Need

Before you begin, make sure you have:

* An active CrowdWork account
* A Shopify store you can edit (with appropriate permissions)
* Your widget embed code from CrowdWork Dashboard
* About 10 minutes of your time

<figure><img src="/files/w8LaKpI606sCrIRQHb05" alt=""><figcaption><p>The Embed Widget code provided in the CrowdWork Dashboard</p></figcaption></figure>

### 👾 Getting Your Widget Code

First, let's grab your widget code from CrowdWork:

1. Log in to your CrowdWork Dashboard
2. Navigate to [**Theatre > Embeds**](https://www.crowdwork.com/dashboard/embeds) in the left menu
3. Choose the widget type (Shows or Classes)
4. Select your preferred view (Calendar or Cards)
5. Customize any settings (tag filtering, start date, etc.)
6. Copy the code snippet provided in the box

{% hint style="info" %}
**Quick Access:** Jump directly to your [**widget customization page**](https://www.crowdwork.com/dashboard/embeds) to get started immediately!
{% endhint %}

### 🚀 Adding Your Widget to Shopify

Shopify offers several ways to add custom HTML. Choose the method that works best for your needs:

#### Method 1: Using Custom HTML Section (Recommended)

If your theme supports custom HTML sections (most modern themes do):

{% hint style="info" %}
**Shopify Tip:** Make sure you have your widget code from the [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) ready to paste before starting.
{% endhint %}

1. **Access your theme customizer**
   * From your Shopify admin, go to **Online Store > Themes**
   * Click **Customize** on your active theme
2. **Add a custom HTML section**
   * Click **Add section**
   * Look for **Custom HTML**, **Custom Code**, or **HTML** section
   * Add it to your desired page location
3. **Paste your widget code**
   * Click on the newly added section to edit it
   * Paste your CrowdWork widget code into the HTML field
   * Save your changes
4. **Publish your changes**
   * Click **Save** to make your widget live

#### Method 2: Using Page Content Editor

For adding widgets to specific pages:

1. **Create or edit a page**
   * Go to **Online Store > Pages**
   * Create a new page or edit an existing one
2. **Switch to HTML mode**
   * In the content editor, click **Show HTML** (usually a `<>` button)
   * This switches from the visual editor to HTML mode
3. **Add your widget code**
   * Paste your CrowdWork widget code where you want it to appear
   * Switch back to visual mode to see the widget placeholder
4. **Save the page**
   * Click **Save** to publish your changes

#### Method 3: Using a Third-Party App

For easier management, consider using a Shopify app:

1. **Install a custom code app**
   * Visit the Shopify App Store
   * Search for "HTML embed" or "custom code" apps
   * Popular options include "Mega HTML/CSS/JS Code Embed" or "XO Insert Code"
2. **Follow the app's instructions**
   * Most apps provide simple interfaces for adding HTML code
   * Paste your CrowdWork widget code as directed
   * Configure where you want the widget to appear

#### Method 4: Theme Code Editing (Advanced)

For developers comfortable with Liquid code:

{% hint style="danger" %}
**Advanced Method:** This requires editing theme files directly. Always backup your theme first!
{% endhint %}

1. **Access theme code**
   * Go to **Online Store > Themes**
   * Click **Actions > Edit code** on your active theme
2. **Choose the right file**
   * For homepage: Edit `index.liquid` or `templates/index.liquid`
   * For specific pages: Edit the relevant template file
   * For site-wide: Edit `theme.liquid`
3. **Add your widget code**
   * Paste your CrowdWork widget code in the appropriate location
   * Wrap it in \` \` tags if needed
4. **Save and test**
   * Click **Save** and preview your store

### 💄 Making Your Widget Look Amazing

Your widget will inherit some styling from both CrowdWork and your Shopify theme, but here are some tips:

* **Section spacing**: Use your theme's section spacing options to give the widget breathing room
* **Container width**: Calendar widgets work best in full-width sections
* **Mobile testing**: Preview on mobile devices using Shopify's mobile preview
* **Theme compatibility**: Some themes may need CSS adjustments for perfect integration

### 🔧 Troubleshooting

{% hint style="info" %}
**Need fresh code?** You can always get updated widget code from your [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) if something isn't working right.
{% endhint %}

**Widget not showing up?**

* Make sure you've saved and published your changes
* Check that your theme supports custom HTML sections
* Verify you pasted the complete code snippet
* Try clearing your browser cache

**Widget looks strange or cut off?**

* Ensure the containing section has adequate width and height
* Check if your theme's CSS is conflicting with the widget
* Calendar widgets need more vertical space than card widgets
* Test on both desktop and mobile views

**Performance concerns?**

* Limit the number of widgets per page for best loading speed
* Consider using card view instead of calendar view for faster loading
* Test your page speed after adding widgets

### 🎯 Creative Uses for Shopify + CrowdWork

Make the most of your integration:

* **Product pages**: Add class schedules related to products you sell
* **About page**: Show your upcoming performances and classes
* **Blog posts**: Embed relevant show schedules in event announcements
* **Homepage**: Feature upcoming events prominently
* **Collection pages**: Add classes related to specific product categories

### 🔄 Automatic Updates

Once your widget is embedded, it will automatically stay in sync with your CrowdWork account. Any changes you make to your shows or classes in CrowdWork will instantly appear on your Shopify store without any additional work!

### 🛒 E-commerce Integration Tips

Since you're using Shopify, consider these strategic approaches:

* **Cross-promotion**: Link from event widgets to related merchandise
* **Bundle opportunities**: Promote class packages alongside related products
* **Customer journey**: Use widgets to drive traffic from store to shows/classes
* **Email marketing**: Combine Shopify's email tools with event promotion

### 📱 Mobile Considerations

Shopify themes are generally mobile-responsive, and CrowdWork widgets adapt accordingly:

* **Calendar view**: Automatically switches to mobile-friendly list format
* **Card view**: Stacks vertically on mobile for better readability
* **Touch optimization**: All buttons and links work well on touch devices

Need further assistance? [Reach out to our Support Team](/contacting-support.md) - we're always happy to help!


---

# 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://docs.crowdwork.com/the-academy/crowdwork-academy/embedding-widgets-on-specific-platforms/shopify-embed-guide.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.