Cookbook
Mr. Pickles the AdPlugg Pug

Placing Ads Into The Sidebar of Your Shopify Site's Product List Pages

This recipe shows you how to use AdPlugg to place ads into the sidebar of your Shopify site's product list/catalog pages. These are the pages in your shopify site that show all of your products. They are usually accessed by clicking on "Shop" or "Catalog" in your site's header. Displaying ads on these pages is a great way to offer special promotions, suggest products from sponsoring manufacturers, etc.

Since the default Shopify theme, "Debut", doesn't have a sidebar for on the product list pages by default, this recipe will also show you how to add one!

You can see a demo of what the end result of this recipe looks like on the AdPlugg Shopify sample site here.

Create An Ad

First, we need to create an AdPlugg Ad.

  1. From within your AdPlugg account, create an Ad and upload an ad image (see the Ad Help Page for details).

Add the AdPlugg SDK to Your Shopify Theme

Next we are going to add the AdPlugg SDK to your Shopify Theme. This allows you to place and run AdPlugg ads throughout your Shopify site.

  1. From inside the Shopify admin, go to Online Store > Themes.
  2. Under the Actions menu for your current theme, click Edit Code.
  3. In the file tree on the left, under Layout, click theme.liquid.
  4. From within your account at adplugg.com, click Download and then Snippet.
  5. Click the Get The Snippet button at the bottom.
  6. Copy the AdPlugg SDK and paste it into the theme.liquid file right after the opening <head> tag.
  7. Press the Save button.

Add a Sidebar to Your Shopify Product List Pages

Now we are going to add a sidebar to your Shopify theme's product list/catalog pages. This is necessary for themes such as Shopify's default "Debut" theme.

  1. From inside the Shopify admin, go to Online Store > Themes.
  2. Under the Actions menu for your current theme, click Edit Code.
  3. In the file tree on the left, under Sections, click collection-template.liquid.
  4. On line 143, make the following change:.
From:
<div class="page-width" id="Collection">

To:
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--two-thirds">
      <div id="Collection">

  1. Right before the last closing div (</div>) on line 249, add the following code. Note that this will add a right sidebar and tell it to use 1/3 of the page.

    </div>
    <div class="grid__item medium-up--one-third">
      {% comment %}
          #This is the content for the right sidebar.
      {% endcomment %}
      <h6>Sponsored</h6>
    </div>
  </div>
</div>

  1. Press the "Save" button to save your changes.

Now if you open one of your product list pages, you should see a right sidebar with the "Sponsored" text that we added above. Read on for how to modify this and add your ads.

Add an AdPlugg Ad to the Shopify Product List Pages Sidebar

Now we are going to add our AdPlugg ad to the sidebar of our Shopify product list pages.

  1. Same as above, from inside the Shopify admin, go to Online Store > Themes.
  2. Under the Actions menu for your current theme, click Edit Code.
  3. In the file tree on the left, under Sections, click collection-template.liquid.
  4. Find the section for your right sidebar (that you added above).
  5. In the AdPlugg admin, copy the Ad Tag to your clipboard. You can get the Ad Tag by going to Downloads > Snippet and then pressing the Get the Snippet button.
  6. Paste the AdPlugg Ad Tag into the HTML box in Shopify.
  7. Press the "Save" button to save your changes.

Your ads should now start serving into the right sidebar on your Shopify page!

Optional: Add A Menu to Your Shopify Sidebar

In addition to ads, you can insert other content into your sidebar. Here's how to add a menu to your new sidebar.

Create the Sidebar Menu

First we are going to create the new menu from the Shopify admin.

  1. From the Shopify admin, in the left sidebar, under "Online Store", click "Navigation".
  2. Click the Add Menu button.
  3. Name the menu "Sidebar Menu" (note that in the panel on the right, the "handle" should show as "sidebar-menu").
  4. Add a menu item (ex: "Search" with a link to the Search function).
  5. Press the "Save menu" button.

Add the Menu to your Sidebar

Now we are going to add the new menu to the sidebar that we created in the steps above.

  1. From inside the Shopify admin, go to Online Store > Themes.
  2. Under the Actions menu for your current theme, click Edit Code.
  3. In the file tree on the left, under Sections, click collection-template.liquid.
  4. Find the section for your right sidebar (that you added in the "Add a Sidebar to Your Shopify Product List Pages" section above) and insert the following code:
<h3 class="text-center">Browse</h3>
{% assign sidebar_link = linklists.sidebar-menu.links %}
<ul>
{% for sidebar in sidebar_link %}
  <li><a href="{{ sidebar.url }}">{{ sidebar.title }}</a></li>
  {% assign child_list_handle = sidebar.title | handleize %}
  {% assign child_list = linklists[child_list_handle] %}
  {% for child_link in child_list.links %}
    <li><a href="{{ child_link.url }}">{{ child_link.title }}</a></li>
  {% endfor %}
{% endfor %}
</ul>

  1. Press the "Save" button to save your changes.

You should now see your menu in the sidebar on your product list/catalog pages.

More Shopify Recipes

We have lots more Shopify recipes. Check them all out here.