Addding page links to Product pages, Prestige

Solved
NZA
Pathfinder
105 12 32

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 ?

I am using Prestige theme, it doesnt have to be on the product pages only, if the solution for the whole thing would be easier i am good with that.

NZA_0-1626561547213.png

Store url: https://donutsole-hu.myshopify.com/

Password: twilye

Thank you very much in advance!

0 Likes

I don't think the Prestige theme supports breadcrumb links.

You would need a developer to build this functionality for you.

Hope that helps!

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.

0 Likes
NZA
Pathfinder
105 12 32

@laurafizzypixel I added the feature myself 

I added this code to top of my Product-template.liquid

 

<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;"> {{ product.title}}</span>
</nav>

 

For now it looks like this:

Nike Air Jordan .png

I just need help styling the thing like in the picture above.

Store url: https://donutsole-hu.myshopify.com/

Password: twilye

Thank you for you time and attention!

 

0 Likes
NZA
Pathfinder
105 12 32

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!

0 Likes