Shopify - Embed Guide

This page gives instructions for embedding CrowdWork widgets on a Shopify store.

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

The Embed Widget code provided in the CrowdWork Dashboard

👾 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 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

Quick Access: Jump directly to your widget customization page to get started immediately!

🚀 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):

Shopify Tip: Make sure you have your widget code from the Theatre > Embeds Dashboard ready to paste before starting.

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:

Advanced Method: This requires editing theme files directly. Always backup your theme first!

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

Need fresh code? You can always get updated widget code from your Theatre > Embeds Dashboard if something isn't working right.

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

Want advanced styling? Check out our Widget Styling Guide for custom CSS tips and examples to make your widgets perfectly match your Shopify theme.

Need further assistance? Reach out to our Support Team - we're always happy to help!