How to Add HTML Embed Codes to Shopify Store

In the ever-evolving landscape of e-commerce, optimizing your Shopify store is a crucial part of achieving success. One key element that can significantly enhance the user experience and overall appeal of your site is the integration of various forms of content. This is where HTML embed codes come into play.

From YouTube videos and Facebook posts to Instagram images and more, HTML embed codes are an effective way to integrate third-party content directly onto your Shopify store. However, to the uninitiated, these terms might seem rather daunting. But worry not, this guide is designed to demystify the process and provide a step-by-step tutorial on how to add HTML embed codes to your Shopify store.

Before going into the details, make sure you have built an eCommerce store on Shopify!

What is HTML Embed Code? 

In the realm of web development and design, embed code holds significant value. An embed code is essentially a block of HTML - HyperText Markup Language. HTML forms the backbone of most web pages, providing structure and creating the layout of the content. When you place an embed code into your website's HTML editor and hit 'Save' or 'Publish', it calls upon a specific piece of content to render on your live site.

Embedding allows you to integrate external content into your own website or page, essentially 'borrowing' content from another source and placing it within your site's context. This operation is possible thanks to the embed code, a snippet of HTML that instructs your site to fetch and display the chosen content.

The beauty of embed codes is their universal adaptability. Most social media platforms and multimedia websites come equipped with features to generate embed codes for individual posts or videos. This allows you to easily incorporate a vast array of content types into your site, enhancing its visual appeal and user interaction. By understanding and employing embed codes, you unlock a powerful tool for enriching the content variety on your Shopify store.

How to generate embed code from different channels

Incorporating diverse forms of content from various platforms is a fantastic way to enrich your Shopify store and engage your audience. However, the first step in this process involves generating the appropriate embed codes. Let's explore how this can be done across a range of platforms.

Youtube

Enhancing your blog posts with YouTube videos can offer a multimedia boost that grabs your readers' attention. Plus, you get to utilize the vast content library of YouTube without spending a dime. Here's a simple, step-by-step guide to doing just that:

- Step 1: Start by finding the YouTube video you wish to showcase on your website.

- Step 2: Look for the Share button. You'll find it just below the video, adjacent to the Like and Dislike buttons. Click on it.

- Step 3: A pop-up window with various options will appear. Out of these options, select Embed.

- Step 4: Upon clicking Embed, YouTube will present you with a generated embed code. This code is customizable. For instance, you have the option to specify a start time for the video or to choose whether to display player controls.

- Step 5: After adjusting the settings to your liking, find and click on the Copy button located at the bottom-right corner of the pop-up window.

You now have a YouTube video ready to be embedded in your blog post.

Facebook

Integrating Facebook posts into your website is a great way to diversify your content and engage your audience. Here's a straightforward guide to generating an embed code for a Facebook post:

- Step 1: Using a desktop browser, go to Facebook and find the specific post you wish to embed on your site.

- Step 2: On the upper right-hand corner of this post, you'll notice three dots. Click on them to reveal more options.

- Step 3: From the drop-down menu that appears, select Embed.

- Step 4: Upon clicking Embed, a pop-up will appear with the generated embed code. You'll see several options here, such as including the entire post and accessing advanced settings. But don't worry, you don't need to change anything for now. Simply click on Copy Code.

You've successfully created an embed code for a Facebook post. Now you're ready to enhance your website with dynamic, social content. 

Instagram 

Adding Instagram posts to your website can give it a vibrant and personal touch. Though similar to Facebook's process, it's important to note that Instagram post embedding can only be done via the desktop version, not the mobile app. Here's a straightforward guide to get you started:

- Step 1: Locate the Instagram post you wish to embed. You'll find three dots in the upper right-hand corner of the post. Click on these to reveal more options.

- Step 2: A dropdown menu will appear. Out of the options given, select Embed, which is third from the bottom.

There you have it! You now have an Instagram embed code at your disposal.

Pinterest 

Adding Pinterest posts to your website not only enriches your content but can also direct users back to your Pinterest profile, aiding in growing your Pinterest audience. Here's a simple, step-by-step process to make this happen:

- Step 1: Start by finding the Pinterest post that you wish to embed on your website.

- Step 2: Notice the three dots adjacent to the image (or below the image if you're using the mobile website). Click on these dots to reveal more options.

- Step 3: From the drop-down menu that appears, select Get Pin embed code.

- Step 4: A pop-up will appear, providing you with the embed code. This pop-up also allows you to specify the size of the embedded pin, offering options like small, medium, large, or extra-large.

- Step 5: After adjusting the size to your liking, highlight the code and press Command + C (on a Mac) or CTRL + C (on Windows) to copy it.

And there you have it! With your freshly minted Pinterest embed code, you're all ready to add a dash of pin-worthy charm to your website. 

Slideshare

SlideShare presentations may not be the most in-vogue form of content these days, but they still hold the potential to add a unique multimedia dimension to your blog posts and web pages. Here's a straightforward guide to embedding a SlideShare presentation:

- Step 1: Start off by navigating to the specific SlideShare presentation that you wish to embed.

- Step 2: Look for the 'Share' button located beneath the presentation and click it.

- Step 3: Upon clicking Share, you'll see various social channel sharing options in the same window as the presentation. Just underneath these options, you'll find the embed code.

- Step 4: At this point, you can customize the size of the embed window and select the slide you want the presentation to start from.

- Step 5: After customizing the settings, highlight the embed code and press Command + C (if you're on a Mac) or CTRL + C (if you're on Windows) to copy it.

With these simple steps, you're all set to add an engaging SlideShare presentation to your webpage or blog post.

External Webpage

To embed an external website in your website, you need to use the iframe HTML tag. This is the HTML tag iframe template, your task is to add the url you need in the correct place of the template:

The steps are as follows:

- Step 1: Go to the website you want to embed in your website.

- Step 2: Copy the URL of that website

- Step 3: Paste the entire URL into the iframe code. Don't forget to include https:// at the beginning of your URL and put the link inside quotes. And your embed code should look like this:

Adding HTML Embed Codes to Your Shopify Store using EComposer

Once your embed code is ready, your next task is to add it to your Shopify store. At Shopify, you need to find a third-party app to help you with this. However, among thousands of apps on Shopify App Store, choosing the right one that is easy to use and delivers high performance is not easy.

EComposer - Shopify Page Builder is a new-generation Shopify app that allows users to build professional online stores without coding knowledge. It provides a lot of templates, elements, and extensions to help you create all kinds of pages like Landing Pages, Product Pages, Home Pages, Collections, Blogs, and any other regular pages using the EComposer (FAQ, Contact Us, About us, Coming Soon Page, and so on).

If you want to add HTML CSS code directly to your page, the EComposer provides the Code feature in Shopify Element. This feature is helpful if you want more control and creativity for your page.

Step 1: Sign up for your Shopify Store 

- If you don't already own a Shopify store, you need to sign up for Shopify (free)

- Log in to your online store using your registered email and password.

Step 2: Install and Open EComposer 

- In the Shopify App Store, search EComposer Landing Page Builder then click Add App

- To activate the use of the app, Install the app to your Shopify store.

- In the Dashboard menu, go to Apps, click EComposer Landing Page Builder.

Step 3: Start adding Shopify Code

- Click Start Building in the right corner of the dashboard and select a page where you want to place Shopify Code.

- Choose any EComposer template you want or click Blank Template. Then, go to Set up page info and select Start Building.

- In EComposer's editor, go to Elements, select Shopify, and look for Code.

Step 4: Customize Shopify Code

Now use EComposer's live drag and drop to drag the Code anywhere you want. Then start adding Code to your liking.

* Content: 

You need to add the HTML, JavaScript, CSS or Shopify Liquid in the Custom Code and automatically the part you want to add to your Shopify store will appear 

In this example, we choose Youtube embed code:

* Design: 

These options allow you to change the style of the Custom Code.

- Alignment: Allow you to align the Custom Code. You can choose Align Left, Align Right, or Align Center. 

- Typography: Change the style of the content of the Custom Code.

- Text color: Change the color of the content.

- Text Shadow: Choose a color and Adjust the position of Shadow using Horizontal and Vertical attributes.

* Advanced: 

You can customize everything related to visible settings like background, visibility, entrance animation, scrolling animation, and so on.

Step 5: Save and Publish 

Once you are satisfied with your customization, in the right corner of the edit page you have options to save and publish.

In a nutshell

In conclusion, mastering the use of HTML embed codes offers a significant advantage for enhancing your Shopify store. We've explored how to integrate varied content from platforms like YouTube, Facebook, Instagram, Pinterest, and SlideShare, along with external webpages, into your e-commerce environment. This not only enriches your online storefront, but it also fosters increased engagement, potentially attracting more traffic and promoting customer retention.

Taking these steps to innovate and diversify the content in your store is an essential part of staying competitive in the ever-evolving digital landscape. If you want more information or want to learn more about EComposer, follow us at ecomposer.io or click on the message icon located in the right corner of the screen.

=================

Add EComposer Next generation page builder Here

Follow Us on Facebook

Join Official Community