Embedded Social Media Feeds (on some themes)

Overview / details

Currently, the only theme which has this feature is Boost (for businesses, and for affiliates)

Note 1: Our other themes have other social features, such as a tabbed social widget, and social icon links, but they do not have the specific embed areas noted in this help article.

Note 2: You cannot change where on the page the social feeds are located, or their layout. When you configure them per this help article, the feeds will appear in the global location as set by the theme layout.

Instagram

To embed your profile info and main feed:

Visit your profile

Click the gear icon at the top right

Click "Embed"

Copy the code

Go to your admin > Design > Site Pages > Instagram Embed [Edit]

(if the page does not exist, see special notes later in this article)

Be sure "Page contains Liquid markup" is enabled

Paste the code into the page

Save the page

Instagram Embed step 3. Click the button to Copy embed code.

Instagram embed step 4. In the Instagram Embed page, ensure Liquid Markup is enabled and paste in your code.

To embed a specific post:

The process is the same as above, except you will get the embed code from a post, not from your main profile.

Visit the specific post you want to embed

Click the "triple dot" icon at the top right of the post

Click "Embed"

Copy the code

Go to your admin > Design > Site Pages > Instagram Embed [Edit]

Be sure "Page contains Liquid markup" is enabled

Paste the code into the page

Save the page

Official Instagram help article about embeds

Twitch

The instructions below are for how to embed a Twitch Channel. Alternatively, can embed a specific video or collection. For info on the two latter options, see the Twitch Dev Docs link below.

Copy the code below

Go to your admin > Design > Site Pages > Twitch Embed [Edit]

Be sure "Page contains Liquid markup" is enabled

Paste the code into the page

Edit the part after channel= to be your channel / username.

Edit the part after parent= to be your CrystalCommerce site URL

Save the page

<iframe src="https://player.twitch.tv/?channel=dallas&parent=streamernews.example.com&muted=true" height="328" width="100%" allowfullscreen> </iframe>

Twitch embed final step. In the Twitch Embed page, ensure liquid markup is enabled, paste your code in, update the channel and parent as described earlier.

Official Twitch Dev Docs

YouTube

Go to the video or playlist you want to embed

Click "Share"

Click "Embed"

Copy the iframe code

Go to your admin > Design > Site Pages > YouTube Embed [Edit]

Be sure "Page contains Liquid markup" is enabled

Paste the code into the page

Edit the width="###" to say width="100%"

Save the page

YouTube embed step 1. Visit the video or playlist and click Share.

YouTube embed step 3. Click the Copy button to copy the iframe code.

YouTube embed step 4. In the YouTube Embed page in your admin, ensure liquid markup is enabled, paste your code in, and update the width setting to 100 percent.

Official YouTube help article about embeds

Special notes

If the embed page(s) don't exist in your admin, make sure you have a theme which supports this feature

If your theme supports this feature, but any of the embed pages don't exist, you can create them.

The pages must be named EXACTLY as shown below:

Twitch Embed
Instagram Embed
YouTube Embed

The SEO field on the page must contain the automatic value which is created when you make the page. If you change the SEO field value, the embed feature will not work.

To make the page(s), go to Admin > Design > Site Pages
Click the blue plus symbol to add a new page.
Type the page name, exactly as shown earlier in this article, in the first field on the next page.
Check the box to enabled the "Page contains Liquid markup" option.
BEFORE you paste in code or content into the page, save the new page.
You will be taken back to the main list of pages.
From there, click the "Edit" link in the row for the new page you just made.
Then you may follow the remaining steps in this help article for the relevant feed embed.