Login

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 an app, you can add it to your Shopify store. To do this you need to use the correct embed code. Our Editor will generate this code for you, depending on the options you select for how the app should be displayed.


Step 1

On your published app page click on the Embed button to open the Embed Options modal:


NOTE

If you are in the Dashboard page you can jump to the Embed Options for each item by clicking on the dots and selecting Embed:


Step 2

In this screen, you can adjust the size and position of your app, and tell it how to scale.

  • Resize Mode - tells the app how to scale.
  • Autoscale - if selected, the app will expand to fit all your content. Otherwise the app will display a scroll bar.
  • Adaptive - displays a mobile optimised layout for any width below the value you set. This is useful for mobile devices.
  • Align - works with resize modes allow-scale-down and fixed. The default value is align=“left”, but you can change it in the embed code to “center” or “right”.


FIND OUT MORE
  • Autoscale - Learn how autoscale works.
  • Resize Mode - Get familiar with the available resizing options.
  • Adaptive - Learn how to enable a layout optimized for mobile devices.
  • Align - Learn how to align an app on your page.


Step 3

Copy the embed code and follow the instructions in the next steps to paste it in the right place.

back up ↑

2. Embed in the Header

To add an app in the header, copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click on Actions and select Edit code.

Edit Code


Step 2

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


Step 3

Search for /header, paste the embed code before it and click Save. See the changes by clicking on Preview in the top menu.

Save and Preview

back up ↑

3. Embed in Every Page

To add an app to every page, copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click on Actions and select Edit code.

Edit Code


Step 2

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


Step 3

Search for content_for_layout, paste the embed code outside the main div and click Save. See the changes by clicking on Preview in the top menu.

Save and Preview

back up ↑

4. Embed on the Homepage

To add an app to your homepage copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click on Actions and select Edit code.

Edit Code


Step 2

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


Step 3

Search for content_for_index, paste the embed code outside the div and click Save. See the changes by clicking on Preview in the top menu.

Homepage

back up ↑

5. Embed on a Product or Collection Page

To add an app to your homepage copy the embed code.


Step 1

In your Shopify Dashboard select Products or Collections.

Select Collection


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 where you want the app to load. Save the changes and click on View below the title to see the updated page.

Save and Preview

back up ↑

6. Embed on a Single Page or Post

To add an app to a page or on your blog, copy the embed code.


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 load. Save the changes and click on View Page below the title to see the updated page.

Save and Preview

back up ↑

To add an app to your footer copy the embed code.


Step 1

In your Shopify Dashboard select Themes, then click on Actions and select Edit code.

Edit Code


Step 2

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


Step 3

Search for footer and paste the embed code between an ending and a starting div. Experiment until you position it where you need. Click Save then see the changes by clicking on Preview in the top menu.

Save and Preview

back up ↑

8. Custom HTML Section

To add an app as an individual HTML section, copy the embed code and follow these steps.


Step 1

In your Shopify Dashboard select Themes, then click on Customize.

Select Page


Step 2

Select the Add section option.

Show HTML


Step 3

Select the last item called Custom content.

Save and Preview


Step 4

Select Add content.

Save and Preview


Step 5

Select Custom HTML.

Save and Preview


Step 6

Paste the embed code in the box that just appeared. You can set the container width to 100% if you need. You can also remove the previous sections by clicking on them and selecting Remove Section. 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.
  • Adaptive - Learn how to enable a layout optimized for mobile devices.
  • Align - Learn how to align an app on your page.
  • FAQs - Frequently asked questions, answered.

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

Still need help? Get in touch!
Last updated on 31st Oct 2018