Center align product images on collection page - Brooklyn theme

Solved
Conzo1000
Tourist
9 0 1

I have a 2 product store, so on my collection page the two products are currently left aligned, leaving a large 'gap' on the collection page that doesn't look very neat. I am looking to centre these products on the collection page so it looks neater. There is no option on the customise theme page, so I assumed it would have to be changed through the code. Does anyone know how to do this?

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24993 2501 9044

This is an accepted solution.

@Conzo1000 

Thanks 

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

.grid, .grid--rev, .grid--full, .grid-uniform {
display: flex;
    justify-content: center;
}
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

View solution in original post

Replies 23 (23)
KetanKumar
Shopify Partner
24993 2501 9044

@Conzo1000 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

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
Conzo1000
Tourist
9 0 1
KetanKumar
Shopify Partner
24993 2501 9044

This is an accepted solution.

@Conzo1000 

Thanks 

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

.grid, .grid--rev, .grid--full, .grid-uniform {
display: flex;
    justify-content: center;
}
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

View solution in original post

Conzo1000
Tourist
9 0 1

Worked perfectly, thank you so much!

Campbellmohr
New Member
2 0 1

Hi Ketan, 

I tried this for my store and it adjusted all the image sizes and threw out the formatting completely. 

 

I have 2 collections with only 1 product in them and they are aligned to the left and I would like them centred without affecting my other collection pages with over 20 products 

 

Any idea how I can achieve this?

 

Thanks

KetanKumar
Shopify Partner
24993 2501 9044

Hello, @Campbellmohr 

Thanks and Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

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
Campbellmohr
New Member
2 0 1

Thanks 

url is campbellscollective.com 

KetanKumar
Shopify Partner
24993 2501 9044

@Campbellmohr 

Thanks for URL.

sorry, but your store is password protect.

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
KetanKumar
Shopify Partner
24993 2501 9044

@Campbellmohr 

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

.grid, .grid--rev, .grid--full, .grid-uniform {
display: flex;
    justify-content: center;
}

 

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