Reposition breadcrumbs Dawn theme

[INFRA]

Hi!

On dawn theme, I would like to have the breadcrumbs sitting right above the product image. And also not showing any white on either sides (see image below). How do I best achieve this?

Website

password: waiheke

Thanks so much!

 

[Superscapesjr]

Do you want a quick fix?

[MR115_ShopiDevs]

To set, Breadcrumbs are right above the product image in the shopify product page Please follow the steps
1. Go to your Shopify admin > Online Store > Themes > Edit code.
2. Open the file: sections > main-product.liquid
3. Paste the following code above the image gallery .

{%- render 'top-breadcrumbs' -%}

4. In the left sidebar, click Snippets > Add a new snippet .Then name it: top-breadcrumbs.liquid
5. Paste the following code inside top-breadcrumbs.liquid file

<nav class="breadcrumbs">
  <a href="{{ routes.root_url }}" title="Home">Home</a>
  {% if collection %}
    <a href="{{ collection.url }}" title="{{ collection.title }}">{{ collection.title }}</a>
  {% endif %}
  <span>{{ product.title }}</span>
</nav>

<style>
  .breadcrumbs {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .breadcrumbs a {
    color: #000000;
    text-decoration: none;
  }

  .breadcrumbs a:hover {
    text-decoration: underline;
  }
</style>

[INFRA]

Hey, thanks for your reply! This code does not change the vertical position, it actually pushes it all the way to the left. Is there anything else I can try?

I'm using this code:

{% if template == 'product' %}
  {% assign current_collection = product.collections.first %}
  {% if current_collection %}
    <div class="page-width">
    <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
      <a href="/" title="Home">Home</a>
      <span aria-hidden="true">›</span>
      <a href="{{ current_collection.url }}" title="{{ current_collection.title }}">{{ current_collection.title }}</a>
      <span aria-hidden="true">›</span>
      <span>{{ product.title }}</span>
    </nav>
    </div>
  {% endif %}
{% endif %}

.breadcrumb {
  font-size: 14px;

  background-color: #F7F7F7;
   
}
.breadcrumb a {
  color: #000;
  text-decoration: none;
}
.breadcrumb span {
  margin: 0 5px;
}

[MR115_ShopiDevs · Accepted solution]

You can keep your code, but you need change the code position.
You can set the code above the image gallery.
Please follow the screenshot

[INFRA]

amazing, thank you so much!

[INFRA]

@MR115_ShopiDevs 

On my collection page I still have a white bar on either side, how can I edit my code to change this? 

 

<div class="page-width">
  <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
    <a href="/" title="Home">Home</a>
    {% if template contains 'collection' %}
      <span aria-hidden="true">›</span>
      <span>{{ collection.title }}</span>
    {% endif %}
  </nav>
</div>

[mageplaza-cs]

Hi @INFRA 

I am from Mageplaza - Shopify solution expert.

It seems that this issue has been resolved. However, the breadcrumbs appear too close to the left margin. You can add the following CSS code to your base.css file to improve its appearance.

.breadcrumb {
    padding: 0 16px;
}

Please let me know if it works as expected!

Best regards!

[INFRA]

Hey there, it has not been resolved yet, I want the breadcrumbs about 20px above the product image. It is too far up at the moment. Can you recommend a code for this?

[mageplaza-cs]

@INFRA 

It's simple, just add the following code to solve this issue (file base.css )

.breadcrumb {
    position: absolute;
}
product-info {
    padding-top: 40px !important;
}

*Result:

[Moeed]

Hey @INFRA 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
nav.breadcrumb {
    position: absolute !important;
    left: 24% !important;
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed