Help with Product Grid Layout

Solved
Highlighted
Tourist
11 0 4

Hello, I'm using the Flex theme and I want to make the elements in my product grid horizontally align with each other.

As you can see in the second row in my screenshot, if the product image is shorter than another then everything becomes misaligned. This is the case whether I check the "align to height" box or not. Is there a way for every row to look like the first, where the products are horizontally aligned to each other despite the different sizes, and the text is also horizontally aligned to each other?

Additionally I would like there to be more space between each row of products, they are very close together - can anyone help me out   

 

 

Screen Shot 2020-08-03 at 11.30.29 AM.png

1 Like
Highlighted
Shopify Partner
7507 1037 2600

Hello, @estherfeteny 

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 Expert | 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
Highlighted
Tourist
11 0 4

Thanks, I just messaged you the URL

You can see it under "SHOP" 

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

This is an accepted solution.

@estherfeteny 

Thanks for details.

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

.product-wrap .image-element__wrap {
height: 200px;
    display: flex;
    align-items: 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
11 0 4

Thank you!! Lastly, could you help with adjusting spacing between the rows? 

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

@estherfeteny 

Thanks 

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

.product__grid-item .has-padding-bottom {
padding-bottom: 40px; /* change the value as you like*/
}

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
11 0 4

Hello! Thanks so much again for this. I just noticed that if I want to "show secondary product media" in the product grid, this code doesn't work anymore - do you know how I can fix it?

 

1 Like
Highlighted
Shopify Partner
7507 1037 2600

@estherfeteny 

Thanks for your 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 Expert | 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
Highlighted
Tourist
11 0 4

Ok, just messaged it to you!

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

@estherfeteny 

password protect can you please share 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 Expert | 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