How to Display a Discount Code if a Product Contains a Tag

Overview

In this advanced tutorial, we'll show you how to display a unique discount code or a custom message if a product is tagged with a specific tag. This tutorial will also cover the process of displaying another message below the product description if a product does not contain this tag.

Getting Started

In the Custom Fields app dashboard, head over to Globals > Add Field and create two new global fields. These fields will be used later on in this tutorial to save the values that will be displayed when a product contains a specific tag and when it is not tagged.

Step 1: Create Discount Code field

Click on Global > Add field and create a new HTML field using the key "discount_code" or any other key that you'd like to use and click "Save".

Step 2: Create a no-discount message field

This field will be displayed when a product is not tagged. Follow the same steps as above and create a new HTML field using the key "discount_code_unavailable" and click "Save".

Step 3: Add some HTML content to the two fields to display the coupon

Click on Globals > Edit Globals and enter the following HTML by clicking the Source button in the toolbar. This code will display a box containing a discount code. You can customize the HTML code further to suit your preference.

For the first field enter this code:

<div class="Custom rich discount text" style="border-radius: 10px; border-style: solid; border-width: 2px; border-color: rgb(213, 81, 33);">
	<div class="Coupon code text">
		<p style="text-align: center;"><strong style="font-size: 16px;">LIMITED TIME OFFER FOR YOU*:</strong></p>

		<p style="text-align: center;"><span style="color: rgb(12, 12, 12); font-size: 16px;">Get 10% off </span><span style="color: rgb(61, 58, 58); font-size: 16px;">with code</span><strong style="color: rgb(61, 58, 58); font-size: 16px;"> </strong><strong style="color: rgb(213, 81, 33); font-size: 16px;">2020FREE10</strong></p>

		<p style="text-align: center;"><span style="color: rgb(3, 3, 3); font-size: 12px;">*Valid for all items in this collection</span></p>
	</div>
</div>

For the second field, enter this code:

<div class="Custom rich discount text" style="border-radius: 10px; border-style: solid; border-width: 2px; border-color: rgb(213, 81, 33);">
	<div class="Coupon code text">
		<p style="text-align: center;"><strong style="font-size: 16px;">NO COUPON CODE REQUIRED:</strong></p>

		<p style="text-align: center;"><span style="color: rgb(12, 12, 12); font-size: 16px;">Discount is already applied in the price </span></p>

		<p style="text-align: center;"><span style="color: rgb(3, 3, 3); font-size: 12px;">*Valid for all items in this category</span></p>
	</div>
</div>

When this process is complete and you switch back the content view using the "Source" button, the fields should look like so:

Step 4: Create a new product Liquid Template field to display the data

Click on Products > Add field and then create a new Liquid Template field using the key "display_discount" or any other key as shown below:

Next, click on the Create new liquid template field button.

Step 5: Add some code to display the coupon code in the Liquid template field

Once the liquid template field is created, add the following code to the Edit code section to create the logic to display the global fields that we created earlier on.

<!--| Replace MARKDOWN10 with the tag you'd like to check for |-->
{% if product.tags contains 'MARKDOWN10' %}
  <div class="custom-field--value">
      {{ shop.metafields.custom_fields["discount_code"] }}
  </div>
{% else %}
  <div class="custom-field--value">
      {{ shop.metafields.custom_fields["discount_code_unavailable"] }}
  </div>
{% endif %}

Remember to replace MARKDOWN10 with the tag that you'd like to check for.

Lastly, if Custom Fields is already installed then this field will be automatically displayed below the product description but if you'd like to display the coupon code anywhere else, you can use the following code:

{% include 'custom_fields.products.display_discount' %}