How-To

Adding Plugins to a Shopify Theme with HTML

Created June 15 2016. Updated June 24 2016

Page vs. Theme (HTML)

You can add POWr Plugins to a single Shopify page, or to the entire Shopify theme. What's the difference? Adding a plugin to a Page means it will only appear on that specific page. Adding a plugin to your Shopify Theme means it will appear on every page where that Theme file is used.

For example, you could add POWr Comments to a single product page. Or you could add POWr Comments to your product theme file, which would add the plugin to ALL product pages.

Add to Page

  1. Open your Shopify Admin.
  2. Select a specific Page, Blog Post, Product, or Category.
  3. Paste the plugin's shortcode into the Content box.
  4. Click Save.
  5. Click View to visit the specific page and see your plugin.

Add to Theme (HTML)

  1. Open your Shopify Admin.
  2. Click on Sales Channels and select Online Store.
  3. Click on Themes.
  4. Click the three dots ().
  5. Click Edit HTML/CSS from the list.
  6. Open the appropriate HTML file
  7. Paste the plugin's HTML code into the file in the appropriate location.
  8. Click Save.
  9. Click Preview and to see your plugin.

Popular Places to Add Plugins in Themes

The places you can add a plugin in your Shopify Theme are practically unlimited, and vary slightly from one theme to another. Here are some of the most popular.

Homepage

To add a plugin to your Shopify store's homepage, find the index.liquid file. Paste your plugin's HTML code into the file. The lower you paste the code in the index.liquid file, the lower your plugin will appear on the homepage.

Every Page

To add a plugin to every page in your Shopify store -for example, for adding a Popup- find the theme.liquid file. Paste your plugin's HTML code into the file somewhere between the opening and /closing "body" tags. The lower you paste the code into the file, the lower it will appear on each page.

.

Page Footer

To add a plugin to the footer of every page -for example, for adding Social Media Icons- find the theme.liquid file. Scroll down through the file to find the <-- Begin Footer --> note. Paste the plugin's HTML code below the note. You can move the plugin HTML code further down in the file to move the plugin further down the page footer.

Yes, This was helpful
Yes, This was helpful
No, This was NOT helpful