Ecwid Product Description Before Product Attributes

Ecwid 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:-

.product-details-module__content {
  display: flex;
  flex-direction: column-reverse;
}

ecwid product description before product attributes Ecwid Product Description Before Product Attributes ecwid description attributes 300x197

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

  .box {
          display: flex;
          flex-direction: row;
        }
        .box :nth-child(1) { order: 2; }
        .box :nth-child(2) { order: 3; }
        .box :nth-child(3) { order: 1; }
        .box :nth-child(4) { order: 3; }
        .box :nth-child(5) { order: 1; }

Interested in an Ecwid Store?

We’re Ecwid partners and provide our branded version under our ‘Slick Commerce’ ECommerce platform. It’s Ecwid, but you will get higher levels of branding and customisation from us as well as cheaper wholesale prices for the Store subscriptions! Contact Us for more information on Ecwid/Slick Commerce.

About the Author
ecwid product description before product attributes Ecwid Product Description Before Product Attributes 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.