How to Embed

8 MIN READ

Summary: Learn how to add an app in different sections of your Shopify store.


Table of Contents

  1. Copy Embed Code
  2. Embed in the Header
  3. Embed in Every Page
  4. Embed on the Homepage
  5. Embed on a Product or Collection Page
  6. Embed on a Single Page or Post
  7. Embed in the Footer
  8. Custom HTML Section


1. Copy Embed Code

After you publish a custom app, you can add it to your Shopify store. To do this you need to use the correct embed code.


Step 1

Click on the red Embed button to open the Embed Options screen:


NOTE

If you're on the Dashboard page, you can still jump to Embed Options by clicking on 3 dots and selecting Embed.

Embed Options Shortcut


Step 2

Select the preferred option for Autoscale and an appropriate Resize Mode.

Resize Mode Suggestions

FIND OUT MORE
  • Autoscale - Learn how autoscale works.
  • Resize Mode - Get familiar with the available resizing options.


Step 3

Toggle the Shortcode value based on the instructions provided in each section below.


Step 4

Copy the code and follow the instructions below to paste it in the right place.

Copy Embed Code

back up ↑

2. Embed in the Header

To add an app to your homepage, turn off the SHORTCODE format and copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click the 3 dots and select Edit HTML/CSS.

Edit HTML/CSS


Step 2

Find the header.liquid file, or navigate to it directly here.


Step 3

Paste the embed code in the file on the right, inside the header tags where you want it to appear. Save the changes and click Preview.

Save and Preview

back up ↑

3. Embed in Every Page

To add an app to your homepage, turn off the SHORTCODE format and copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click the 3 dots and select Edit HTML/CSS.

Edit HTML/CSS


Step 2

Find the theme.liquid file, or navigate to it directly here.


Step 3

Paste the embed code in the file on the right, outside the main DIV containing content_for_layout. Save the changes and click Preview.

Save and Preview

back up ↑

4. Embed on the Homepage

To add an app to your homepage, turn off the SHORTCODE format and copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click the 3 dots and select Edit HTML/CSS.

Edit HTML/CSS


Step 2

Find the index.liquid file, or navigate to it directly here.


Step 3

Paste the embed code in the file on the right, below content_for_index, or in any section where you want the app to appear, if your index file has more code. Save the changes and click Preview.

Save and Preview

back up ↑

5. Embed on a Product or Collection Page

To add an app to a product page or collection, use the SHORTCODE format.


Step 1

In your Shopify Dashboard select Products, then stick with Products or select Collections.

Select Product


Step 2

Select the product or collection you want to edit and click on the <> icon to switch to HTML view.

Show HTML


Step 3

Paste the embed code anywhere on the page, where you want the app to be visible. Save the changes and view the updated page.

Save and Preview

back up ↑

6. Embed on a Single Page or Post

To add an app to a single page or post, use the SHORTCODE format.


Step 1

In your Shopify Dashboard select Online Store, then Pages or Blog posts.

Select Page


Step 2

Select the page or post you want to edit and click on the <> icon to switch to HTML view.

Show HTML


Step 3

Paste the embed code anywhere on the page or post, where you want the app to be visible. Save the changes and view the updated page.

Save and Preview

back up ↑

To add an app to your homepage, turn off the SHORTCODE format and copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click the 3 dots and select Edit HTML/CSS.

Edit HTML/CSS


Step 2

Find the footer.liquid file, or navigate to it directly here.


Step 3

Paste the embed code in the file on the right, preferably inside the footer tag, on a new line. Save the changes and click Preview.

Save and Preview

back up ↑

8. Custom HTML Section

To add an app as an individual HTML section, turn off the SHORTCODE format.


Step 1

In your Shopify Dashboard select Themes, then Customize theme.

Select Page


Step 2

Select the Add section option.

Show HTML


Step 3

Select the last item called Custom HTML.

Save and Preview


Step 4

Paste the embed code in the box that just appeared. Save the changes and view the updated page.

Save and Preview

back up ↑

Further Reading

  • Autoscale - Learn how autoscale works.
  • Resize Mode - Get familiar with the available resizing options.
  • FAQs - Frequently asked questions, answered.

Have more questions? Contact a human at support@widgetic.com.

Last updated on 10th Apr 2017