Re-order the way product information is shown

Reflow
1

Is there a way to reorder the way the information is shown when called. Ie. i know that you can use data-reflow-show and then name what you want to show but it wont reorder the way they are sown. For example i would like the description of itme directly under the heading and the add to cart at the bottom. Is there a way to do this, or am i missing something?

Thank you in advance

2

Unfortunately it is not possible to modify the order the elements appear on the page. If you have experience with CSS maybe you can do it by using flex and the order css property, but I haven’t investigated if it would work.

Something that is guaranteed to work is to use the Reflow API and select the product info with your own JS and build the page any way you see fit.

3

Hi Martin, thanks for the reply, I was hoping i wouldnt have to use css/JS but i’ll take a look. VMT

4

Something like this will work:

.ref-product-data {
  display: inline-flex!important;
  flex-direction: column!important;
}

.ref-name {
    order: 1!important;
}

.ref-description {
    order: 2!important;
}

.ref-price {
    order: 3!important;
}
 
[data-reflow-type="add-to-cart"] {
    order: 4!important;
}
1 Like
5

Thank you very much @richards i was going to look at this today but you saved me a heap of reading and helped me learn something new!!! I wish i could buy you a coffee!