Display Image on Product Page Too Small

Highlighted
New Member
3 0 0

Hello, Ive noticed a problem when helping to code my CEO's website. The display image on the product page is way too small and, because of this, there is a huge gap between the header and the thumbnail. Its only when the zoom is activated that it goes to regular size. I have been searching the community trying to find tips to help with this problem but with no luck. I don't think the problem lies within the theme.css.liquid file, but I could be wrong. 

 

Here's the link to the website, any help would much appreciated: 

 

https://sierraessentialsofficial.com/products/elishas-butterfly-necklace

 

 

0 Likes
Highlighted
Shopify Expert
1381 111 195

please Share a password because your website password protected.

0 Likes
Highlighted
New Member
3 0 0

Sorry about that! The password is Marquetta1

0 Likes
Highlighted
New Member
3 0 0

I was actually able to fix it by going into the product.template.liquid file and changing the zoom img! Instead of the image aspect ratio dividing by 100%, I put 15%, and instead of the image being 300x300 I set it to 400x400. My code now looks like this: 

 

id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 15}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img id="{{ img_id }}"
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
src="{{ image | img_url: '400x400' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}">



 

0 Likes