multiple futured collection grid full width homepage brooklyn theme

ailene
Excursionist
18 0 5

Hi 

i was wondering if anyone knows the code to make the featured collection full width on the home page. i figured out how i can get 1 of them full size but the other 2 are still small. 

And is it possible if i would like to add more futured collections in the future it will do it automatically 

The site is www.atelierneutral.com

KetanKumar
Shopify Partner
20307 2103 7612

@ailene 

sorry for that issue yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#CollectionSection {
    max-width: 100%;
}
#CollectionSection .wrapper {
    max-width: 100%;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JerryLuu
Shopify Partner
11 1 4

Greetings,

@ailene Thanks for posting!

1. Adjust featured collection width

To make your featured collection full width, simply copy and paste the code below into the very bottom of your theme.scss.liquid file.

 

 

#CollectionSection {
max-width: 100%!important;
}

#CollectionSection .wrapper {
max-width: 100%;
}

 

 

It should look like this:

Screenshot (39).png

 

Additionally, if you also want other section to be full-width, copy and paste the code below into the very bottom of your theme.scss.liquid file.

 

 

 

.shopify-section .wrapper {
max-width: 100%;
}

 

 

It will look like this:

Screenshot (41).png

 

I have also noticed there is a layout error in your footer on the other page (URL: https://www.atelierneutral.com/collections/clothing/Kimono) To fix it, you can add the code below to the theme.scss.liquid file.

Screenshot (37).png

 

 

@media screen and (min-width: 591px) {
.site-footer .wrapper {
max-width: 1140px;
padding: 0 30px;
}
}

 

 

Here is the result:

Screenshot (38).png

 

2. Apps for auto-create collections
For your concern about creating collections automatically, there are some options from the Shopify App Store that may help you with this, have a look at here:

I hope this will help!

There are many things you can add to your Home page in order to increase its conversion rate as well as your customer experience. If you’re interested, check out what can not miss on a powerful Shopify homepage.

Happy selling,
Jerry

HappyPoints | Shopify Tasks & Theme Tweaks
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To request a Shopify task, visit happypoints.io
0 Likes