Skip to main content

Embed Codes

  • Updated

Prerequisites

The.com BasicsHTMLJavaScript

Intro

Embed codes come in all shapes and sizes. Luckily, you can embed anything into a The.com site.

There are a few types of embed codes. The code provider will likely supply you with one of the following types of code:

  1. Raw HTML

  2. Raw JavaScript

  3. Scripts with a Source Attribute

  4. External link to a stylesheet

All of these can be implemented! Depending on the embed code you want to use, some may require multiple methods. For example, you could be required to add a script with a URL file source, an external stylesheet, and a snippet of raw HTML.

The code provider should give you a note about what type of code you are adding and where to add the snippet (in the head, at the bottom of the body, or where you want the embed to appear).

Raw HTML

Raw HTML will usually go in the <body> of your Page. If the code provided uses any HTML tag (excluding exclusively the <script> tag) this is your best option.

Note: if only a <script> tag is being used, it is better to use one of the Script Element methods. In cases where it is a mix of regular HTML and <script> tags, use the Raw HTML method.

How To

  1. Copy the code provided from your Shopify account.

  2. In The.com editor, create a Raw HTML Element where you want it to appear.

  3. Paste the code into the Text attribute.

If there is any JavaScript in the snippet, you'll need to refresh the site preview to load the newly added code.

Raw JavaScript

Raw JavaScript should be added by using a Script Element. Script Elements can go in the <head> or <body> of a Pagesheet depending on the code provider's specification.

It is likely that the code provider will give a snippet with raw JavaScript code in between an opening and closing HTML <script> tag.

Note: JavaScript code is executed when the page loads. This means that when you first add the snippet containing JS, you'll need to refresh the site preview for it to take effect. This reloads the Page including any JS.

How To

  1. Copy the JS code provided. Do not include the opening and closing <script> tags

  2. In The.com Editor, navigate to where the provider says to add the script (the head or the body).

  3. Create a Script Element.

  4. Paste the code into the Script's Text cell.

If you want to see the script in full view, press CMD/CTRL + Enter to access the fullscreen edit mode.

Scripts with a Source Attribute

Sometimes the code provided will be an HTML <script> tag but will not contain any JavaScript. Instead, the script tag will have a source attribute ("src") which has some URL as a value. This URL is a JS file that will be fetched and executed when the page loads.

This method seems similar to the one above but there is an important distinction: the URL is not Javascript, but the value of the source attribute and should be placed in the Src attribute of the Script Element

How To

  1. Copy the URL provided.

  2. In The.com Editor, navigate to where the provider says to add the script (the head or the body).

  3. Create a Script Element.

  4. Paste the code into the Script's Source cell.

External Link to Stylesheet

Some embeds might require custom styling. We can load external files with the External Resource Link Element. This is done in the <head> of our Page.

How To

  1. Copy the URL provided.

  2. In The.com Editor, navigate to the <head>.

  3. Create an External Resource Link Element.

  4. Paste the URL into the Href attribute.

  5. Write "stylesheet" in the Relationship attribute.

Conclusion

Adding embeds follows a similar process. The key is to know what type of code you are adding and where it should be added. Usually, the code providers will tell you these things.

Once you know where to add the code, the next step is figuring out which Element is the best. A good rule to help decide is if the code snippet only includes a <script> element, then use the appropriate Script Element method. Otherwise, if it includes other HTML tags, use the Raw HTML element method.

Related articles

Comments

0 comments

Please sign in to leave a comment.