Minimal Theme - Change Product Image Size, product-template.liquid

Highlighted
New Member
1 0 0

Hello Community,

I was wondering if someone could help me with a little bit of code. I'm using the minimal theme and my product images are taking up about half the page. I'm hoping to scale these down a bit so that the full bottle can be seen on an average size laptop when browsing. I need to adjust it maybe 20 / 30% less than the current size and I just don't know enough liquid to figure out what I should change.

My site can be accessed here >  ardor-natural-wines.myshopify.com

 // the password is : 4243sebelmont

 

Im guessing I need to change something in this bit of code? Thanks for your help.

-Dave

-----------------------------------------------------

<div class="product-single">
<div class="grid product-single__hero">
<div class="grid__item post-large--one-half">

{% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

<div class="product-single__photos">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

<div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
{% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
data-src="{{ img_url }}"
data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
alt="{{ image.alt | escape }}">
</div>
</div>

---------------------------------

 

0 Likes