Showing applicable discount codes on product page

Manjiri
Shopify Partner
6 0 5

Hello

 

I am working on building a theme for my client. The store has lots of discount codes across different products which are applicable to all the customers unconditionally. The requirement here is to show the discount codes applicable for a specific product on the product page, or atleast in a seperate offers page. 

Is there any way to get the applicable discount codes for a products within the theme?

 

Thanks

Replies 53 (53)

Liam
Shopify Staff
2677 288 734

Hey folks! I think I may have a workaround for this request 🙂

 

It would be possible to display each individual discount code on the product page by using metafields. The general process would be to assign the discount code as a metafield value to each individual product, and then use the metafield Liquid object to output the unique value/ discount code on each product page. 

 

If you use this approach however, it’s important to remember that if a product’s discount code is changed, you’d need to manually update the discount metafield on the product level. 

 

Here’s a description of the process:

 

  1. Create a discount code for a specific product. 

06-04-8d9vt-dfawf

 

  1. Create a product metafield definition, with a single line text content type eg: “discount” 06-03-usbk2-hxsbn

 

  1. On the product editing page that is associated with the discount, add the discount code to the new “discount” metafield: 06-07-saymu-s1b78

 

  1. If your theme supports sections on all pages, and has a custom Liquid block on your main product section (like Dawn) you can navigate to the Theme Editor and select a Product page. Add a new Custom Liquid block to the main product section, and add code that will display the value of a products' discount metafield (if one exists): 
{% if product.metafields.custom.discount != blank %}

  <p>Use this discount for 30% off: {{ product.metafields.custom.discount }}</p>

{% endif %} 

 

06-15-0iz1e-wkt1s

 

  1. If your theme does not have a custom Liquid block, you can add the same code to a product.liquid template or section to display the message and discount code.

 

  1. Create more discounts for other products, and add the discount code as the value for the discount (meta)field in the product editing page on the admin. When a buyer switches pages, they’ll see a different discount code (or no code if the product does not contain a discount metafield value). 

 

Hope this solution helps! You could also customize the look and feel with CSS, and potentially build this as its own block element. It would also be a great idea for an app developer to build this logic and workflow into an app!!

 

Cheers,

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Blade3d
Tourist
5 0 1

These are pretty cryptic instructions, or maybe I pay for Shopify so I don't have to code!! But what or where is "product editing page that is associated with the discount"? I have each product page set up for discount, but don't see any new meta field. How do I enter the "logic" and maybe more detail can be shared as to the full logic argument coded and where. Again, sorry if I'm slow or something. I shouldn't have to be doing this coding at all, but any help would be appreciated.

afcompany
Shopify Partner
14 0 8

I want to offer a solution! 

I was able to set a % or fixed discount from the DISCOUNT section in Shopify Admin. You can apply this to 1 or as many collections as need more. You could also apply this to specific products individually I think. Title the discount name with the % or fixed amount you want to offer, this way you can keep track of what it is used for. 

Next, I added tags to the associated products you want to discount, you can do this in bulk by filtering by collection in the PRODUCTS section. The tags could be DISOUNT-5% or similar.

Then on the products page you can add logic, IF PRODUCT.TAGS CONTAIN DISCOUNT-5% THEN... add your logic to display discounts. I simply did the current price * percent discount to output my results. See below!

Here is my output that I came up with:

afcompany_0-1695046665883.png

Please reach out if you want any other help on this or have any suggestions/ recommendations!

SevSolutions
Shopify Partner
8 0 0

Hello Manjiri,

 

In response to your need for displaying discount codes on product pages, our team has just released an app called "Klip Product Page Coupons." It's built to show specific discounts for each product directly on the product page. You might find it useful for your client's store.

 

You can check it out here: Klip Product Page Coupons.

 

Screenshot 2024-01-23 at 1.58.00 AM.png

 

Hope this helps with your project.

 

Best,

Seva Dorn | Founder

Klip Coupons