Brooklyn Theme: Change Home Page Row from 3 to 4? Also - how do I reduce the banner height slightly?

Solved
kyle_ashton_
New Member
2 0 0

Hey guys,

As the title says... I am new to Shopify as currently transitioning from my Etsy store where the setup is a lot easier haha.

URL here: https://nordichomedesigns.co.uk/ 

I am looking to do two things:

1. Change the number of products shown in the 'featured/recommended' section on my home landing page from 3, to 4 products in a single row ( you can currently see that it drops down after 3 to the next row which is not what I want to happen ).

I managed to get this to work when you go to the collection pages - that works perfectly - but not on the home page which is annoying...

2. How would I reduce the banner height ever so slightly on the home page? Just want to knock it back by about 150 px above and below?

If anyone can help that would be amazing - thank you in advance if anyone can share a solution

Best wishes,

Kyle.

0 Likes
Pallavi
Shopify Expert
2170 353 463

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width: 1100px){
div#CollectionSection .wrapper .grid-uniform {
display: flex;
flex-wrap: wrap;
}

div#CollectionSection .wrapper .grid-uniform .large--one-third {
width: 25%;
}

div#CollectionSection .wrapper .grid-uniform .large--one-third a.grid-product__image-link {
display: flex;
flex-wrap: wrap;
}

div#CollectionSection .wrapper .grid-uniform .large--one-third .grid-product__image-wrapper {
height: auto !important;
}
}
@media screen and (min-width: 991px){
.hero.slick-slider .slick-list {
height: 550px !important;
}
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 550px;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Natztech
Shopify Partner
1306 359 895

This is an accepted solution.

hello @kyle_ashton_ 

please Go to Online Store-> Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file.

@media only screen and (min-width: 1024px){
#shopify-section-featured-products #CollectionSection .wrapper .grid-uniform{
    display: flex;
    flex-wrap: nowrap;
}
#shopify-section-featured-products #CollectionSection .wrapper .grid-uniform .large--one-third {
    width: 25%;
}
#shopify-section-slideshow .hero.slick-slider .slick-list {
height: 550px !important;
}
#shopify-section-slideshow .hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 550px;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
kyle_ashton_
New Member
2 0 0

Thank you dude - works perfectly!

0 Likes