Make the most out of Google Adsense on your Shopify store

Make the most out of Google Adsense on your Shopify store

In one of our previous articles you have learned how to get approved and add Google Adsense on your Shopify store. Also all the pros and cons of using Adsense on Shopify.

This article will better explain how to create the best balance between earning through ads and maintaining a professional looking online store.

In case you have already embedded Adsense on your Shopify store, you may have noticed a quite significant drop in the page load speed times. It is a normal behaviour since most of the ads shown on the store come from different locations, whole new JS libraries need to be loaded, there is more graphical content on the front-end and so on. This may be quite a big issue, especially on a website that serves as an online store, where performance and a clean design is a key factor for a higher conversion rate.

Also showing ads amongst your products is not such a great idea. The primary objective of the store is to sell your products, so advertising for others may be bad for your sales.

The following steps require a small amount of technical knowledge. In case you already placed the Adsense code in your "theme.liquid" file you are qualified enough.

You can read more about how to add Adsense on Shopify here.

Shopify, by offering such a neat "templated" website structure, gives us, the end-users, the ability to decide exactly where any element will load. Each of the page types on a store uses a template. For example the product page uses the logic written inside the templates/product.liquid file. These templates names are globally accessible inside the code by calling "template.name".

To achieve the best balance between performance and ad revenue, Adsense should only be allowed to place the ads on the blog and article pages. These pages are likely to have the least graphic content and a lot less JavaScript logic running in the back so they are fast by default. Also by not showing ads on your homepage, collections and product pages, you can "split" your website in the professional-looking store and the blog. This way you are most likely to make the most of both the store and the ads showing on your blog.

To achieve this behaviour you simply have to add a conditional statement around the Adsense code in your "theme.liquid" file:

  • Log into your Shopify store
  • Go to Online Store > Themes > Actions > Edit Code
  • Open "layout/theme.liquid" file
  • Place the following piece of code at the start of the Adsense code: {%- if template.name == "blog" or template.name == "article" -%}
  • And at the end : {%- endif -%}

It should look like this:

Adsense code

By doing this, Shopify will load the Adsense script only inside the blog and article templates. Simple as that.

Also you can choose any templates to show the ads. It is completely up to your decision.

Leave a comment

Please note, comments need to be approved before they are published.