Two Product Columns in Simple Theme Help

jenvenegas
New Member
5 0 0

Hi. I'm using "Simple Theme" for a shop and it's currently set to having three columns of products (unlimited rows) that are cropped into squares. Is it possible to have two columns that are full-size instead? Kind of like this site (warning - men in under garments on this site): https://shop.barragannnn.com/ - if it's not possible to do with this theme, do you know of another theme that would make this happen?

Any help would be appreciated. Thank you!

0 Likes
dmwwebartisan
Shopify Partner
5699 1303 1669

@jenvenegas 

Can you share screenshot what do want ?

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
jenvenegas
New Member
5 0 0

jenvenegas_0-1619504055045.png

This is the site currently. There are three columns of products that are cropped in squares. I want there to be two columns with the photos full-size instead of cropped into squares. The link I used in my original post is what I would like the site to look like. 

 

Thank you!

0 Likes
LitExtension
Shopify Partner
641 66 119

Hi @jenvenegas,

Please share the protected password on your site so I can check

and give you the best solution in this case.

Please place this code at the end of the "theme.scss" to solve your problem.

@media only screen and (min-width: 750px) {

.medium-up--one-third {

    width: 50%;

}

.product__image-wrapper {

    display: block;

    margin-bottom: 10px;

    position: relative;

    padding-top: 120% !important;

}

.product__image {

    display: block;

    width: 100%;

    position: absolute;

    top: 0;

    max-width: none !important;

    max-height: none !important;

    bottom: 0;

    height: 100%;

    object-fit: cover;

}

}

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
jenvenegas
New Member
5 0 0

@LitExtension Thank you. That helped. I'm still seeing three columns - just the third column is bumped down so the fourth square is blank every four squares. Any ideas how to fix this? 

 

jenvenegas_0-1619657009729.png

 

0 Likes
jenvenegas
New Member
5 0 0

@LitExtension or anyone else that can help - I'm still having an issue. The top row has two columns of product but the 2nd row has only one on the right side - I'm assuming this was bumped down from the top original three rows. And then the third row, has two columns again. Please help with this issue if anyone can. Thank you!

The screenshot shows the bottom of the first row, the second row, and the top of the third row. 

jenvenegas_0-1619849686113.png

 

0 Likes
ChoosiZon
Navigator
263 45 76

@jenvenegas wrote:

@LitExtension or anyone else that can help - I'm still having an issue. The top row has two columns of product but the 2nd row has only one on the right side - I'm assuming this was bumped down from the top original three rows. And then the third row, has two columns again. Please help with this issue if anyone can. Thank you!

The screenshot shows the bottom of the first row, the second row, and the top of the third row. 


 At your collection-template.liquid at around line 47 remove class grid--uniform.

And see if what you want.

Screenshot 2021-05-01 142816.png

 

0 Likes
jenvenegas
New Member
5 0 0

@ChoosiZon thank you. I did that but I think it just moved over the product in the 2nd column? I'm not sure if it worked. But I appreciate your help.

jenvenegas_0-1619889424844.png

 

0 Likes
ChoosiZon
Navigator
263 45 76

You need 1 more line of code.

It is site-specific so have to see your theme live.

0 Likes
LitExtension
Shopify Partner
641 66 119

Hi @ChoosiZon

Can you please share your site URL so I can check and provide a solution here.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes