Compatibility: Shopify 2.0 FREE themes

Are you tired of the default badges provided by your Shopify 2.0 FREE theme? The following will help you customize the boring design of your badge. You can choose from seven (7) badge design, and also use your personalized image (PNG only) or svg as your badge. 

Product badges or labels help customers find what they are looking for with the eye catchy labels. Create custom badges using your own image or SVG or use our 7 designs.

Check DEMO store here💻. Password: made4uo

 What you are buying:

• Assign any of the 7 Badge designs or image or SVG for each product
• Code able to use personalized image (support PNG file only)
• Code able to use the SVG file
• Change the position of the badges
• Change the badge color and the text color
• Use metafield to customized the badges with your own text, design, and position
• Make sure not to use longer texts for code to function well
• Labels will show in featured collection section and collection page
• Customize the label or badge per product

What makes our code better:

• We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
• Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

Setting up the metafield:

1. On your Admin Page, click the Settings on your left hand bottom corner

2. Click Metafields, then Products, then "Add defination"

3. Follow the metafield settings below. Words are case-senstive. Follow the green highlighted settings. Red is your own text or file name that you want to use. 

4. Make sure to add the following in your preset choices.

5. You can add the text you want to appear in the badge as preset choice.

NOTE: Some of the badges will not be able to accommodate long texts. 

6. If you are using image (PNG only) or SVG, make sure to add the file first. Then add the name of the file in your metafield presets.

Adding the metafield in the product:

1. From your Admin Page, click Products, then choose the product you want to assign a metafield.
2. Scroll all the way down, until you see the metafield.

3. Click "Add item", to create three (3) tier metafield.

First tier, should be the text you want in a badge or if you are using PNG image or SVG, use the first tier to provide the file name. 

Second tier, the badge design. If you want to use image or SVG, make sure to click the image or SVG as your second tier.

Third tier, the badge position. Some of the badge design does not go with other position. 

Badge Designs with the corresponding available position:

Adding the files (PNG image or SVG):

1. From your Admin Page, click Online Store > Themes >Actions > Edit code.

2. In the Assets folder, click "Add a new asset". Upload a file, then "Add file." 

3. Find the file you want to add, then Open, click Done.

4. The file name must match to the text you provide in your first tier metafield. You can edit the name of the file by clicking the pencil. See image below

 See the metafield assigned that matches to the file name

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippet folder, click "Add a new snippet", name it "product-badge" then place the code below. Make sure to click SAVE.

3. Next, we need to replace the default badge code under the Snippet folder.

For Dawn theme with version below 2.5, open the product-card.liquid. Find the code below.

For Dawn theme version 2.5 and above, or other Shopify 2.0 FREE themes , open the card-product.liquid. Find the code below. NOTE: There are two identical codes. First one is in the line 118, and the second one is in line 314. Make sure to replace both block of code

4. Replace the code with the code below.

5. Next, open the Config folder, then settings_schema.json. Scroll all the way down, find the last "]" (closing square backet), then place the code below before it. 

This will provide options when you open the Theme editor. 

Make sure to click the checkbox if you have Dawn theme version below 2.5.

 That is it (",)