FROM CACHE - en_header

Brookyln Theme Editor: How to have a different featured collection selection for desktop and mobile

Solved
Spr123
Excursionist
30 1 8

Hi all,

 

I am using the brooklyn theme.

In the theme editor, one of the sections you can add is the "Featured Collection" section, which allows you to show a few products on your homepage.

My products show in rows of two on mobile, and in rows of three on desktop, for this reason, for example if I have 8 products in the featured collection, it will look great on mobile, but there will be a blank space on the desktop featured collection (8/9).

Is there a way to create a distinct featured collection section for me to select from the theme editor for my mobile homepage, and a separate one for desktop? What code tweaks would I need to do for that? (I've seen similar request regarding different slideshow sections (mobile v.s desktop) thus I assume the same can be done here.

To recap I would like to avoid having "blank space on either mobile or desktop homepages. I do not think it's necessary for me to send my website link as it's a generic request, but if it's really needed just feel free to ask.

I think and hope this can be a quick fix? 

 

desktop (3X2 grid for 8 items) one blank spacedesktop (3X2 grid for 8 items) one blank spacemobile (2X4 grid for 8 items) looks greatmobile (2X4 grid for 8 items) looks great

Many thanks for the support!

Accepted Solution (1)

Accepted Solutions
DanBim
Shopify Partner
502 56 116

This is an accepted solution.

Hi @Spr123, as I'm checking, this CSS code is causing the issue that products cannot appear 4 products in a row

Screen Shot 2021-10-07 at 16.39.19.png

 

Is it helpful? Like and Accept solution to let me know 🙂
Ryviu - Aliexpress Reviews app - is a product review software with the ability to import reviews from Aliexpress, Amazon, Etsy, and Dhgate in order to drive traffic, boost SEO, and increase sales. Over 40.000 stores use it.

View solution in original post

Replies 4 (4)
DanBim
Shopify Partner
502 56 116

Hi @Spr123, you can change that section to appear 4 products per row by opening featured-products.liquid file in Sections folder of your theme then replace this element large--one-third in line 50 by this one large--one-quarter, click Save button.

Is it helpful? Like and Accept solution to let me know 🙂
Ryviu - Aliexpress Reviews app - is a product review software with the ability to import reviews from Aliexpress, Amazon, Etsy, and Dhgate in order to drive traffic, boost SEO, and increase sales. Over 40.000 stores use it.

Spr123
Excursionist
30 1 8

Hi @DanBim thank you for the quick reply, very much appreciated.

 

I did as you suggested, unfortunately it did not make any difference. Perhaps it's due to the fact that we are using specific product cards to show our products.

Perhaps if we are able to increase page width that can be used, four product cards may fit per each row. 

Please find a preview url of my homepage: https://rcm9mssv5knd2djc-55506731197.shopifypreview.com/

 

Please let me know if you have any ideas that could solve this issue. I'll be sure to set this question as resolved in case.

Please let me know if you may need anything else.

 

Many thanks!

DanBim
Shopify Partner
502 56 116

This is an accepted solution.

Hi @Spr123, as I'm checking, this CSS code is causing the issue that products cannot appear 4 products in a row

Screen Shot 2021-10-07 at 16.39.19.png

 

Is it helpful? Like and Accept solution to let me know 🙂
Ryviu - Aliexpress Reviews app - is a product review software with the ability to import reviews from Aliexpress, Amazon, Etsy, and Dhgate in order to drive traffic, boost SEO, and increase sales. Over 40.000 stores use it.

Spr123
Excursionist
30 1 8

@DanBim OK I managed to figure it out myself, playing with the width percentage I had set in the CSS, thanks to your suggestion.