Jump to content

Recommended Posts

Hallo,

wenn ich bei meinem Template eine Suchbegriff eingebe ehalte ich im Grid Look 3 Produkte nebeneinander.

Kann mir jemand weiterhelfen, wie / wo ich 4 Produkte in einer Reihe einstellen kann?

Hier wäre der link zu meinem Shop und der Ansicht:

https://gewuerz-mueller.de/de/search?search_query=telli&controller=search&orderby=position&orderby=categories&orderway=desc&valSelected=

 

Ich habe diesen Post gefunden, komme damit aber nicht zurecht:

https://belvg.com/blog/how-to-change-default-grid-in-prestashop-1-6.html

Prestashop 1.7

In Prestashop 1.7 as well as in its previous version 1.6 there are 3 product columns for category page and 4 columns for homepage. But there are some differences in implementation. In Prestashop 1.6 bootstrap classes are used (which is described above in details), while in Prestashop 1.7 everything is done with CSS styles. Moreover, in Prestashop 1.7 “display: flex” is applied to create a grid for product list block, and the block width is specified for the product list. Since the width of container block (or product list block), as well as the width of product block, has specified value, the number of products in a row depends on the container block (3 for category page and 4 for homepage). Default width of product list block is 257 pixels (and this is for category page as well as homepage). In order to change the number of products in a row, we should alter the product block width.

As an example, let’s try to carry out it on the category page (for homepage and other pages where there’s a product list, it will be the same). We’re going to create not 3, but 4 products in a row.

In the style file (make sure the file is attached after the file “/themes/classic/assets/css/theme.css”) we should specify the width of product block (according to the container width it will be 188 pixels).

"#products .thumbnail-container {width: 188px;}"

"#products .thumbnail-container {width: 188px;}"


But it’s not enough for us. Since we’ve changed the block width, we’ll have to change the style of the elements placed within the block.

"#products .highlighted-informations {width: 188px;}" "#products img{width: 100%; margin: 0;}" "#products .product-description {width: 188px;}"

"#products .highlighted-informations {width: 188px;}"

"#products img{width: 100%; margin: 0;}"

"#products .product-description {width: 188px;}"

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More