A user seeks help with breadcrumb customization on their Shopify store, specifically wanting to:
Main Issues:
Solutions Provided:
Two community members offered CSS-based solutions:
Initial approach - Add CSS to theme.liquid before </body> tag to hide breadcrumbs in .product-details and adjust padding/display properties
Alternative method - Insert similar CSS code into base.css file
Problem encountered:
The original poster reported that using .product-details .breadcrumb { display: none !important; } removes both breadcrumbs instead of just one.
Revised solution:
A more targeted CSS selector was provided: nav.breadcrumb.breadcrumb-left { display: none !important; } to be added to theme.liquid, which should remove only the specific breadcrumb while preserving the other.
The discussion remains focused on finding the correct CSS selector to target only one breadcrumb element.
Hello @hamzaabbas
.product-details .breadcrumb {
display: none !important;
}
.breadcrumb {
padding: 35px 7px 7px !important;
display: flex;
gap: 4px;
}
