Customize Product Details page

Hello!

This is Karina from Ecwid by Lightspeed Customer Care team. Thanks for your question!

If I got you right, you would like to move the breadcrumbs above the product title on your product details page. Like this: https://ecwid.d.pr/sCZ3jJ (screenshot example)?

It’s possible to achieve this with the following CSS code:

.ec-size .ec-store .product-details__sidebar {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store .ec-breadcrumbs {
    order: -1;
}
.ec-size .ec-store .product-details__product-title {
    order: 0;
}

The code needs to be added to your store’s CSS theme in Ecwid admin > Design tab. Please check out this article for further instructions on how to install the CSS code: https://support.ecwid.com/hc/en-us/articles/360000160869-Adding-CSS-codes-to-your-store

If you add the CSS code to your store’s CSS theme as described in the article, it won’t get deactivated or erased with the next Ecwid plugin update. It will stay active unless you deactivate the CSS theme in the Ecwid settings or remove that CSS code.

If this code isn’t working for your particular store for some reason or you have further questions, please send us a link to your website with the Ecwid store embedded, so that we can tailor our replies to your particular site.

I hope this helps! Let me know if you have any questions.

Thanks for the great support!