Centre and enlarge product badges

[massmonster]

Hello wizards

Im trying to change the position of my product badges to be centred instead of left.

I also want to increase the size of the badge to reflect the example
Adding a shadow would be a bonus

I'm on DAWN 15.2 - www.sundaymass.store

the code I have currently for the custom badge text is:

{% if card_product.tags contains 'new' %}
<span class="badge">NEW 🔥</span>
{% endif %}

Cheers

[steve_michael2]

Hi @massmonster ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.card__badge {
    
    justify-self: center !important;
}
.card__badge.bottom.left span {
   
    width: 100px;
    height: 44px !important;
    font-size: 16px;
    padding: 13px 14px;
     box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.2);
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Made4uo-Ribe]

Hi @massmonster 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection .card__badge {
    justify-self: center !important;
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.2);
    height: 25px;
}

.collection span.badge {
    padding: .4rem .8rem;
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[massmonster]

Thats solved the 1st and 3rd issue, how do we make the badge bigger?

[steve_michael2]

Hi @massmonster ,

.card__badge {
    
    justify-self: center !important;
}
.card__badge.bottom.left span {
   
    width: 150px;
    height: 44px !important;
    font-size: 16px;
    padding: 13px 14px;
     box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.2);
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Smith_mike001]

Hello

[Made4uo-Ribe]

Oh, sorry I thought you like to decrease. 

Please, replace this code. 

.collection .card__badge {
    justify-self: center !important;
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.2);
}

.collection span.badge {
    padding: 1rem;
    font-size: 1.5rem
}

And Save. 

Result:

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[massmonster]

Getting there... how do we make it wider? i pretty much want exactly what the example has

[steve_michael2]

@massmonster 

.collection .card__badge {
    
    height: 0 !important;
    margin-bottom: 0 !important;
}
.card__badge.bottom.left span {
    width: 195px !important;
    font-size: 16px !important;
    padding: 15px 14px !important;
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.2) !important;
    
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Made4uo-Ribe]

Do you mean like this?

If it is, replace the code again. 

To this;

.collection .card__badge {
    justify-self: center !important;
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 80%; 
    position: relative; 
}

.collection .card__badge:after {
    content: '';
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
}

.collection span.badge {
    padding: 1rem; 
    font-size: 1.5rem; 
    width: 100%;
    text-align: center; 
}

And Save. 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Amanda_Fordeer]

Hi @massmonster,

I wonder if you're able to complete it. If not, you might consider utilizing an app like Product Labels & Badges. This app enables you to customize your label's text, position, border (stroke), shadow, and more.

Additionally, you can navigate to the product settings and enable the Date feature (optional). This functionality will help you automatically display labels on new products.