There are many ways for grabbing the customer’s attention. One of the most popular ways is adding the small badges, usually to the top left or right corner of the product image. And what’s good is that it’s easy as pie to create your own product badges!
What is the process of adding badges in Shopify store?
Basically, there are two main steps:
- Â Â Creating a code for the desired badge.
- Â Â Adding text variables in translation files.
- Â Â Formalizing the badge style.
Step 1. How does the code look like?
At first, navigate to Online store> Actions: Edit code> Snippets> product-listing-item.liquid file and add the following code to the very top of the file:
Secondly, in the block with the image of the product (product_image) you need to add the following:
Lastly, add one more code to Config> settings_schema.json  file:
Step 2. Where to insert text variables for translations?
It really depends on languages you are using in your store. To find language files go to Online store> Actions: Edit code> Locales and select the language file (it contains 2-letter abbreviations of language). Here you need to add text variables:
for NEW – Â layout.product.new_products
for SALE – layout.product.sale
How to get my badge visible and stylized?
In order to see the badge on a frontend, it is required to stylize the badge using the additional CSS codes. So you supposed to add such code to style.scss.liquid file:
Feel free to edit this code according to your willings. No restrictions, be creative! From now and till forever you can manage the settings for badges in the admin panel.
Now you’ve got the hang of how to add a badge to your store! Happy coding!
