Boundless Theme Reducing Size of Product Image for Single Image Products only

New Member
1 0 0

I'm using the boundless theme. When I have a single image as the product image, it stretches to entire width of the screen. I'd like it to take up half the width of the screen and be centered. If there are two images I'm fine with the default behavior.

I found a solution to this using this bit of code:

{% if section.settings.product_image_type == 'portrait' %}
      {% if product.images.size == 1 %}
>>        {% assign grid_item_width = 'medium-up--one-half medium-up--push-one-quarter' %}
      {% elsif product.images.size == 2 and section.settings.skip_first_product_image %}
 >>      {% assign grid_item_width = 'medium-up--one-half medium-up--push-one-quarter' %}
      {% else %}
        {% assign grid_item_width = 'medium-up--one-half' %}
      {% endif %}
      {% assign is_portrait_image = true %}
    {% else %}
      {% assign grid_item_width = '' %}
    {% endif %}

>> to show the changes I made.

However when I apply this to my product-template.liquid, nothing happens.

What can I do to make this stick? Are there other adjustments that need to be made? Where?

Thanks

 

0 Likes
New Member
1 0 0

Hi! First, of all thanks so much for posting this. This worked so well! So here's how you need to past the code in your theme. Find the if statement in your theme below and you can play around with the medium-up--one-third (or half).. However you like.

% if section.settings.product_image_type == 'portrait' %}
      {% if product.images.size == 1 %}
        {% assign grid_item_width = 'medium-up--one-third medium-up--push-one-quarter' %}
      {% elsif product.images.size == 2 and section.settings.skip_first_product_image %}
        {% assign grid_item_width = 'medium-up--one-third medium-up--push-one-quarter' %}
      {% else %}
        {% assign grid_item_width = 'medium-up--one-third' %}
      {% endif %}
      {% assign is_portrait_image = true %}
    {% else %}
      {% assign grid_item_width = '' %}
    {% endif %}
0 Likes
New Member
1 0 0

I found the code in the theme, but changing the grid_item_width doesn't do anything for me.

0 Likes
New Member
10 0 0

Hi,

I need help to reduce main image on Boundless Theme Reducing Size in Product Page. I'm completly new in Shopify and I need simple step by step instruction how to do it.

Please advice,

Barbara

0 Likes
New Member
10 0 0

Hi,

I need help to reduce main image on Boundless Theme Reducing Size in Product Page. I'm completly new in Shopify and I need simple step by step instruction how to do it.

Please advice,

Barbara

0 Likes
New Member
3 0 0

Thanks for the help and the code, I got it to work for a single image product, but wondering how do I go about doing the same for a product page with 2 item images?

0 Likes