How do I increase collection tile size while keeping the same 3 ratio?

Highlighted
Excursionist
12 0 0

Hi everyone!

 

I can't find an area of the theme editor to enlarge the visual tiles of the collection images on my home page. The small square tiles are too small for our liking, and would simply like to make these tiles larger. The image attached shows our collection tiles in comparison to our slider/banner. We would like to enlarge the tiles to better compliment the size of the banner, ridding this page of some negative / white space. If this is unfix-able with the editor, is there a way to edit my code a bit?

 

Thank you!

 

 

shopify collection tiles.PNG

 

0 Likes
Shopify Expert
96 17 12

@JackieKim - Can you send over a link to your store?

0 Likes
Excursionist
12 0 0
Shopify Expert
96 17 12

@JackieKim - Cool! There is a maximum width of 1200px that is being applied to your homepage elements with the exception of the slider (full-width).  If you would like to increase the size of the collection images you have 2 options:

 

1) Remove the max-width constraint for the homepage which would essentially make all homepage sections full-width and look more inline with the slider

2) You can remove the collection grid from the container applying the maximum width.

 

For #1, there is a quick CSS solution that can be implemented.  For #2, this would require some advanced HTMl knowledge and development and would recommend reaching out to a Shopify expert for a proposal.


Let me know which way you're leaning and we can tie a bow on this :)

0 Likes
Excursionist
12 0 0

I would probably need to go with the first option!

0 Likes
Shopify Expert
96 17 12

@JackieKim - Add the following at the bottom of your index.liquid template:

<style>
.page-width {
max-width:none;
}
</style>
1 Like
Excursionist
12 0 0

Thank you so much! I'm loving the way the collection tiles look, but now my product images are blown up and the title / price text is out of line :( Is there an alternate liquid I can manipulate to only change the collection tiles and not the product photos?

amazon cascada 1.PNGBefore code

 

amazon cascada.PNGAfter code

 

0 Likes