Re: Showing applicable discount codes on product page
I dont find this on the product page to delet!?
Our client needs this as well. It makes a big difference when shoppers can see an immediate discount. JC Penney has a great implementation of this idea.
I also agree that this should definitely be a built-in feature. I spent 30 minutes looking for the option assuming it would be an obvious built-in feature.
That being said I did find an easy work-around that works just as well. I just went to edit my homepage and found that there was an option to add an 'announcement bar'. From there I was able to add my discount code to be used at checkout.
Let me know what you guys think!
I'm actually part of the Bold Team so I may be a bit biased here but I think our Bold Discounts App would be perfect. You can actually just put the product on sale with no discount code and it will be clearly visible on the product page.
So this is what it would look like on your product listing
And on the product description page:
It makes it clear of what the discount is and the badge makes it clear that it is on sale. You can customize the badge and a bunch of other things too. The app also has a lot of other features that I think you'd find useful plus there is a free trial.
Hope that helps!
Obviously it would be super great to have a built-in checkbox in the product page admin to hide / show the discount code on product pages.
The below solution is some-what involved, but once everything is set up, you'll be smooth sailing with dynamic discount codes on product pages and no app required.
Here's what I did:
Step 1: Create Discount Code
Take note of the name, you will use it in step 2. For this example, we will call the discount code COOL5 and it will offer 5% off a collection. Pause.. Open a new tab and lets create a collection
Step 2: Create a Collection
The title of your collection is going to be very very important. The title of my collection for the discount I just created will be: DISCOUNT-COOL5-5%.
The structure of this title is: DISCOUNT-{discount_name}-{discount_amount} where discount_name and discount_amount should match the discount you're creating.
Save this collection as a manual collection, and then add any products you want (our Discount Code in step 1 will apply to these). Also, this tripped me up for a hot second, but make sure this collection is available in at least the Store Sales Channel. I know, it sucks - this solution isn't perfect. If you don't do this the code we add in step 3 won't work since I guess collections have to be on a sales channel to appear in the collections liquid object.
Anyway, Go back to the Discount Code you were just creating in step 1 and select "Specific collections" in the "Applies To" section and select this collection you just created.
Step 3: Edit the code
This is something you only do once and it is well worth it.
Navigate to product-template.liquid by going to Online Store > Actions > Edit Code. On the left hand side search for "product-template".
Paste the below code where ever you'd like your discount code to appear on your product page and save:
{% for collection in product.collections %}
{% if collection.title contains "DISCOUNT" %}
{% assign parts = collection.title | split: "-" %}
{% capture discount_name %}{{ parts[1] }}{% endcapture %}
{% capture discount_amount %}{{ parts[2] }}{% endcapture %}
{% endif %}
{% endfor %}
{% if discount_name != blank and discount_amount != blank %}
<p>Use code {{ discount_name }} for an instant {{ discount_amount }} off!</p>
{% endif %}
For those interested, all this code does is loop over the product's associated collections, finds the collection where DISCOUNT is in the title and then stashes the name / amount in a variable, which you can do whatever you want with. And now you can tell why the naming is incredibly important.
Once this code is added, now your job is to just create Discount Codes and Collections as you normally would, with just a bit more attention to how things are named.
Here's a visual of the end result. I chose to place mine right under the price. The discount values you see here can all be changed by simply editing collection / discount titles.
Again, would way rather have a checkbox on the product page admin that toggled all this stuff - it'd be way cleaner, but this will do for me just fine. hit me up if you got questions.
I cant believe that there is no app for this simple yet very powerful feature. On Shopify app store , there are literally thousands of apps for similar kind of features, yet there is no app for this kind of function . Below is another non Shopify store with this feature , Its in another language but , you can understand the feature. It shows how much the final price will be at the checkout (green price) .It says %25 off for purchases over $300. and since the product qualify for the discount , it shows the price in green.
This feature make customer feel like they score a nice additional discount and encourage them to complete the purchase. Of course you can directly apply the discount but it wouldn't give the excitement of scoring a deal.
Hello -
It's been four years and we have yet to find a solution. Someone come up with this so its already made in Shopify or on an app. 😞 Something so simple yet so complicated to have.
Community Blog Articles
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025