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.
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.