Addding links to Prestige theme

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 ?

Linhks.png 

 

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

Password: twilye

Thank you very much in advance!

 

 

0 Likes
Michal_Morek
Shopify Partner
820 73 140

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:

scrnli_22_05_2021_15-34-42.png

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
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