Shopify themes, liquid, logos, and UX
I want to add more pages to my products like Best Seller, New Added, 50%OFF, and more how Can I add this anyone helping me, please
Thank You
Solved! Go to the solution
This is an accepted solution.
Hey @jafakav Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.
This is an accepted solution.
No Problem @jafakav allowed me some time to provide you with the code
This is an accepted solution.
<div class="product-card">
{% assign badge_tags = 'Badge-BestSeller,Badge-NewAdded,Badge-50Off,Badge-Clearance' | split: ',' %}
{% for tag in product.tags %}
{% if badge_tags contains tag %}
<div class="badge badge-{{ tag | downcase }}">
{% case tag %}
{% when 'Badge-BestSeller' %}
Best Seller
{% when 'Badge-NewAdded' %}
New Added
{% when 'Badge-50Off' %}
50% OFF
{% when 'Badge-Clearance' %}
Clearance
{% endcase %}
</div>
{% endif %}
{% endfor %}
</div>
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 12px;
color: #000;
font-size: 12px;
font-weight: 700;
border-radius: 3px;
z-index: 10;
}
.badge-bestseller {
background-color: #ff9800;
}
.badge-newadded {
background-color: #4caf50;
}
.badge-50off {
background-color: #f44336;
}
.badge-clearance {
background-color: #9c27b0;
}
.badge-bestseller::before {
content: '\2605'; /* Star icon */
margin-right: 5px;
}
.badge-50off::before {
content: '\0025'; /* Percentage symbol */
margin-right: 3px;
}
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
Kaushik
This is an accepted solution.
Working Kaushik, thank you. I need to add white text color. How can I do that? Can you help me?
This is an accepted solution.
replace this CSS @jafakav
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 12px;
color: #fff; /* change this */
font-size: 12px;
font-weight: 700;
border-radius: 3px;
z-index: 10;
}
This is an accepted solution.
Welcome, @jafakav If you found my help useful, consider liking this message and marking it as the solution.
This is an accepted solution.
Hey @jafakav Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.
Sorry, Kaushik, could you please provide the code and I'll add it. Thank you!
This is an accepted solution.
No Problem @jafakav allowed me some time to provide you with the code
This is an accepted solution.
<div class="product-card">
{% assign badge_tags = 'Badge-BestSeller,Badge-NewAdded,Badge-50Off,Badge-Clearance' | split: ',' %}
{% for tag in product.tags %}
{% if badge_tags contains tag %}
<div class="badge badge-{{ tag | downcase }}">
{% case tag %}
{% when 'Badge-BestSeller' %}
Best Seller
{% when 'Badge-NewAdded' %}
New Added
{% when 'Badge-50Off' %}
50% OFF
{% when 'Badge-Clearance' %}
Clearance
{% endcase %}
</div>
{% endif %}
{% endfor %}
</div>
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 12px;
color: #000;
font-size: 12px;
font-weight: 700;
border-radius: 3px;
z-index: 10;
}
.badge-bestseller {
background-color: #ff9800;
}
.badge-newadded {
background-color: #4caf50;
}
.badge-50off {
background-color: #f44336;
}
.badge-clearance {
background-color: #9c27b0;
}
.badge-bestseller::before {
content: '\2605'; /* Star icon */
margin-right: 5px;
}
.badge-50off::before {
content: '\0025'; /* Percentage symbol */
margin-right: 3px;
}
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
Kaushik
This is an accepted solution.
Working Kaushik, thank you. I need to add white text color. How can I do that? Can you help me?
This is an accepted solution.
replace this CSS @jafakav
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 12px;
color: #fff; /* change this */
font-size: 12px;
font-weight: 700;
border-radius: 3px;
z-index: 10;
}
Working Thank you for your assistance. I greatly appreciate your help.
Thank you
This is an accepted solution.
Welcome, @jafakav If you found my help useful, consider liking this message and marking it as the solution.
Hello @Kaushik_7
I would like to know if you can also help me put some on mine too?
website: www.diversusoficial.com
password: diversusoficial
I want to add 2 badges:
- "EXCLUSIVE LOOKAL BEACH CLUB" for when i drop a specific collection exclusive for one place
- "NEW IN" for when i drop new products
I want it to look like this example:
Thanks in advance.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024