Solved

How to move badge at corner and change size

Avalonz
Excursionist
14 0 3

I want to move the badge at the corner like a shown in the image through red box. 

But i can still move through theme settings  because in future i may change position from top right to somewhere else.

And also i want to change size.

Store: theavalonz.in

1000039627.jpg

Accepted Solution (1)
GTLOfficial
Shopify Expert
146 29 48

This is an accepted solution.

Hello @Avalonz 
use this CSS in your  "component-card.css" file and save it

.card__badge.top.right {
    position: relative;
    right: -10px;
    top: -12px;
}


Please let me know
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 12 (12)

techlyser_web
Shopify Partner
1683 307 324

Hello @Avalonz 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Avalonz
Excursionist
14 0 3

theavalonz.in

GTLOfficial
Shopify Expert
146 29 48

Hello @Avalonz 
please kindly share your website link so I can check and give you a solution.

Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
Avalonz
Excursionist
14 0 3

theavalonz.in

GTLOfficial
Shopify Expert
146 29 48

This is an accepted solution.

Hello @Avalonz 
use this CSS in your  "component-card.css" file and save it

.card__badge.top.right {
    position: relative;
    right: -10px;
    top: -12px;
}


Please let me know
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
Avalonz
Excursionist
14 0 3

It worked thanks 😍

But when i want to do like this for top left i should change the word right and write their left?

GTLOfficial
Shopify Expert
146 29 48

for the left side use this css

.card__badge.top.left {
    position: relative;
    top: -13px;
    left: -10px;
}


Please let me know
Thanks 

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
Avalonz
Excursionist
14 0 3

Ok thank you so much 😊 

And how can i change font size?

GTLOfficial
Shopify Expert
146 29 48

For that go to the "base.css" file and find this CSS in line number "2883"

 

.badge {
    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;
}

 

 and replace the " font size 1.2rem" to 1.3rem or 1.4rem according to your requirement.
you can also give it in pixel e.g- 15px

Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
Avalonz
Excursionist
14 0 3

Thank you so much 😊

Rahul_dhiman
Shopify Expert
129 22 38

Hello @Avalonz  Please share the link of your website.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

GTLOfficial
Shopify Expert
146 29 48

Hello @Avalonz 
use this CSS in your  "component-card.css" file

.card__badge.top.right {
    position: relative;
    right: -10px;
    top: -12px;
}

  
Please let me know
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh