Shopify Development

Today we are making it easy to show promo code discounts on all of the collection pages around a theme. We want to make an easy interface in the theme customizer for non-technical merchants to update which products and collections should show the promo code. We also want this announcement text to cross out the normal price and show what the discounted price is. We will accomplish this by adding settings to the theme’s global settings and showing you how to bulk add/remove tags in the Shopify dashboard. Note that in this blog I am referencing Dawn theme. Let’s get started.

Full code: https://github.com/ndrishinski/blogs/tree/master/promo-code-announcement-text/snippets

Prefer Video?

Enjoy otherwise read on!

Bulk Add or Remove Tags via Collections

I have built a similar solution to this using the product collection attribute but it was full of problems. I believe using tags is a much better strategy because of the problem of differing theme pages not being collection aware. What this means, is within the collection being in the URL the product does not have access to the collection it is in.

Tags however are attached to the product virtually everywhere we want in liquid. So the steps to bulk adding or removing tags are as follows:

1. Navigate to Products and click the filter button, filtering by collection

2. Next we want to choose the collection we want to edit.

3. Now we can click the top most checkbox on the left side to select all products, and click the 3 dot menu, ‘Add Tags’

4. Now you can enter the tag name, click to add and save. (Note that we will use this tag later in our code to check if we should show the message).

Creating Theme Global Settings

Now that we have applied the tags to our products, the next step is to set some global settings on our theme so our merchant can easily change these settings in the customizer. To do this, open up config/settings_schema.json and update the file to include this:

[
    {
      "name": "theme_info",
      "theme_name": "Dawn",
      "theme_version": "8.0.0",
      "theme_author": "Shopify",
      "theme_documentation_url": "https:\/\/help.shopify.com\/manual\/online-store\/themes",
      "theme_support_url": "https:\/\/support.shopify.com\/"
    },
// add here
    {
      "name": "Promo Code by Tag",
      "settings": [
        {
          "type": "checkbox",
          "label": "Check to enable promo code tags",
          "id": "promo-tag-enabled"
        },
        {
          "type": "text",
          "label": "Enter tag to show promo code",
          "id": "promo-tag"
        },
        {
          "type": "text",
          "label": "Enter promo code",
          "id": "promo-code"
        },
        {
          "type": "range",
          "id": "promo-percent",
          "min": 0,
          "max": 1,
          "step": 0.1,
          "default": 0,
          "label": "Discount % in decimal"
        }
      ]
    },
// add above here
    {
      "name": "t:settings_schema.logo.name",
      "settings": [
        ...

After saving this file, we will now have the ability to toggle this feature on/off, enter the product tag we created in our last step to check against, show the actual promo code the user should use, and the discount that is going to be applied. If we open the theme customizer, we should see these options now where we can add the following data:

Adding Liquid to Render Promo and Discount

Now all our configuration is in place, we just need to add some code! Now for this tutorial we are only showing this on non-product pages, but you are welcome to configure however you please. See this file here.

If we open up snippets/price.liquid we can add some conditional logic around line 49 to determine if this is a product page or not:

...
<div class="price__regular">
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
      {% if request.path contains 'products/' %}
        {% assign showPromo = false %}
      {% else %}
        {% assign showPromo = true %} 
      {% endif %}
...

Now immediately below we can add some more logic:

{% if settings.promo-tag-enabled and product.tags contains settings.promo-tag and showPromo%}
        <span class="price-item price-item--regular" style="text-decoration: line-through; color: red;">
          {{ price | money }}
        </span>
        <p style="margin: 0px; padding: 0px;">
          <span class="price-item price-item--regular">
          {% assign discount = 1 | minus: settings.promo-percent %}
            {{ price | times: discount | money }} with code: {{ settings.promo-code }}
          </span>
        </p>
      {% else %}
        <span class="price-item price-item--regular">
          {{ money_price }}
        </span>
      {% endif %}

What is happening here? Well we are checking if the promo tag is enabled (the first setting in theme customizer), then we are checking if the current product has the tag that dictates it is discounted on promo, and lastly we are making sure this isn’t a product page.

Then a bit lower, we are adding some style to cross out the normal price and show a discounted price (that we set in our theme customizer settings) with the promo code that is also from our theme settings.

Conclusion

I hope you enjoyed this tutorial creating a custom message to alert users to promo codes on specific products.