Ecwid Ecommerce will automatically place the Product Attributes before the Product Description. That's a bit weird as typically you would want to read a brief product description before digging deeper into additional information like Attributes (eg Brand, UPC). Within the Ecwid Dashboard there is currently no design setting to switch this layout so how can we fill the gap? Initially, we thought of using jQuery to insert the description div before the attributes div, but the problem here is that the code wouldn't run cross-platform (i.e. on your Facebook store). So instead we opted to apply the following devilishly simple CSS which is included in Design > Themes and in-depth customization:-
Save this CSS to your Custom theme and the problem is not only fixed but also carried across to any platform that your Ecwid store resides on.
How does this work?
The div with class '.product-details-module__content' is the parent of both the attribute div with class 'html#ecwid_html body#ecwid_body .ec-size.ec-size--s .ec-store .product-details__product-attributes' and description div with class 'html#ecwid_html body#ecwid_body .ec-size .ec-store .product-details__product-description' and here we are using CSS Flex to reverse the columns. CSS Flex (aka Flexbox - Flexible Box) is supported in all modern browsers and is a great way to create fluid columns and layouts - we use Flex extensively and wish others would too! These 2 lines of CSS can be used on any container that has 2 child divs that you want to reverse and for multiple (3+) columns/rows reordering you can use the Flex 'Order' property like:-
Interested in an Ecwid Store?
Join hundreds of thousands of small businesses who trust Ecwid E-commerce to sell online. Set up your Ecwid store once to easily sync and sell across a website, social media, marketplaces like Amazon, and live in-person. Get started with one, or try them all. Set up your Ecwid store once to easily sync and sell across a website, social media, marketplaces like Amazon, and live in-person. Get started with one, or try them all. With Ecwid, you get free FOREVER. Set up your free account once, and keep it as long as you like.