Cookbook
  1. Home
  2. Support
  3. Cookbook
  4. Shopify
  5. Placing Ads Into The Sidebar of Your Shopify Site's Product List Pages
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">
      %%SIDEBAR%%
    </div>
  </div>
</div>

  1. Press the "Save" button to save your changes.
  2. Next, back in the file tree on the left, under Templates, click collection.liquid. Replace the entire default contents of this file with the following code and save the file. Note that this will create a custom section and inject it at the location of the '%%SIDEBAR%%' placeholder that we created above (shout out to Jon Schwartz for originating the Nested Sections strategy that we are using here).
{% comment %}
  The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% capture sidebar_content %}
  {% section 'custom-content' %}
{% endcapture %}
{% assign sidebar_content = sidebar_content | replace: 'class="shopify-section index-section"', 'class="shopify-section-nested index-section"' %}

{% capture template_content %}
  {% section 'collection-template' %}
{% endcapture %}

{% assign template_content = template_content | replace: "%%SIDEBAR%%", sidebar_content %}

{{ template_content }}

Now if you open one of your product list pages, you should see a right sidebar with the default custom-content text. 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. From inside the Shopify admin, go to Online Store > Themes.
  2. Click the "Customize" button for your current theme.
  3. At the top, there is a dropdown for the page that you are currently customizing. It defaults to "Home page". Change it to "Collection pages".
  4. Click on the "Custom content" section in the sections panel on the left.
  5. Remove the value from the Heading field. Note that you can, of course, also keep this or change it to something else if you want. If you are inserting ads for sponsored products in the sidebar, you might make the Heading something like "Sponsored".
  6. 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.
  7. Paste the AdPlugg Ad Tag into the HTML box in Shopify.
  8. 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. You can do this for basic content such as text and images by customizing the custom content section as we did above. Or for more advanced content, you can do it by modifying your collection-template.liquid file.

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 (either right above or right below the %%SIDEBAR%% text (depending on your preference)):
<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.