Embedded videos can really bring your products to life and highlight your brand to new and returning visitors. With the visual appeal of the Wistia player and detailed analytics to better connect with and understand your audience, you're set up to add a whole new video strategy to your business. Read on to learn the best and easiest ways to embed your videos on Shopify.
Getting Started
Recommended embed settings for Shopify:
Inline (Standard) embed
Responsive sizing
Embed in a Custom Liquid section in Shopify
Embedding in a Custom Liquid section in the theme editor
Shopify's Video section does not support Wistia URLs at this time, so Custom Liquid/Custom HTML is the best alternative depending on your theme.
To embed videos using the Theme Editor, we'll follow Shopify's guidance on extending your theme with the Custom Liquid or Custom HTML section. This section supports HTML embed codes, which means you can use any of Wistia's embed types and options.
Copy your embed code from Wistia, then add a Custom Liquid section to your templates in the theme editor:
In Shopify, open the Theme Editor and select the page you want to edit
From the side menu, under Template click Add Section
Select the </> Custom Liquid section
Paste your Wistia embed code into the Liquid code field and Save
Once the page is saved, you should see a preview of your video in the editor.
How to control the size of responsive embeds
Responsive embeds take up the full width of the page or section where they are placed, and will dynamically scale up or down in size based on the width of the browser or screen.
If you want to set a limit on how large or small the video can get, you can control this by adding a container around the video, in the form of a <div></div> element. Then you can apply a max-width or min-width property using CSS.
Example
<div style="max-width: 1280px;">
[YOUR EMBED CODE HERE]
</div>
In this snippet we have a simple <div> container that sets the maximum width to 1280px. You can optionally set both a max and a minimum width:
<div style="max-width: 1280px; min-width: 960px;">
[YOUR EMBED CODE HERE]
</div>
Place your responsive embed code in between the <div> and </div> tags, and Save your page to see the results. You can tweak the numbers to get it just right.
Wistia's player is width-responsive, which is why we use max-width and min-width specifically.
How to center the video
To center the video we can use the same container-based approach used for controlling the size of responsive embeds, and adjust the video with CSS.
Example
<div style="margin: 0 auto;">
[YOUR EMBED CODE HERE]
</div>
In this snippet we have a simple <div> container that uses the margin: 0 auto; property to center the contents within. Place your embed code in between the <div> and </div> tags, and Save your page to see the results.
There are many different approaches to centering elements using CSS, this is just one example. Regardless of which approach you want to use, target your CSS at the custom container and not at the Wistia player components directly.