FROM CACHE - en_header

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
34555 3457 11299

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
34555 3457 11299

@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
34555 3457 11299

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
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
34555 3457 11299

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
34555 3457 11299

@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
34555 3457 11299

@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
PetiteBakeBox
Tourist
3 0 2

Hi,

I have the same question but for my Focal theme.

I have 2 rows of products and on the second one just 1 product. I would like to center this one

 

Someone has a solution?

 

Thank you 

KetanKumar
Shopify Partner
34555 3457 11299

Hello, @PetiteBakeBox 

Welcome to the Shopify community!
and Thanks for your Good question.

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
PetiteBakeBox
Tourist
3 0 2

Hi,

my site URL is petitebakebox.com.au

KetanKumar
Shopify Partner
34555 3457 11299

@PetiteBakeBox 

Thanks 

sorry were not bale to this page 

KetanKumar_0-1599283176825.png

 

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

Hi,

I'm having the same issue as Conzo1000 except I am using the Venture theme. My shopify url is merchwizard.shop/collections/carmeria where you can see that my four products are all aligned to the left which looks unbalanced. Hoping you can help!

Thanks!

GolfAddicts
New Member
2 0 2

Hi @KetanKumar 

 

Is there a way I can center align specifically one collection only? Rather than all of them? All of the resources I have found center aligns every collection but I only need to align my "Polos" Collection

https://golfaddicts.ca/

 

Hoping you can help me with this.

 

Cheers,

KetanKumar
Shopify Partner
34555 3457 11299

@GolfAddicts 

sorry for this issue can you please  try 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 .grid-uniform {
    display: flex;
    flex-wrap: wrap;
    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
GolfAddicts
New Member
2 0 2

This worked great thank you

KetanKumar
Shopify Partner
34555 3457 11299

@GolfAddicts 

it's my pleasure to help us

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
daisy13
Tourist
3 0 2

Hello!

I am having the same issue but on the prestige theme, do you have the code for this also?

Many thanks,

Daisy