Cookbook
Mr. Pickles the AdPlugg Pug

Placing an Ad on Your Shopify Site's Home Page

This recipe shows you how to use AdPlugg to place an ad on your Shopify site's home page. This recipe just adds a single ad in one spot but you can use it to add any number of ads by combining it with other recipes, etc. The recipe uses the AdPlugg Ad Snippet, which will work on any site, but this recipe has instructions that are specific to a Shopify site.

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 an AdPlugg Ad to the Home Page

Now we are going to use the Shopify theme customize feature along with a Custom HTML Content Block to add an AdPlugg Ad Tag to your Shopify site's home page. Here's how to do it:

  1. From inside the Shopify admin, go to Online Store > Themes.
  2. Click the "Customize" button for your current theme.
  3. In the Sections panel on the left, click "Add section".
  4. Scroll to the very bottom and under "ADVANCED LAYOUT", choose "Custom Content" and then click the "Add" button.
  5. Click on the two default content blocks ("Talk about your brand" and "Image") and click the "Remove content" link at the bottom.
  6. Now click "Add content" and choose "Custom HTML".
  7. Remove the text from the "Heading" field.
  8. Back 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.
  9. Paste the AdPlugg Ad Tag into the HTML box in Shopify.
  10. Press the "Save" button to save your changes.

Your ads should now start serving into the Ad Tag on the home page of your Shopify site!

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.