Skip to main content

How to install the Impact badge? (Tutorial)

Christopher Mjelde
  • Updated

To inform your customers of the impacts your products have, we recommend you install our Impact badge. Once installed, the badge will appear on all product pages you've added impact to, and it will automatically display the right type and quantity of impact.

There are two main ways to install the Impact badge.

  1. If you use a Shopify 2.0 theme, the easiest and recommended way is to use the Theme Editor.
  2. If you use an older theme, or if you want more granular control, you can inject the code snippet directly into the theme files.

We'll cover each in turn. 

1. Instructions for installing the badge with the Theme Editor

1.1 Navigate to the Themes menu within your Shopify admin, and press 'Customize'

The Themes menu is accessible through the left-hand panel, marked in blue. The Customize button is marked in red.

BadgeInstall-1.1.png

 

1.2 In the Theme Editor, click the dropdown menu and navigate to 'Products'

BadgeInstall-1.2.png

 

1.3 Add a block of Custom liquid

BadgeInstall-1.3.png

 

1.4 Paste the Verdn badge code snippet into the Custom liquid block

For your convenience, here is the code snippet:

{% if content_for_header contains "library.verdn.com" %}
  {% render "verdn-x-product-badge" %}
{% endif %} 

BadgeInstall-1.4.png

 

1.5 Move the custom liquid block to position the badge where you want it on the page

In the example below, the Custom liquid block is moved just underneath the Buy buttons, and this matches up with the preview on the right-hand side.

BadgeInstall-1.5.png

 

2. Instructions for installing the badge via the theme files

2.1 Go to the 'Customize' tab within the Verdn Shopify app.

BadgeInstall-1.png

 

2.2 Copy the badge code by clicking the 'Copy code' button

To reveal the code, click the 'Show installation instructions' link in the 'Impact badge' section.

BadgeInstall-2.1.png

The snippet is also pasted here, for your convenience:

{% if content_for_header contains "library.verdn.com" %}
  {% render "verdn-x-product-badge" %}
{% endif %} 

 

2.3 Enter your online store's theme files, by clicking the 'Edit theme files' link

BadgeInstall-3.1.png

 

2.4 In the code editor, find and open your product template file

For most themes, the product template files will be in the 'Sections' folder.

If you have several product templates, you have to do the following steps for all applicable files.

BadgeInstall-5.png

 

2.5 In the product page file, find a good place for the badge, and paste the code in

Where you paste the code will determine where on the actual product page the badge will sit (i.e. under the price, under the 'Add to cart' button, etc). 

Paste the code using Ctrl+V (on PC) and Cmd+V (on Mac), or right click on the page and press 'paste'.

BadgeInstall-6.1.png

 

2.6 Save your changes, and check that the badge appears by refreshing a product page

Save with Ctrl+S (on PC) and Cmd+S (on Mac).

Related articles