Shopify themes, liquid, logos, and UX
Good day everyone,
I have been trying to add links to this theme for a week to no avale, and i can't seem to find the option in the theme costumizer to display them. Can someone help with this ?
Store url: https://donutsole-hu.myshopify.com/
Password: twilye
Thank you very much in advance!
Solved! Go to the solution
This is an accepted solution.
I was looking to add them only to product pages, This is the code i used:
Top of the product.template.liquid file (Above everything)
<nav aria-label="Home" class="breadcrumb">
<a class="Breadcrumbs" href="{{ routes.root_url }}">Home </a> >
<a class="Breadcrumbs" href="/collections/{{ product.type | handleize}}"> {{ product.type }} </a> >
<span class="breadcrumb__link" aria-current="page" style="font-weight:bold; color: #FF87B0;"> {{ product.title}}</span>
</nav>
To style this you need to past this on the bottom of Theme.css or scss file
For Desktop:
@media screen and (min-width: 789px) {
#shopify-section-product-template .breadcrumb {
padding: 15px;
background: #ffff;
font-size: 10px;
margin-top: 20px;
margin-left: 20px;
}
}
@media screen and (min-width: 789px) {
nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
}
For Mobile:
@media screen and (min-width: 789px) {
#shopify-section-product-template .breadcrumb {
padding: 15px;
background: #ffff;
font-size: 10px;
margin-top: 20px;
margin-left: 20px;
}
}
Hope this help someone!
Hi @NZA
I'm sincerely sorry for your inconvenience.
Are you talking about breadcrumb navigation?
I can help you more efficiently if you can share with me the code of the snippets/breadcrumb.liquid file by following the steps below:
This is an accepted solution.
I was looking to add them only to product pages, This is the code i used:
Top of the product.template.liquid file (Above everything)
<nav aria-label="Home" class="breadcrumb">
<a class="Breadcrumbs" href="{{ routes.root_url }}">Home </a> >
<a class="Breadcrumbs" href="/collections/{{ product.type | handleize}}"> {{ product.type }} </a> >
<span class="breadcrumb__link" aria-current="page" style="font-weight:bold; color: #FF87B0;"> {{ product.title}}</span>
</nav>
To style this you need to past this on the bottom of Theme.css or scss file
For Desktop:
@media screen and (min-width: 789px) {
#shopify-section-product-template .breadcrumb {
padding: 15px;
background: #ffff;
font-size: 10px;
margin-top: 20px;
margin-left: 20px;
}
}
@media screen and (min-width: 789px) {
nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
}
For Mobile:
@media screen and (min-width: 789px) {
#shopify-section-product-template .breadcrumb {
padding: 15px;
background: #ffff;
font-size: 10px;
margin-top: 20px;
margin-left: 20px;
}
}
Hope this help someone!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024