1. Home
  2. Integrations
  3. Shopify
  4. How to indicate that products are available for Low Carbon delivery on Shopify

How to indicate that products are available for Low Carbon delivery on Shopify

Adding the script tag

  1. Login to your Shopify admin panel
  2. Click Online Store -> Themes in the left navigation bar.
  3. Click the “Customize” button that’s located in the Live theme panel. Clicking that will redirect you to the theme editor.
  4. Once you’re in the theme editor, click the “Theme Actions” dropdown on the bottom left and click “Edit Code”.
  5. Click the theme.liquid file to open it up.
  6. Search for the closing </head> tag. Once you find it, paste the following code right above it.
<script src="https://shiphero-fulfillment-public.s3.amazonaws.com/sf-low-carbon/index.js"></script>

Adding the badge

Next step is to add the code for the Low Carbon badge.

{% assign productTags = product.tags | join: ', ' %}{% if productTags contains 'sf-low-carbon' %}<div id="sf-low-carbon" style="margin-left:10px;"></div>{% endif %}

This badge can be placed wherever you like. In our example, we wanted to show the badge near the price of the product. To achieve that, we added the badge code to our snippets/product-form.liquid file.

Here you can see what the badge looks like after we’ve added it to the product form.

Enabling the badge for certain products

Now it’s time for the easy part, enabling the Low Carbon badge for products that you have sent to us for Low Carbon Fulfillment.

To do this, all you need to do is add the tag sf-low-carbon to your products.

Setting up Free ShipHero Low Carbon Delivery

The last step is to setup the shipping method that your customers will choose for Low Carbon delivery.

  1. Click Settings -> Shipping in your Shopify admin menu
  2. Click Manage Rates in the General shipping Rates box.
  3. Scroll down to North America and click Add Rate
  4. Leave “Set up your own rates” checked. Enter “FREE ShipHero Low Carbon Delivery” in the Rate name input. Leave price as $0.00

When customers check out on your store, the shipping method should show like this.

Updated on April 24, 2020

Was this article helpful?

Related Articles