How to change product grid Product Style
I got some question about change product grid layout to old version. This post will guide you how to do it :
- Default new version product layout like this one
![image](https://support.openswatch.com/file.php?key=2fk8elrew603ib0f08ex8j_krv6927zs&expires=1601856000&signature=3666ea43c9f30693b6ede8434f2edbe75bf47a27&disposition=inline)
So, to change back to our old grid style. you can goto Admin / POS / Setting / Pos layout setting / Pos custom css Field
![image](https://support.openswatch.com/file.php?key=lt19pljkcht9ll0mf4btzrmtowkvv7ha&expires=1601856000&signature=72a28bdbf5ac44a4cc8689f335fb3abc0c129cc5&disposition=inline)
and
![image](https://support.openswatch.com/file.php?key=ohkg4yorqllvjb-y4dxnfi2oux_nhtjm&expires=1601856000&signature=e46faf276cb30b2d034a9fa5c5159b54bf26fbf6&disposition=inline)
and enter this css code to that field :
Click update setting . And goto POS , REFRESH POS page again to see the effect:
![image](https://support.openswatch.com/file.php?key=s_ho-3vwkfvnoidfy2xzkh9mtua5u9sw&expires=1601856000&signature=f9b18ef33f9841518b1a64131c67c3e689ace136&disposition=inline)
That Done.
There are good custom CSS style from customer , I think it good for other customers:
Custom CSS code:
![image](https://support.openswatch.com/file.php?key=9vsxbn4jbmcnvppktgras51ewfnirswg&expires=1601856000&signature=3a842fb062aaf2d7c5c6c8f7a883f7db8a752de4&disposition=inline)
Let enjoy with OpenPOS
- Default new version product layout like this one
So, to change back to our old grid style. you can goto Admin / POS / Setting / Pos layout setting / Pos custom css Field
and
and enter this css code to that field :
.product-main-list .product-item-container .product-item-detail{ background-size: 100%!important; background-position: center center!important; } .product-item-container .product-info{ background: rgba(0, 0, 0, 0.7215686274509804); } .product-info .product-price { text-align: center!important; color: #fff!important; } .product-info .product-sku, .product-info .product-name { text-align: center!important; } .product-info .product-name span { color: #ff6d00!important; }
Click update setting . And goto POS , REFRESH POS page again to see the effect:
That Done.
There are good custom CSS style from customer , I think it good for other customers:
Custom CSS code:
.product-main-list .product-item-container .product-item-detail{ background-size: 100%!important; background-position: center center!important; border-radius: 10px; } .product-item-container .product-info{ border-radius: 10px!important; } div.product-info .product-price { text-align: center!important; color: #fff!important; } .product-info .product-sku, .product-info .product-name { text-align: center!important; } .product-info .product-name span { color: #fafafa!important; } div.product-info .product-sku span { display: none!important; } span.product-qty.ng-star-inserted{ display: none!important; } .product-info{ text-shadow: 2px 2px 4px black; }And Result:
Let enjoy with OpenPOS