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

Solved
HariPrasanth
Excursionist
46 1 13

Hello Experts,

I would like to change the number of products displayed as part of the featured products in mobile view.

Below is the screenprint of my store's home page on the desktop. The number of products(3 per row) is fine. whereas in mobile view there is only one product per row is displayed. I want to change this to 2 products per row.

can someone advise me on this

 

Capture1.PNG

 

 

Capture2.PNG

Thanks in advance!!

Store: https://meden-demo.myshopify.com/

password: Welcome01!

 

0 Likes
PeanutButter
Shopify Partner
330 65 136

This is an accepted solution.

Hi @HariPrasanth 

Open file Sections/featured-products.liquid and search for this line:

          {% assign grid_item_width = 'medium--one-half large--one-quarter' %}

(around line 50)

and change it to this:

          {% assign grid_item_width = 'one-half medium--one-half large--one-quarter' %}

 We have added the one-half class to that product grid

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
Excursionist
46 1 13

This is an accepted solution.

Hello @PeanutButter 

Thanks for the solution! it works!!

however, the number of products in a row in desktop view is changed from 3 to 4. Is this possible to bring this back to 3, while keeping the number as 2 in mobile view??

0 Likes
PeanutButter
Shopify Partner
330 65 136

This is an accepted solution.

 

hi @HariPrasanth great that i could help!

Sure, change the code I send in my last message for this:

 

		  {% assign grid_item_width = 'one-half medium--one-half large--one-third' %}

 

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
Excursionist
46 1 13

Many thanks @PeanutButter 

Works perfectly!!

 

0 Likes
PeanutButter
Shopify Partner
330 65 136

You're welcome! Great that I could be of help

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
Excursionist
46 1 13

Hello @PeanutButter ,

May I also request another help that is similar.. I want to achieve the same with the number of products within the collection.

I did change the code like below in section>collection-template.liquid but didnt help. Can you please advise on this

 <div class="searchly-filter-products grid-uniform" data-ac-sort="{{ collection.default_sort_by }}">
{% assign grid_item_width = 'one-half medium--one-half large--one-quarter' %}
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% endfor %}
</div> 

Thanks in advance!

0 Likes
PeanutButter
Shopify Partner
330 65 136

Will take a look sometime during the weekend but not sure when

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 65 136

@HariPrasanth that is the line you should be editing.  However, on the first line of the code you have pasted I see the following:

<div class="searchly-filter-products grid-uniform" data-ac-sort="{{ collection.default_sort_by }}">

I see that you have installed the Filter App by Searchly https://apps.shopify.com/search-filter-upsell-cross-sell, right?

This apps usually render the product grid in the collection with custom some custom code from the app, so maybe this is why your edit to collection-template.liquid is having no effect...
I would need collaborator access to your site to take a look.  Let me know if you are willing to give me access and I will send a request.

  

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 65 136

@HariPrasanth checked your site and I see that you have to columns in mobile working at https://meden-demo.myshopify.com/collections/all

Screen Shot 2021-01-23 at 20.22.11.png

 

However, as you can see in the above image there are rows where there is only one image.  This is caused because you have product images with different heights and this breaks the grid.  There is an easy fix for this, just at the following at the end of your Assets/timber.scss.liquid file:

@include at-query($max, $preMedium) {
  .grid__item.one-half:nth-child(2n+1) {
    clear: both;
  }
}

 

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