Skip to content
  • There are no suggestions because the search field is empty.

Offset Website manual for Shopify

Install the Climate Action Website label to appear on your website´s footer and take climate action with your website for free!

How to install via edit theme:

  1. Sign in to your account.
  2. Go to Website Labels - Tree-Nation and click on the ´configure or update´ button.  
  3. Choose a theme (colour).
  4. Choose a language. 
  5. Add your domain.
  6. Your code will be generated.
  7. Copy the code and add it accordingly to your Shopify file, see below:
    • Go to your Shopify themes:

    • Click in the footer section on ´add section´ and click ´Custom Liquid´
    • Click in the left menu on ´Custom Liquid´ and add the code. We recommend adding the following script to centralize to widget and add a short description about your commitment. 

    EXAMPLE

    <style>
      .custom-liquid-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: center;
        width: 100%;
      }
    </style>

    <div class="custom-liquid-container">
    <h2> 🌳 Let's reforest the world together 🌳</h1>
    <script src="https://widgets.tree-nation.com/js/widgets/v3/widgets.min.js"></script><div data-widget-type="offset-website" data-tree-nation-code="631a08256d39a" data-lang="en" data-theme="light"></div>
    </div>

    How to install via codes - more advanced 

    1. Sign in to your account. 
    2. Go to Website Labels - Tree-Nation and click on the ´configure or update´ button.
    3. Choose a theme (colour).
    4. Choose a language.
    5. Add your domain.
    6. Your code will be generated.
    7. Copy the code and add it accordingly to your Shopify file, see below:
    • Go to your Shopify store, click online store, click on the three dots, and click on ´edit code´
    • Browse in the search engine for the footer.liquid section, click on it and you will find a written code that represents your website footer. 
    • Insert the widget code near the bottom of the file, then save your changes. Next, visit your website and review how the footer looks. If you are not satisfied with its position, move the code to another location within the same footer.liquid file. The widget’s location will update according to where you place the code.
    • After successfully installed, the first tree will be planted in your forest.

    Key points:

    • Make sure this is placed after — never inside it.

    • The <script src="..."> loads the Tree-Nation widget.

    • The second <script> block initializes it and renders it in the div with ID tree-nation-offset-website.