Help with changing the number of products in featured-products in mobile view in Brooklyn theme

Solved
HariPrasanth
Explorer
46 1 13

Hello @PeanutButter 

Thanks for the response!

although the page https://meden-demo.myshopify.com/collections/all has the expected view, all the collection still shows one product per row

for ex: https://meden-demo.myshopify.com/collections/kelim-tapijten

The suggested piece of code didn't work 

Please send me the invite for the collaborator access, I can arrange it. 

0 Likes
HariPrasanth
Explorer
46 1 13

Hi @PeanutButter 

I also noticed that in the page https://meden-demo.myshopify.com/collections/all the number of products per row is 4 in desktop and 2 in mobile, only in page 1.

page 2 and 3 has the default values (3 in desktop and one per row in mobile). if I go to page 2 and come back to 1, then the products per row are changed back to default.

very confusing

BTW, the code you suggested in timber.scss in the previous reply is working. 

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi, now that I see this I am pretty sure the issue is related with the Filter App by Searchly.  The collection-template.liquid's code is only being responsible of rendering the page on the initial load, then the app renders the following pages probably with javascript.

I have requested access to your site to take a look with permissions to see Themes, Apps and Settings

Also, can you please describe the steps you followed to install the Filters app? Did you add any code to the theme manually or did you use some type of automatic install?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
HariPrasanth
Explorer
46 1 13

Hi @PeanutButter 

Thanks for helping me out so far!

I have accepted the collaborator access request. Please have a check

I didn't follow any specific steps in installing the app. just installed and did data sync from the app.

 

 

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi @HariPrasanth ok, then it was the app automatically adding code to your theme cause in the code you pasted there was some code added by the app for sure

I will try to take a look tonight, if I cant then I will do sometime tomorrow

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
PeanutButter
Shopify Partner
330 66 137

As I suspected, issue had to do with Searchly App

To fix the issue with pages greater than 1 displaying only one row per product I changed the following in in Assets/searchly-filter.js

			$products.eq(i).addClass("medium--one-half large--one-third");

to this:

			$products.eq(i).addClass("one-half medium--one-half large--one-third");

 

Also, I added the fix for some rows with only one product in mobile at the end of Assets/timber.scss.liquid:

/*************************************************/
/*** customizations by https://peanutbutter.es ***/
/*************************************************/

// Prevent grid items with different height breaking the grid
@include at-query($max, $preMedium) {
  .grid__item.one-half:nth-child(2n+1) {
    clear: both;
  }
}

.

I added both fixes to your live theme as I was pretty confident about them

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
HariPrasanth
Explorer
46 1 13

Thanks a lot, @PeanutButter.. works like charm!!

the fix you have applied is disturbing the collection list arrangement on the home page. this is the reason why I had to remove it yesterday.

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

hi @HariPrasanth what issue are you experiencing with "disturbing the collection list arrangement on the home page" ?

Can you send screenshots/description about the issue?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
HariPrasanth
Explorer
46 1 13

Hi @PeanutButter 

Please find the screenprint below. 

The Moderne en Design Tapitijn and Kelim Tapijiten were placed next to each other previously.

 Capture1.PNG

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Ok, I have modified and applied the code for timber so it only affects product grids and not that collection grid.  The modified code is:

/*************************************************/
/*** customizations by https://peanutbutter.es ***/
/*************************************************/

// Prevent grid items with different height breaking the grid
@include at-query($max, $preMedium) {
  .grid-uniform .grid__item.one-half:nth-child(2n+1) {
    clear: both;
  }
}

Now collections grid in homepage is ok and product grids in mobile always have 2 products per row:

Screen Shot 2021-01-25 at 20.50.13.png

Screen Shot 2021-01-25 at 20.49.53.png

  

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es