This recipe shows you how to use AdPlugg to place ads into the sidebar of your Shopify site's pages. Pages are used for things such as your "About" page. Since the default Shopify theme, "Debut", doesn't have a sidebar for the pages 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.
- 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.
- From inside the Shopify admin, go to Online Store > Themes.
- Under the Actions menu for your current theme, click Edit Code.
- In the file tree on the left, under Layout, click theme.liquid.
- From within your account at adplugg.com, click Download and then Snippet.
- Click the Get The Snippet button at the bottom.
- Copy the AdPlugg SDK and paste it into the theme.liquid file right after the opening <head> tag.
- Press the Save button.
Add a Sidebar to Your Shopify Pages
Now we are going to add a sidebar to your Shopify theme's pages. This is necessary for themes such as Shopify's default "Debut" theme.
- From inside the Shopify admin, go to Online Store > Themes.
- Under the Actions menu for your current theme, click Edit Code.
- In the file tree on the left, under Templates, click page.liquid.
- Change line 3 as follows. Note that this tells the page content to only use 2/3s of the width 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">
- Right after the closing tag for that div (on line 11), 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>
Now if you open one of your 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 Pages Sidebar
Now we are going to add our AdPlugg ad to the sidebar of our Shopify pages.
- From inside the Shopify admin, go to Online Store > Themes.
- Click the "Customize" button for your current theme.
- At the top, there is a dropdown for the page that you are currently customizing. It defaults to "Home page". Open the dropdown, scroll to the bottom and under "PAGES", select the page that you want to place the ads on (ex: "About Us").
- Click on the "Custom content" section in the sections panel on the left.
- 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.
- 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.
- Paste the AdPlugg Ad Tag into the HTML box in Shopify.
- Press the "Save" button to save your changes.
Your ads should now start serving into the right sidebar on your Shopify page!
Repeat steps 4 through 8 for any other pages that you want your ads to appear on.
Adding More Ads!
You can add Ad Tags into other areas of your site using the same technique that we used above. Check out this other recipe to place ads into the sidebar of your Shopify Blog. If you want to, you can also use AdPlugg Zones to serve different (or the same) ads into different places on your site.
