Hey all,
I created two custom badges for “NEU” and “PRE Order” Products.
with adding this commands in the card-product.liquid
{%- elsif card_product.tags contains ‘NEU’ -%}
{{ ‘NEU’ }}
{%- elsif card_product.tags contains ‘PRE’ -%}
{{ ‘PRE Order’ }}
configured this badges in the base.css with:
.card__badge–NEU{
border: 1px solid transparent;
border-radius: var(–badge-corner-radius);
display: inline-block;
font-size: 1.2rem;
letter-spacing: 0.1rem;
line-height: 1;
padding: 0.5rem 1.3rem 0.6rem 1.3rem;
text-align: center;
background-color: #00ff00;
border-color: #00ff00;
color: #000000;
word-break: break-word;
}
.card__badge–PRE{
border: 1px solid transparent;
border-radius: var(–badge-corner-radius);
display: inline-block;
font-size: 1.2rem;
letter-spacing: 0.1rem;
line-height: 1;
padding: 0.5rem 1.3rem 0.6rem 1.3rem;
text-align: center;
background-color: rgb(var(–color-badge-background));
border-color: rgba(var(–color-badge-border), var(–alpha-badge-border));
color: rgb(var(–color-badge-foreground));
word-break: break-word;
}
Now I have two problems with that:
1st
The Badges are only visible in the “product grid” (see attachment Nr.1) and not in “product information” (see attachment Nr.2) if you open the product. The standard Sale/Sold Out badges are always visible after the price. Would like to have the same for my new custom badges.
2nd
The base.css is not working for mobile phones. There I have just a standard text based on my scheme. The “mobile view” shows correctly but when I use my mobile phone it’s not working. (see attachment Nr.3)
1
2
3
Hello @castego0302 ,
For the 1st issue, You need to add the badge code to the product information section in the file. If you are using the DAWN theme the file name will be “main-product.liquid”.
And for the 2nd issue please share the store URL so I can check the CSS issue.
Where to add the badge code? I would like to show the badge information after the Price like its done for Sale/Sold out.
URL: castego.de (its currently locked with password - can I sent it you directly ?)
Yes, you can send the password to me!
Okay so to add the badges after price you have to add the code in the "price.liquid" snippet. You will find the conditions for Sold Out and On Sale at the bottom of the file. You can add your code under that condition. This works for the “DAWN” theme. If you are using a different theme please let me know because the file name might be different in different themes.
Somehow it shows me now the badge for all Products I miss to add the condition for product/tag
Would it be also possible to show only the PRE Order Badge for PRE Order taged products here :
The PW for shop is cgo_1212 for the issue with mobile phone
Thanks for your tips 
1 Like
Found a solution for the 1st Problem with adjusting my code like this:
{% if product.tags contains ‘NEU’ %}
{{ ‘NEU’ }}
{%-endif%}
{% if product.tags contains ‘PRE’ %}
{{ ‘PRE Order’ }}
{%-endif%}
Only Problem what I still got is the Mobile View in Phones. That the base.css fonts/color/size etc. are not used there
Well I added my stlye in the base.css to the top of the file than it workey - I guess somehow it was in a MEDIA only code captured. But now It’s fine.
1 Like
Hello @castego0302 , Happy that works for you! Let me know if you need any help!
