How to fix product images displaying incorrectly on desktop?

[Luka487]

Hey guys! I’ve searched the web and can’t resolve the problem. I would like to have a full-width page on desktop, not till the borders but so it’s in the middle. I’ve inserted a code that I was able to find but I have a problem on product images showing incorrectly on desktop. I would like to have them like on mobile. Thanks for the help in advance.

https://trailbed.us/products/airmat

Here is also the code from product-template.liquid

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}

{% assign on_sale = false %}

{% if current_variant.compare_at_price > current_variant.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}

{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}

{% capture variantStatus %}
{% if sold_out == true %}
variant-soldout
{% else %}
variant-available
{% endif %}
{% endcapture %}

{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_zoom_size = ‘1024x1024’ -%}
{%- assign product_image_scale = ‘2’ -%}

{% capture product_header_layout %}
{% if section.settings.product_vendor %}

{{ product.vendor }}

{% endif %}

{% if settings.review_badge == ‘review_badge_above’ %}
{% include ‘review-badge’, badge_template: ‘product’ %}
{% endif %}

{% if template != "product" %} {% endif %}

{% unless section_onboarding %}
{{ product.title }}
{% else %}
{{ title }}
{% endunless %}

{% if template != “product” %}

{% endif %}

{% if settings.review_badge == ‘review_badge_under’ %}
{% include ‘review-badge’, badge_template: ‘product’ %}
{% endif %}
{% endcapture %}

{{ product_header_layout }}

{% if section_onboarding %}
{{ ‘product-1’ | placeholder_svg_tag: ‘placeholder-svg’ }}
{% else %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ featured_image.id }}-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

{% comment %}
Display current variant image
{% endcomment %}

{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endif %}

{% comment %}
Display variant image
{% endcomment %}

{% for image in product.images %}
{% unless image contains featured_image %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endunless %} {% endfor %}

{% if product.images.size > 1 %}

{% for image in product.images %} {% unless image contains featured_image %}

{% endunless %} {% endfor %}

{% endif %}

{{ product_header_layout }}

{% if section_onboarding %} {{ price | money }} {% else %} {% if on_sale %} {{ 'products.general.regular_price' | t }} {{ current_variant.compare_at_price | money }} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {{ 'products.general.sale_price' | t }} {% endif %}

<span id=“ProductPrice”
class=“product-single__price{% if on_sale %} on-sale{% endif %}”
itemprop=“price”
content=“{{ current_variant.price | divided_by: 100.00 }}”
{% unless current_variant.available %}aria-hidden=“true”{% endunless %}>
{{ current_variant.price | money }}

{% endif %}
{% if settings.position_currency_converter == “product” %}{% include “currency-selector” %}{% endif %}

{% if section_onboarding %}

{{ 'products.product.sold_out' | t }}

{% else %} {% capture "form_classes" %} product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %} {%- endcapture %}

{% capture “form_id” %}AddToCartForm–{{ section.id }}{%- endcapture %}

{% form ‘product’, product, class:form_classes, id:form_id %}
{% unless product.has_only_default_variant %}

{% for option in product.options_with_values %}

{{ option.name | escape }}

{% if section.settings.product_selector == ‘radio’ %}

{% assign option_index = forloop.index %} {% for value in option.values %}

{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}

<input type=“radio”
{% if option.selected_value == value %} checked=“checked”{% endif %}
{% unless variant_label_state %} disabled=“disabled”{% endunless %}
value=“{{ value | escape }}”
data-index=“option{{ option_index }}”
name=“{{ option.name | handleize }}”
class=“single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}”
id=“ProductSelect–{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}”>
<label for="ProductSelect–{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}"class=“btn btn–small {% unless variant_label_state %} disabled{% endunless %}”>{{ value | escape }}
{% endfor %}

{% else %} {% for value in option.values %} {{ value | escape }} {% endfor %} {% endif %}

{% endfor %}

{% endunless %} {% for variant in product.variants %} {% if variant.available %} {{ variant.title }} - {{ variant.price | money_with_currency }} {% else %} {{ variant.title }} - {{ 'products.product.sold_out' | t }} {% endif %} {% endfor %}

{% if section.settings.quantity_enabled %}

{{ 'products.product.quantity' | t }} {% include 'quantity-selector', type:'product' %}

{% endif %}

{% if section.settings.button_cart_icon %} {% endif %} {% if current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %} {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}

{% endform %} {% endif %}

{% if section.settings.social_sharing_products %}
{% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}

{% if section.settings.show_product_tags %}
{% for tag in product.tags %}
{% if forloop.first %}

{{ 'blogs.article.tags' | t }}: {% endif %} {{ tag }} {% if forloop.last %}

{% endif %} {% endfor %} {% endif %}

{% if template != “product” %}

---

{{ 'products.product.full_details' | t }} {% endif %}

{% unless product.description == blank or section.settings.show_description == false %}

{{ product.description }}

{% endunless %}

[diego_ezfy]

@Luka487

Whatever code you have added onto your website, it has broken it. At the product page, if you open on mobile and click on the thumbnails they are not changing.

I suggest that you install a fresh copy of whatever theme you are using and ask here again for help, it will be easier to help you out this way instead of fixing the previous errors first.

[Luka487]

Thanks man! i reinstalled the code.

{% for field in product.metafields.areviews %} {{ field | last }} {% endfor %}

{% comment %} The contents of the product.liquid template can be found in /snippets/product-template.liquid {% endcomment %}

{% include 'product-template' %}

{% unless product.empty == empty %}

{% endunless %}

{% schema %}
{
“name”: “Product pages”,
“class”: “product-section”,
“settings”: [
{
“type”: “header”,
“content”: “Product photos”
},
{
“type”: “select”,
“id”: “image_layout”,
“label”: “Image display”,
“default”: “stacked”,
“options”: [
{
“value”: “stacked”,
“label”: “Stacked”
},
{
“value”: “thumbnail”,
“label”: “Thumbnail”
}
]
},
{
“type”: “select”,
“id”: “product_photo_alignement”,
“label”: “Image alignement”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “right”,
“label”: “Right”
}
]
},
{
“type”: “checkbox”,
“id”: “enable_zoom”,
“label”: “Enable image zoom”,
“default”: true
},
{
“type”: “header”,
“content”: “Product details”
},
{
“type”: “checkbox”,
“id”: “product_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “product_title_size”,
“label”: “Big product tite”,
“default”: false
},
{
“type”: “select”,
“id”: “product_header_alignement”,
“label”: “Alignement”,
“default”: “”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “text-center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “product_selector”,
“label”: “Variant picker type”,
“options”: [
{
“value”: “radio”,
“label”: “Button”
},
{
“value”: “select”,
“label”: “Dropdown”
}
]
},
{
“type”: “checkbox”,
“id”: “quantity_enabled”,
“label”: “Show quantity picker”
},
{
“type”: “checkbox”,
“id”: “button_cart_icon”,
“label”: “Show button icon”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_description”,
“label”: “Show description”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “social_sharing_products”,
“label”: “Enable product sharing”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_product_tags”,
“label”: “Show product tags”,
“default”: true
}
]
}
{% endschema %}