Change Breadcrumb Location on Impulse

Topic summary

A store owner wanted to relocate breadcrumbs on their product pages from below the product image to above it.

Solution provided:

  • Navigate to Online Store → Themes → Edit code
  • Open the product template file (main-product.liquid or product.liquid)
  • Locate the breadcrumb render code: {% render 'breadcrumbs' %} or {% render 'breadcrumb' %}
  • Cut this line and paste it above the product image section
  • Save the changes

Alternative approach:
If breadcrumbs exist as a theme block, they can be repositioned through the theme customizer by dragging the breadcrumb element to the desired location.

Resolution:
The issue was successfully resolved. The original poster confirmed the solution worked and shared a screenshot showing the code placement for future reference.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.

Hi there,

I would like to change the location of the breadcrumbs on my website https://vaultfurniture.com

Right now, breadcrumbs are shown under the product image / above the product title. (See Below)

I would like to move the breadcrumbs so they are above the product image.

Go to Online Store → Themes → Actions → Edit code

Open Sections → main-product. liquid (or product-template.liquid)

Find the breadcrumbs line, it’ll look like:

{% render 'breadcrumbs' %}

Cut that line from where it is now

Paste it near the very top of the file, just above the product image section

Click Save

That’s it, the breadcrumbs will now appear above your product images.

Hi

Yes, you can definitely move the breadcrumbs above the product image. This usually involves adjusting the product.liquid (or main-product.liquid) template in your theme.

In most themes, the breadcrumb code block looks something like this:

{% render ‘breadcrumb’ %}

Right now, it’s probably located below the product image section. To move it:

Go to Online Store → Themes → Edit code.

Open the product template file (main-product.liquid or product.liquid, depending on your theme).

Locate the breadcrumb snippet ({% render ‘breadcrumb’ %}).

Cut it and paste it above the product image container.

Save and refresh to check the new position.

If you’re not seeing it in the product template, it might be inside a section or snippet file (like breadcrumb.liquid). In that case, just move the render call higher in the structure.

That should place your breadcrumbs exactly where you want them. :white_check_mark:

Best,
Sulyman

1 Like

If you have the breadcrumb as a block within the theme:

Go to Online Store-Theme-Customize and go to the left hand side and drag the breadcrumb to the top, just below the horizontal line.

It worked! Thank you so much! Here is a screen shot for where I placed the code (As a future reference for others. :slight_smile:

That looks great, Jim! Thanks for sharing the screenshot too t’ll definitely help others who run into the same question. Glad it worked out!

Best,
Sulyman