When you sell products with impact using Verdn, we keep a tally of the total values (such as trees planted, or ocean-bound plastic pledges) accrued by your store. You can access these total values and display them on your website via the following options:

• Visual editor: Use the Impact counter section generator in the Verdn Shopify app to create a custom section to place on your store pages
• Custom Liquid metafields: Integrate Liquid metafields — of the impact totals — straight into your theme code for completely custom usage.

Creating a counter section with the visual editor

We've made a video for creating and embedding impact counter section that you can watch here.

Creating and updating your counter section

To create or update a counter section:

1. Open the Verdn app and navigate to the Customize menu
2. Scroll down until you find the "Impact counter sections" section and follow the instructions on screen to either:
   • Create your template design
   • Edit the one that already exists
3. Use the editor to do the following and more:
   • Add custom messaging
   • Add a background image, with effects
   • Choose which impact counters you'd like to show up in your section

Embedding a counter section into your store page(s)

Note: You must have created an impact counter section before attempting to embed it into your store's pages.

To embed a counter section, once created you can:

1. No-code: Use the Shopify visual theme editor to add your impact counter section as a block into your theme template.
2. Custom code: Place a code snippet directly into your theme for more control, or to work with custom themes.

Embedding with the Shopify visual theme editor (No-code)

1. From the Customize menu in the Verdn app, go to the Impact counters section and click on the Open visual editor button.
2. In your theme editor, on the template you'd like to add the impact counter section to, find the Add section button and select it
   
3. Scroll down to find the Impact counters section block
   
4. Add it to your template, and adjust font sizes as needed

Once you've added the section to your template, any changes you make to it inside the Verdn app (along with your total figures) will update automatically.

Placing a code snippet into your theme files

If you'd like to place the impact counter section into your theme code directly, use the following snippet to render it anywhere you'd like:

{% if content_for_header contains "library.verdn.com" %}
  {% render "verdn-x-impact-section-part" %}
{% endif %}

Changing font sizes

Depending on how you embedded your counter section into your store page, you can adjust the font sizes of a counter section in the following ways.

If you used the Shopify visual theme editor...

Within the visual Shopify theme editor (that you used earlier to place the counter section template in your template) use the controls available.

Overriding CSS selectors to change font sizes and more

If you're embedding the impact counter section as a snippet directly in your code, or if you'd like more fine-grained control over your counter section, the following CSS selectors can be used to override the default styles:

Note: Unfortunately, due to the way many of the counter section's styles are in-lined, you may have to use the !important keyword for certain styles.

---

Using custom Liquid metafields

If you don't want to use the impact counter section designer, or would like to include your totals in other places across your store's pages, you can embed the totals directly into your code as Liquid metafields that we make available in your theme.

Finding an impact counter's Liquid metafield

In the Customize menu of the Verdn app — and within the Impact counters section of that page — use the View Liquid metafields button to access a given counter's Liquid metafield.

Tip: Using multiple Liquid metafields

As the impact counter Liquid metafields are quite verbose, it can be handy to declare a placeholder variable when accessing multiple values within one template file, like so:

{% assign impact_counter_values = shop.metafields.verdn.counters %}
<p>Using the shorthand variable to access my store's total trees planted:</p>
<p>{{ impact_counter_values.Reforestation.TotalTrees.formatted }}</p>

Tip: Removing thousand-separators from totals

The final key for each metafield is either:

• .formatted — for thousand-separated values
• .raw — removes any formatting and outputs the (numeric) value directly

Tip: Adding a count-up animation to custom Liquid metafields

The impact counter section designer makes it easy to animate (or not) the counter values. You can achieve the same effect by adding the following HTML attribute to the element you place your metafield in:

<span data-verdn-animation-end-value="{{ YOUR_METAFIELD_HERE.raw }}">0</span>

Note: You must use the .raw object key to access your metafields when animating them, as the values are animated using their numerical value. You should also default to displaying 0 as the initial, static value (see above) to avoid the animation "jumping" on page-load, as it is dependent on a Verdn app script.