For anyone looking for the code used in this video, you can find it here: theprompted.co/blogs/tutorials/customizing-product-sale-badges-free-tutorial. Happy customizing!
If you're installing a fresh theme (whether a different theme or a new version of your existing one), then unfortunately you'll have to make the code changes to the new theme all over again. Your non-code theme settings and customizations would need to be re-implemented, and it's the same with any code customization.
thank you brother for these videos. Very very informative. Kindly make one where the product price can be a bit BOLD from the compare price so that its easily visible to potential customers.
Glad you like them! To make the price bold, try adding the following css code into the "Custom CSS" box for your Product Information Section in the theme editor: .price .price-item--sale { font-weight: bold; }
Just getting my shop set up and wondering if you can upload an image to your 'sale' items? So instead of the red 38% Off bar, some of my varieties would have a custom image that says Buy One Give One.
there is a problem: I have this codes live on my website from your video title: Add These Badges To Scale Your Shopify Store and this are working fine but I want to replace Sale with % OFF as discuss in this video but it's not working, Can you provide customized Code that can work with your previous video codes??
Great tutorial! How can I add so the "off" show up in the language files for translations?? I have edited it so it says "Save x% now". How do I make "Save" and "Now" to show up in the transitions?? And so the Translate and Adapt app can translate it? Also, do you have a video showing how to display inventory qty for the selected variant? And to maybe add a green checkmark if it's in stock, and a red x if the inventory for the variant (or product) is 0 or less.
Great questions! For translations, I will have to look into it since the audience we build for is typically in English. I've added it to my list of future video topics. I don't currently have a video for displaying the inventory amount, but I'll also add that to the list of ideas :)
I know you figured out the inventory question that you had, but just wanted to let you know that you inspired a video on this topic, and I've also added a few extra customizations that you might like! You can see it here: ruclips.net/video/-CJwU-ktAFY/видео.html
Great question! There is a way. You can go to card-product.liquid and search for the line: {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}. Add the parameter show_badges: true, so that it becomes: {% render 'price', product: card_product, price_class: '', show_compare_at_price: true, show_badges: true %}
Do you mean connecting a different image per variant so that when the customer selects the variant with the variant picker they see the corresponding image? If so, Shopify has some documentation on that: help.shopify.com/en/manual/products/product-media/add-images-variants Is this what you're looking for?
Hey men! For me, it's not working. When I write the {%- assign float_difference = difference | times: 1.0 -%} it says that float_difference is assigned but not used. I'm using the Dawn 12.0 Do you know how I can solve this? Thanks!
It sounds like you've created the variable, but aren't using it later in your code. Try following the instructions here: wescalebrands.notion.site/The-Prompted-Customizing-Product-Sale-Badges-6141470a9a1844649b30169086398b5d?pvs=4 to see if it helps.
This should still work on the latest free Shopify themes. Here are some things to check for troubleshooting: 1. Was the code added properly? You may want to install a fresh new version of your theme and try again from the beginning to see if you get a different result. 2. Are you using a compatible theme? This code is for the free Shopify themes like Dawn, Sense, Refresh, etc. But if you're still not able to get this working, then we offer more in depth technical support in our community (along with many other perks). Check it out if you're interested: www.skool.com/the-prompted/about
This was quite helpful. I have one query though. For the first (collections) part, can the code be put continuously like below? Will this lead to any issue? {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {%- assign difference = card_product.compare_at_price | minus: card_product.price -%} {%- assign float_difference = difference | times: 1.0 -%} {%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%} {%- assign discount_percentage = discount_fraction | times: 100 | round -%} {{ discount_percentage }}% OFF
![[Shopify - Dawn Theme 15.2.0 ] How To Show Selected Variant Images](/img/1.gif)
For anyone looking for the code used in this video, you can find it here: theprompted.co/blogs/tutorials/customizing-product-sale-badges-free-tutorial. Happy customizing!
How to keep code changes after an update of the theme?
If you're installing a fresh theme (whether a different theme or a new version of your existing one), then unfortunately you'll have to make the code changes to the new theme all over again. Your non-code theme settings and customizations would need to be re-implemented, and it's the same with any code customization.
Thank you so much :D
Man you became my go-to for Shopify customization, I watched many tutorials and you and Bitbranding are the only 2 that never fail, thanks
Thank you for sharing that! Really appreciate your support, and I'm happy that it's been helpful :)
Thanks a lot! I have been searching for that for so long.
thank you brother for these videos. Very very informative. Kindly make one where the product price can be a bit BOLD from the compare price so that its easily visible to potential customers.
Glad you like them!
To make the price bold, try adding the following css code into the "Custom CSS" box for your Product Information Section in the theme editor:
.price .price-item--sale {
font-weight: bold;
}
how can i change the badge for the products in one specific collection? i placed the product in a different template already
Just getting my shop set up and wondering if you can upload an image to your 'sale' items? So instead of the red 38% Off bar, some of my varieties would have a custom image that says Buy One Give One.
Great information
there is a problem:
I have this codes live on my website from your video title: Add These Badges To Scale Your Shopify Store
and this are working fine but I want to replace Sale with % OFF as discuss in this video but it's not working, Can you provide customized Code that can work with your previous video codes??
Do you know how to move the sale badge to be on top of the product image on product pages? It’s really useless to have it next to the price…
Great tutorial!
How can I add so the "off" show up in the language files for translations?? I have edited it so it says "Save x% now". How do I make "Save" and "Now" to show up in the transitions?? And so the Translate and Adapt app can translate it?
Also, do you have a video showing how to display inventory qty for the selected variant? And to maybe add a green checkmark if it's in stock, and a red x if the inventory for the variant (or product) is 0 or less.
Great questions!
For translations, I will have to look into it since the audience we build for is typically in English. I've added it to my list of future video topics.
I don't currently have a video for displaying the inventory amount, but I'll also add that to the list of ideas :)
@@theprompted Thanks. I managed for figure it out :) Both the translation and the inventory.
That's great! Do you mind sharing what you found with everyone else in case they ran into the same problem?
I know you figured out the inventory question that you had, but just wanted to let you know that you inspired a video on this topic, and I've also added a few extra customizations that you might like! You can see it here: ruclips.net/video/-CJwU-ktAFY/видео.html
@@theprompted I watched it! And I love it. I will consider to replace my current solution with yours 🥳👍
Is there a way for the badge to show up next to the price on the collections page instead of it showing over the images?
Great question! There is a way. You can go to card-product.liquid and search for the line: {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}. Add the parameter show_badges: true, so that it becomes: {% render 'price', product: card_product, price_class: '', show_compare_at_price: true, show_badges: true %}
Hi! Can you make a tutorial on how to display different images per variant?
Do you mean connecting a different image per variant so that when the customer selects the variant with the variant picker they see the corresponding image? If so, Shopify has some documentation on that: help.shopify.com/en/manual/products/product-media/add-images-variants
Is this what you're looking for?
Hey men! For me, it's not working. When I write the {%- assign float_difference = difference | times: 1.0 -%} it says that float_difference is assigned but not used.
I'm using the Dawn 12.0
Do you know how I can solve this?
Thanks!
It sounds like you've created the variable, but aren't using it later in your code. Try following the instructions here: wescalebrands.notion.site/The-Prompted-Customizing-Product-Sale-Badges-6141470a9a1844649b30169086398b5d?pvs=4 to see if it helps.
It doesnt work. What can be the problem?
This should still work on the latest free Shopify themes. Here are some things to check for troubleshooting:
1. Was the code added properly? You may want to install a fresh new version of your theme and try again from the beginning to see if you get a different result.
2. Are you using a compatible theme? This code is for the free Shopify themes like Dawn, Sense, Refresh, etc.
But if you're still not able to get this working, then we offer more in depth technical support in our community (along with many other perks). Check it out if you're interested: www.skool.com/the-prompted/about
This was quite helpful. I have one query though. For the first (collections) part, can the code be put continuously like below? Will this lead to any issue?
{% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %}
{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{ discount_percentage }}% OFF
Yes, you can do that! Just double check that it shows up properly on your site.