Shopify themes, liquid, logos, and UX
I set up breadcrumbs using this shopify tutorial https://community.shopify.com/c/shopify-design/how-to-add-breadcrumb-navigation-to-your-shopify-stor...
I have breadcrumbs but they appear as a numbered list rather than home > bee sippers > opaque glass bee sipper decoration
The shop is joymcmillanglass.co.uk and I'm using the taste theme
Could anyone tell me how to fix this?
Many thanks
Solved! Go to the solution
This is an accepted solution.
Replace the code with below code:
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>
nav.breadcrumbs ol {
list-style-type: none !important;
display: flex !important;
justify-content: start !important;
align-items: center !important;
column-gap:15px; /*adjust according to you*/
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @JMGlass , I can see the breadcrumbs in my browser. Have you fixed it yourself?
Thank you - that isn't what I'm seeing. I'm getting the drop down list in the photo. I'm also getting the same numbered list when I use incognito mode to view the website and when I look at it on iphone.
Hello @JMGlass
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>
nav.breadcrumbs ol {
list-style-type: none !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thank you - that got rid of the numbers but I still have a list.
Replace the code with below code:
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>
nav.breadcrumbs ol {
list-style-type: none !important;
display: flex !important;
justify-content: start !important;
align-items: center !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thank you - I've now got all the categories in a line but the words run into each other so I need to add a space between each section of text.
This is an accepted solution.
Replace the code with below code:
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>
nav.breadcrumbs ol {
list-style-type: none !important;
display: flex !important;
justify-content: start !important;
align-items: center !important;
column-gap:15px; /*adjust according to you*/
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thank you so much - that's perfect.
Hey @JMGlass,
This should do the trick.
Paste this code at the end of your base.css file:
/*breadcrumb*/
.breadcrumb {
font-size: 14px;
margin-bottom: 20px;
}
.breadcrumb ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap; /* Ensure it wraps on small screens */
}
.breadcrumb li {
display: flex;
align-items: center;
}
.breadcrumb li + li::before {
content: ">";
margin: 0 8px;
}
.breadcrumb a {
text-decoration: none;
color: #007bff; /* Adjust color as needed */
}
.breadcrumb span {
color: #333; /* Adjust color as needed */
}
.breadcrumb {
width: 100%; /* Make the breadcrumb container take up the full width of the page */
margin: 20px 0; /* Adjust top and bottom margins as needed */
padding: 10px 0; /* Optional: Add padding for better spacing */
box-sizing: border-box; /* Ensure padding doesn't affect the width */
}
.breadcrumb ol {
max-width: 1600px; /* Set a max-width to match your site's content width */
margin: 0 auto; /* Center the breadcrumb content within the full-width container */
padding: 0 20px; /* Optional: Add padding for content spacing */
display: flex;
list-style: none;
}
We 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, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024