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

[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, 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 %}
    
    
    

  {% endif %}
{% endif %}

.breadcrumb {
  font-size: 14px;

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

[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?

[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 tag

RESULT:

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

Best Regards,
Moeed

[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:

[MR115_ShopiDevs]

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?