Customize Product Details page

  • Resolved andi_sf

    (@andi_sf)


    2 years, 7 months ago

    How can I customize the Product Details page? I would like to have the breadcrumb appear before the product title.

    I see ‘Control position of elements on product details pages’ in the Help menu but it is not very clear.

    Could you provide me with the code for:
    “Have the breadcrumb appear before the product title on the Product Details page”

    Also, please let me know if I have to create a new template file and and/or where your provided code would have to be entered/executed so that it will not be overwritten by any plugin update?

    Thanks so much in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support ecwid_team

    (@ecwid_team)

    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.

    Thread Starter andi_sf

    (@andi_sf)

    Thanks for the great support!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customize Product Details page’ is closed to new replies.