Editing Reflow's Components with CSS

Hey there! I’m building an ecommerce website with Reflow. But I came across some issues. For instance, I would like to change the grid layout of the Product List, and also the size of the “.ref-product” without affecting the same product when it’s in the shopping cart, but it feels almost impossible.
(Maybe a “.ref-product-cart” could fix that and separate one from the other).

I rewrote a copy of all of the components in it (tedious process lol), and then I managed to achieve the look I want.
But after testing the “new component” (e.g. ‘Product List’), it only works if the original one is also displayed. If I replace it, the look breaks. :pensive: Has anyone here tried/experienced the same issues?

Does anyone know how to solve this? At this point I’m kinda lost not knowing whether I will be able to accomplish the results I was going for. Any help or guidance would be kindly appreciated.

Not your answer, but do you know it’s possible to do reflow translation? It has already been made available here on the forum, I have never used it in my applications.

1 Like

Have you tried creating a blank div with id=‘productwrapper’

Then puting your product list inside this

then in your css use:

.productwrapper    .ref-product {
  your styles here

This way the styles will only be relevant to the list rather than the cart


Thanks for both your replies, guys! After hours of trial and error yesterday, I did manage to do it. Each section individually. But your suggestion @richards might be even better, in terms of keeping a clean and simple code. I signed an NDA for this website, but as soon as it’s up and running, I will share it so you can give me some feedback. :wink: