Solo Theme - Change Product Image Size on Collection Page

Brooke_Albring
Tourist
10 0 1

So our store is using the Solo Theme and we want to make the images of our products larger, specifically when viewing a collection. I am slightly familiar with code (emphasis on that word "slightly"), so I searched throughout the HTML and I believe I found where to make the change. It's under the product-grid-item.liquid snippet.

​
  {% endcomment %}
  <div class="grid-image">
    <a href="{{ product.url | within: collection }}" class="grid-image--centered">
      {% if on_sale and sold_out != true %}
        <span class="product-item__on-sale">{{ "products.product.on_sale" | t }}</span>
      {% endif %}
      <img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
      {% if sold_out %}
        <span class="product-item__sold-out">
          <span class="sold-out-text">
            {{ "products.product.sold_out" | t }}
          </span>
        </span>
      {% endif %}

​

It says img_url: 'grande' on the 7th line down. It was originally set to large, and when I changed it to grande it didn't do anything. Changing it to medium doesn't do anything either, but as I go down to small, compact, and so on, it does get smaller.

So I'm almost certain that this is the right spot to be in, and my assumption is that there is code elsewhere that is restricting the maximum size of these images. The images themselves are at around 1000 x 1000 ppi, so I know the problem doesn't lie in the resolution of our images. If anyone has any knowledge or input on this it would be GREATLY appreciated.

Thanks in advance!

Oliver_Schönbet
Excursionist
41 0 8

Hi Brooke, 

generally your approach is correct, the problem is that the container holding your images is only 920px wide and the same time your collection is forced to display 2 images per row. The easiest way would be to look for the following in your  timber.scss file: 

.fluid-grid-item {

display: inline-block;

text-decoration: none;

margin: 25px 0;

width: 49%;

vertical-align: top;

}

and change the 49% to 98%. Now your images will be bigger.

Best

Oliver

Brooke_Albring
Tourist
10 0 1

Hi Oliver,

Thanks for the response, that worked wonderfully! I had originally changed it to 2 items per row simply to get the images larger, but was actually hoping to have 4 items per row. In doing this change that you suggested, it brought it down to 1 item per row. Is there a way to get to 4 items and have a larger image size?

Thanks so much!

0 Likes
Brooke_Albring
Tourist
10 0 1

P.S. I was actually pretty happy with the size that they were at with it being at 2 per row, so I suppose at that point the image size wasn't the concern. It's a mix of having bigger image sizes while also having it at 4 products per row. Thanks for the help!!(:

0 Likes
Oliver_Schönbet
Excursionist
41 0 8

Hi Brooke,

I see, indeed there is a way, but this is kind of a dirty approach as you will need to increase the overall width of your collection page while the rest of your store stays the same. Try adding the following style to to your stylesheet:

.template-collection main.wrapper.main-content {

max-width: 100%;

}

Now the collection will span the whole screensize, allowing the pictures to distribute in a wider area.

Best

Oliver

Brooke_Albring
Tourist
10 0 1

Hi Oliver,

Thank you so much!! To be honest, I wasn't exactly sure where to insert that code at first. Eventually I figured it out though and I have not been this excited in a while!!! It worked perfectly, thanks again!

Best Regards,

Brooke

0 Likes