Shopify themes, liquid, logos, and UX
Hi,
does anyone know how I can change the bacgkround of the breadcrumbs on my product page. I would like it to be beige like the rest of the page. The section only allows me to use custom CSS. Thank you for your help.
Best regards,
Store URL: https://servicedetable.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=165496979784
Solved! Go to the solution
This is an accepted solution.
Hey @INKLY
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
nav.breadcrumb.breadcrumbs--default.inherit {
background: #FCFAF6 !important;
max-width: 100% !important;
padding-left: 22% !important;
}
}
nav.breadcrumb.breadcrumbs--default.inherit {
background: #FCFAF6 !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @INKLY
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
nav.breadcrumb.breadcrumbs--default.inherit {
background: #FCFAF6 !important;
max-width: 100% !important;
padding-left: 22% !important;
}
}
nav.breadcrumb.breadcrumbs--default.inherit {
background: #FCFAF6 !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Works great thank you !
Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Hello @INKLY
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.breadcrumbs__wrapper .breadcrumb{
max-width: 100% !important;
background: #fcfaf6 !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @INKLY
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.breadcrumbs__wrapper .breadcrumb {
background: #fdfaf6;
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024