Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
Hello @Avalonz
Can you share store URL?
theavalonz.in
Hello @Avalonz
please kindly share your website link so I can check and give you a solution.
Thanks
theavalonz.in
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
It worked thanks 😍
But when i want to do like this for top left i should change the word right and write their left?
for the left side use this css
.card__badge.top.left {
position: relative;
top: -13px;
left: -10px;
}
Please let me know
Thanks
Ok thank you so much 😊
And how can i change font size?
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
Thank you so much 😊
always there to help you.
Thanks
Hello @Avalonz Please share the link of your website.
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025