Simple theme: product image sizing issue on mobile

New Member
2 0 0

Hi all,

I'm wondering if anyone can help me solve this issue with my product pages on mobile. I've just added several color variants to my products resulting in a number of additional images. I'm finding the variant images are very large on mobile as seen in this screenshot:

Screen Shot 2019-09-12 at 8.47.10 PM.png

As opposed to the view on desktop, below, where they appear as much smaller thumbnails in proportion with the main image:

Screen Shot 2019-09-12 at 8.52.32 PM.png

I'd to reduce the size of the variant images on mobile so they are proportional to the featured image as in the desktop layout. I'm using Simple theme and hoping this is an easy fix -- any recommendations to modify my code? Thanks in advance.

0 Likes
Shopify Partner
152 37 58

@half-sister

 

Go to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid 

 

Scroll to the bottom of the theme.scss.liquid file and paste this: 

 

.template-product .product-single__thumbnails img {
    max-width: 50px;
}

If you want them larger or smaller, simply increase the max-width (ex. max-width: 75px;)

 

Please let me know if you have any questions! 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
New Member
2 0 0

That worked perfectly. Thank you so much! One question: do you know if there's a way to impact the padding? i.e. if I wanted less space between the smaller thumbnails so they could fit into a single row. I really appreciate your help with this, thanks again!

 

 

0 Likes
Highlighted
Shopify Partner
152 37 58

@half-sister, that is controlled by the product template.

 

Go to Online Store > Themes > Actions > Edit Code > Sections > product-template.liquid 

**** Please note that I was not able to copy the entire change so you will need to remove everything above the {% schema %} tag.****

 

Replace (above the {% schema %} with this: 

 

<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-cart-enable-ajax="{{ settings.cart_enable_ajax }}" data-enable-history-state="true">

  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% comment %}
    Get first variant in stock, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}
  {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

  <div class="grid product-single">

    <div class="grid__item medium-up--one-half">
      {% for image in product.images %}
        {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
        {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
        {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        {% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}

        <div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
          <div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                 class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
                 {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                 src="{{ image | img_url: '200x200' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">
          </div>
          {% if product.compare_at_price_max > product.price %}
            <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
          {% endif %}
        </div>
      {% endfor %}

      <noscript>
        <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
      </noscript>

      {% if product.images.size > 1 %}
        <ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">

              {% assign thumbnail_width = 'small--one-third medium-up--one-quarter' %}

          {% for image in product.images %}
            <li class="grid__item {{ thumbnail_width }}">
              <a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endfor %}

        </ul>
      {% endif %}

      {% if section.settings.product_image_zoom_type == 'lightbox' %}
        <ul class="gallery hidden">
          {% for image in product.images %}
            <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>

    <div class="grid__item medium-up--one-half{% if product.images.size == 0%} medium-up--push-one-half{% endif %}">
      <div class="product-single__meta small--text-center">
        <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

        {% if section.settings.vendor_show %}
          <p class="product-single__vendor" itemprop="brand">{{ product.vendor }}</p>
        {% endif %}

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">

          <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

          <p class="product-single__prices">
            {% if product.compare_at_price_max > product.price %}
              <span id="ComparePriceA11y" class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            {% else %}
              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            {% endif %}
            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
              {{ current_variant.price | money }}
            </span>

            {% if product.compare_at_price_max > product.price %}
              <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <s class="product-single__price--compare" id="ComparePrice">
                {{ current_variant.compare_at_price | money }}
              </s>
            {% endif %}

            {% include 'product-unit-price', variant: current_variant, available: true %}
          </p>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product-single__policies rte">
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% form 'product', product, class:'product-form' %}
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>

            {% if section.settings.product_quantity_enable %}
              <div class="product-single__quantity">
                <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1">
              </div>
            {% endif %}

            <div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
              <button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
                <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              {% endif %}
            </div>

          {% endform %}

        </div>

        {% if section.settings.product_description_position == 'right' %}
          {%- assign position = 'right' -%}
          {% include 'product-description' %}
        {% endif %}

        {% if section.settings.social_sharing_products %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>

  </div>

  {% if section.settings.product_description_position == 'below' %}
    {%- assign position = 'below' -%}
    {% include 'product-description' %}
  {% endif %}
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  window.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>

Please let me know if you have any questions! 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Shopify Partner
152 37 58
That solution will put the images in a column of 4 on desktop and tablet and 3 on mobile. For this, I would even recommend removing the css with the max-width from before. Might be a better user experience, you decide.
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes