Cookbook
Mr. Pickles the AdPlugg Pug

Placing Ads Into The Sidebar of Your Shopify Site's Blog

This recipe shows you how to use AdPlugg to place ads into the sidebar of your Shopify site's blog. Since the default Shopify theme, "Debut", doesn't have a sidebar for the blog by default, we 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 Blog

Now we are going to add a sidebar to your Shopify theme's blog. 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 Templates, click article.liquid.
  4. Change line 16 as follows. Note that this tells the blog content to only use 2/3s of the page.
From:
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">

To:
<div class="grid__item medium-up--two-thirds">

  1. Right after the closing tag for that div (on line 18), add the following code. Note that this will add a custom-content section and tell it to use 1/3 of the page. This will be our right sidebar!
<div class="grid__item medium-up--one-third">
    {% section 'custom-content' %}
</div>

If you open one of your blog post pages, you should now 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 Blog Sidebar

Now we are going to add our AdPlugg ad to the Shopify site's blog sidebar.

  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 "Blog posts".
  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.
  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 site's blog!

Adding More Ads!

You can add Ad Tags into other areas of your site using the same technique that we used above. You can also use AdPlugg Zones to serve different (or the same) ads into different places on your site.