Cookbook
  1. Home
  2. Support
  3. Cookbook
  4. Shopify
  5. Placing Ads Into The Sidebar of Your Shopify Site's Blog
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 Articles

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 Article Sidebar

Now we are going to add our AdPlugg ad to the Shopify site's blog article 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. Click the back arrow ( < ) in the Shopify sidebar to get back to the tree (while keeping the Custom content section selected). Below where it says "Custom content" in the sidebar, click "Add block" and choose the "Custom HTML" block. This will add a Custom HTML block to your sidebar.
  7. 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.
  8. Paste the AdPlugg Ad Tag into the HTML box in Shopify.
  9. Press the "Save" button to save your changes.

Your ads should now start serving into the right sidebar on your Shopify site's blog articles!

Add a Sidebar to Your Shopify Blog Index

Now we are going to add a sidebar to your Shopify theme's blog index. This is the main page for the blog that lists the articles.

  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 blog-template.liquid.
  4. At line 27, insert the following line just above the for loop, like so:
From:
{% for article in blog.articles %}

To:
<div class="grid__item medium-up--two-thirds">
{% for article in blog.articles %}

  1. After the end of the for loop (on line 109), add the following code. Note that this will close the 2/3 div that we created above and add a 1/3 sidebar.
</div>
<div class="grid__item medium-up--one-third">
    %%SIDEBAR%%
</div>

  1. Those two changes covered grid view, now we'll do list view. At line 128, insert the following 2 lines just above the for loop, like so:
From:
{% for article in blog.articles %}

To:
<div class="grid">
<div class="grid__item medium-up--two-thirds">
{% for article in blog.articles %}

  1. After the end of the for loop (on line 203), add the following code. Note that this will close the 2/3 div that we created above and add a 1/3 sidebar.
 </div>
 <div class="grid__item medium-up--one-third">
    %%SIDEBAR%%
 </div>
</div>

  1. Next, back in the file tree on the left, under Templates, click blog.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 blog.liquid template can be found in /sections/blog-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 'blog-template' %}
{% endcapture %}

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

{{ template_content }}

If you open your main blog page, 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 Index Sidebar

Now we are going to add our AdPlugg ad to the sidebar of our Shopify blog index page. This is basically the same as what we did above for the blog article pages but now we are going to do it for the main blog index page.

  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".
  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. Click the back arrow ( < ) in the Shopify sidebar to get back to the tree (while keeping the Custom content section selected). Below where it says "Custom content" in the sidebar, click "Add block" and choose the "Custom HTML" block. This will add a Custom HTML block to your sidebar.
  7. 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.
  8. Paste the AdPlugg Ad Tag into the Custom HTML block in your Shopify admin.
  9. Press the "Save" button to save your changes.

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

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.