All things Shopify and commerce
Hi, I would like to make the gray line thicker in the header like here:
like this:
https://web.archive.org/web/20240331230929/https://www.etsy.com/
my url: https://cb180d-31.myshopify.com/
Thank you.
Solved! Go to the solution
This is an accepted solution.
Hi @Anonymous,
To add the underline please do the following:
1. Go to Online Store > Themes.
Click on Actions next to your theme and select Edit code.
2. Search file base.css and add this below code at the bottom:
.header-wrapper--border-bottom {
border-bottom: 2px solid #d4d4d4 !important;
}
Here you can adjust the value of "2px" to make the thickness apt for you and the color code "#d4d4d4" can be adjusted to change the color to any other one.
3. Save the changes and check the button.
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
Regards,
Sweans
This is an accepted solution.
@Anonymous. Pls replace my old code to new code:
<style>
.header-wrapper--border-bottom {
border-bottom: 0.2rem solid #0e0e0e29 !important;
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @Anonymous,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.header-wrapper--border-bottom {
border-bottom: 0.3rem solid rgba(var(--color-foreground), 0.08) !important;
}
</style>
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Thank you it's working.
Is it possible to make the line a little thinner and in dark grey like i describe here:
This is an accepted solution.
@Anonymous. Pls replace my old code to new code:
<style>
.header-wrapper--border-bottom {
border-bottom: 0.2rem solid #0e0e0e29 !important;
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Its working.
Thank you! 🙂
@Anonymous, No problem. Glad to help you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hey, is it possible to make it only for the desktop version? I want the mobile version as i had it before.
Best regards
Hi @Anonymous, Pls replace my old code to new code:
<style>
@media only screen and (min-width: 750px) {
.header-wrapper--border-bottom {
border-bottom: 0.2rem solid #0e0e0e29 !important;
}
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
This is an accepted solution.
Hi @Anonymous,
To add the underline please do the following:
1. Go to Online Store > Themes.
Click on Actions next to your theme and select Edit code.
2. Search file base.css and add this below code at the bottom:
.header-wrapper--border-bottom {
border-bottom: 2px solid #d4d4d4 !important;
}
Here you can adjust the value of "2px" to make the thickness apt for you and the color code "#d4d4d4" can be adjusted to change the color to any other one.
3. Save the changes and check the button.
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
Regards,
Sweans
Thank you!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024