Skip to main content

Add a badge to your shop

banner top

Follow these steps to add a badge to your shop.

How to add a tag to the product​

Start by adding a Tag to the product(s) you want to show the Milkywire badge together with. In your product page, under each of your products you have the option to tag them. In the following examples we have named our tag milkywire, how ever, you are free to name it what ever.

Product tag shopify

How to add a badge to your product page​

This results in a badge on the product page if the product tag matches milkywire.

In Snippets/product-form.liquid #93​

{%- for tag in product.tags -%}
  {% if tag contains 'milkywire' %}
      <div style="display: flex; flex-direction: row; align-items: center; margin-top: 8px;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="#1C1D1D" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.4934 6.20375 17.7962 1.50661 12 1.5ZM3 12C3.00243 9.10629 4.39826 6.39083 6.75 4.70475V6.75C6.75 7.16421 7.08579 7.5 7.5 7.5H10.0365C10.3205 7.49985 10.5801 7.3393 10.707 7.08525L11.25 6H14.25V10.5H9.927C9.81065 10.4999 9.69588 10.5269 9.59175 10.5788L7.16475 11.793C6.9107 11.9199 6.75015 12.1795 6.75 12.4635V15.2423C6.74989 15.5491 6.93676 15.8251 7.22175 15.939L10.5 17.25L11.118 20.955C6.51447 20.4964 3.00609 16.6263 3 12ZM16.5 19.782V17.25L17.8162 15.276C17.9333 15.1002 17.9709 14.8832 17.9198 14.6782L17.25 12V9.75H20.7038C21.7372 13.6602 20.0123 17.7766 16.5 19.782Z" fill="#1C1D1D"  />
      </svg>
            <p style="font-size: 12px; margin: 0; margin-left: 8px; color: #1C1D1D; line-height: 1;">10% of this product will be donated to protect wildlife through Milkywire</p>
        </div>
    {% endif %}
    {%- endfor -%}

Product page

How to add a badge to your cart page​

This results in a badge on the cart page if the product tag matches milkywire.

In Templates/cart.liquid #72​

{%- for tag in product.tags -%}
  {% if tag contains 'milkywire' %}
      <div style="display: flex; flex-direction: row; align-items: center; margin-top: 8px;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="#1C1D1D" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.4934 6.20375 17.7962 1.50661 12 1.5ZM3 12C3.00243 9.10629 4.39826 6.39083 6.75 4.70475V6.75C6.75 7.16421 7.08579 7.5 7.5 7.5H10.0365C10.3205 7.49985 10.5801 7.3393 10.707 7.08525L11.25 6H14.25V10.5H9.927C9.81065 10.4999 9.69588 10.5269 9.59175 10.5788L7.16475 11.793C6.9107 11.9199 6.75015 12.1795 6.75 12.4635V15.2423C6.74989 15.5491 6.93676 15.8251 7.22175 15.939L10.5 17.25L11.118 20.955C6.51447 20.4964 3.00609 16.6263 3 12ZM16.5 19.782V17.25L17.8162 15.276C17.9333 15.1002 17.9709 14.8832 17.9198 14.6782L17.25 12V9.75H20.7038C21.7372 13.6602 20.0123 17.7766 16.5 19.782Z" fill="#1C1D1D"  />
      </svg>
            <p style="font-size: 12px; margin: 0; margin-left: 8px; color: #1C1D1D; line-height: 1;">10% of this product will be donated to protect wildlife through Milkywire</p>
        </div>
    {% endif %}
    {%- endfor -%}

Chart