Hi all,
i’ve been using the uploadcare uploader tool for a while now, however some of my customers are pointing out that the picture they are uploading is resized in the product image. See the following url to check it; Diamond Painting Eigen Foto – PremiumPaintings. Does anyone have a way to fix this issue so the uploaded image won’t get resized? Thanks again for your help!
Kind regards,
Robert
Hi @Meyro,
The image gets stretched because its CSS class forces it to take 100% of the width and height of the image container. You can easily fix this by replacing width and height with max-width and max-height correspondingly in the .rimage-wrapper .rimage__image class:
You can find this CSS in the theme.scss file of your Shopify theme.
Hi Alex, the solution you gave worked, however now are all my other images behaving weirdly. Is it possible to adjust the max width and height just for the product image on the product.custom.liquid?
That worked, thanks!!
You could simply assign a unique class to the product image element, e.g. custom-product-preview so that it doesn’t affect other images using the .rimage-wrapper and .rimage__image classes.
Hi Alex,
Im sorry to bother you one last time, however i can’t seem to find out how to assign a unique class to the product image element. Can you help me out on this one? Your work is much appreciated!
Robert
@Meyro no worries! You can find the image element in the product-template.liquid file of your Shopify theme. This article should be of help Editing theme code · Shopify Help Center
Here’s the element you’re looking for:
Hi Alex,
That was what i was looking for too, however i cannot seem to find it in the product-template.liquid. Here’s the complete template;
<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
<div class="container product-detail very-large-row-under">
<div class="page-width">
<div class="product-layout-grid">
<div class="product-layout-grid__images layout--{{ section.settings.media_layout }} {% if product.media.size > 1 %}has-multiple-images{% endif %}" data-product-image-layout="{{ section.settings.media_layout | split: '-' | first }}">
<div class="product-detail__images-container">
{% if product.media.size > 0 %}
<div class="product-detail__images">
{% for media in product.media %}
<div class="product-detail__image">
{%- if media.media_type == 'image' -%}
<a href="{{ media.preview_image.src | img_url: 'master' }}"
data-product-image
data-product-media
data-media-id="{{ media.id }}"
data-image-w="{{ media.preview_image.width }}"
data-image-h="{{ media.preview_image.height }}"
class="global-border-radius">
{%- else -%}
<div class="global-border-radius" data-product-media data-media-id="{{ media.id }}">
{%- endif -%}
{%- render 'media', media: media -%}
{%- unless media.media_type == 'image' -%}
</div>
{%- else -%}
</a>
{%- endunless -%}
</div>
{% endfor %}
</div>
{% else %}
{% render 'media' with featured_media %}
{% endif %}
{%- assign models = product.media | where: 'media_type', 'model' -%}
{% if models.size > 0 %}
<script type="application/json" class="model-json">
{{- product.media | where: 'media_type', 'model' | json -}}
</script>
<button
class="view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ models.first.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden>
{%- render 'icon-3d-badge-full-color' -%}
<span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}
<div class="slick-external-controls">
<div class="slick-arrows"></div>
<div class="slick-dots"></div>
</div>
</div>
{% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
<div class="product-detail__thumbnails">
{% for media in product.media %}
<a href="{{ featured_media.preview_image | img_url: 'master' }}"
class="product-detail__thumbnail global-border-radius-small media-thumbnail media-thumbnail--media-{{ media.media_type }}"
data-media-id="{{ media.id }}"
data-product-media-thumbnail>
{% render 'responsive-image', image: media.preview_image %}
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-video-badge-full-color' -%}
</div>
{%- elsif media.media_type == 'model' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-3d-badge-full-color' -%}
</div>
{%- endif -%}
</a>
{% endfor %}
</div>
{% endif %}
</div>
<div class="product-layout-grid__detail">
<div class="product-detail__detail sticky-element">
<div class="product-detail__title-area">
<h1 class="product-detail__title">{{ product.title }}</h1>
<div class="product-detail__price product-price" data-price-wrapper>
<span class="{% if current_variant.compare_at_price > current_variant.price %}product-price__reduced{% endif %}" data-product-price>
<span class="theme-money">{{ current_variant.price | money }}</span>
</span>
{% if product.compare_at_price_max > product.price %}
<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
<span class="product-price__compare" data-compare-price>
{% if current_variant.compare_at_price > current_variant.price %}
<span class="theme-money">{{ current_variant.compare_at_price | money }}</span>
{% endif %}
</span>
{% endif %}
{% render 'unit-price', variant: current_variant %}
</div>
{%- if section.settings.show_tax_and_shipping -%}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-policies small-text">
{%- 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 -%}
{%- endif -%}
{% if section.settings.show_vendor %}
{% comment %}
Do we have a collection that has the same name as our product vendor name?
If we do, let's have the vendor link point to it.
If not, we will point to the automatic vendor collection.
{% endcomment %}
{% assign product_vendor_handle = product.vendor | handle %}
{% if collections[product_vendor_handle].handle == product_vendor_handle %}
{% assign vendor_url = collections[product_vendor_handle].url %}
{% else %}
{% assign vendor_url = product.vendor | url_for_vendor %}
{% endif %}
{% capture vendor_link %}<a href="{{ vendor_url }}" class="plain-link">{{ product.vendor }}</a>{% endcapture %}
<div class="product-detail__vendor">{{ 'products.product.vendor_html' | t: vendor: vendor_link }}</div>
{% endif %}
<div class="theme-product-reviews-summary">
<a href="#shopify-product-reviews" aria-label="{{ 'general.accessibility_labels.reviews_link' | t }}"><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span></a>
</div>
</div>
{% include 'uploadcare-fields' %}
{% capture product_description %}
<div class="large-row very-large-row-under {% if section.settings.description_position == 'above_cart' or section.settings.description_position == 'below_cart' %} product-description__no-expand{% endif %}">
{% if section.settings.show_tabs %}
<ul class="tabs">
<li class="rte--expanded-images">
<a href="#tab1">{{ 'products.product.description' | t }}</a>
</li>
{% if section.settings.tab_2_page != blank %}
<li>
<a href="#tab2">{{ pages[section.settings.tab_2_page].title }}</a>
</li>
{% endif %}
{% if section.settings.tab_3_page != blank %}
<li>
<a href="#tab3">{{ pages[section.settings.tab_3_page].title }}</a>
</li>
{% endif %}
</ul>
{% endif %}
<div id="tab1" class="rte rte--expanded-images clearfix row tab-content tab-content--active {% if section.settings.description_position == 'above_cart' or section.settings.description_position == 'below_cart' %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>
{% if section.settings.show_tabs and section.settings.tab_2_page != blank %}
<div id="tab2" class="rte row tab-content">
{{ pages[section.settings.tab_2_page].content }}
</div>
{% endif %}
{% if section.settings.show_tabs and section.settings.tab_3_page != blank %}
<div id="tab3" class="rte row tab-content">
{{ pages[section.settings.tab_3_page].content }}
</div>
{% endif %}
</div>
{% endcapture %}
{% if section.settings.description_position == 'above_cart' %}
{{ product_description }}
{% endif %}
<div>
{% if section.settings.show_type and product.type != blank %}
{%- assign product_type_handle = product.type | handle -%}
{%- if collections[product_type_handle].handle == product_type_handle -%}
{%- assign type_url = collections[product_type_handle].url -%}
{%- else -%}
{%- assign type_url = product.type | url_for_type -%}
{%- endif -%}
<div class="product-detail__type type-wrapper">
{{ 'products.product.type' | t }}
<a class="type-wrapper__type" href="{{ type_url }}">{{ product.type }}</a>
</div>
{% endif %}
{% if section.settings.show_sku %}
<div class="product-detail__sku sku-wrapper {% if product.selected_or_first_available_variant.sku == blank %}visually-hidden{% endif %}">
{{ 'products.product.sku' | t }}
<span class="sku-wrapper__sku">{{ product.selected_or_first_available_variant.sku }}</span>
</div>
{% endif %}
{% capture form_class %}product-form {% if settings.on_add_to_cart == 'ajax' %}ajax-product-form{% endif %} {% unless current_variant.available %}variant--unavailable{% endunless %}{% endcapture %}
{% form 'product', product, class: form_class %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper styled-dropdown styled-dropdown--label-{% if settings.variant_style == 'listed' %}small{% else %}inside{% endif %} row js">
<label for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
{% if settings.variant_style == 'listed' and settings.swatch_enabled and option.name == settings.swatch_option_name %}
{% capture variant_option_title %}option{{ forloop.index }}{% endcapture %}
<span class="variant-option-title">{{ current_variant[variant_option_title] }}</span>
{% endif %}
</label>
<select
id="SingleOptionSelector-{{ forloop.index0 }}"
data-single-option-selector
data-index="option{{ option.position }}"
{% if settings.variant_style == 'listed' %}data-listed{% endif %}
{% if settings.swatch_enabled and option.name == settings.swatch_option_name %}data-colour-swatch="true"{% endif %}>
{% for value in option.values %}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
{% if section.settings.size_chart_enabled and option.name == section.settings.size_chart_option_name %}
<a href="{{ pages[section.settings.size_chart_page_id].url }}" class="standard-link tiny-text size-chart-link js-size-chart-open">{{ 'products.product.show_size_chart' | t }}</a>
{% render 'size-chart' %}
{% endif %}
</div>
{% endfor %}
{% endunless %}
<select name="id" class="no-js" data-product-select aria-label="{{ 'products.product.selector_label' | t | escape }}">
{% for variant in product.variants %}
<option
{% if variant == current_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
value="{{ variant.id }}"
data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}">{{ variant.title }}</option>
{% endfor %}
</select>
<div class="product-detail__quantity-row row {% if section.settings.enable_payment_button %}with-payment-buttons{% endif %}">
<div class="quantity-wrapper styled-dropdown styled-dropdown--label-inside">
<label for="quantity-proxy" class="visually-hidden" aria-hidden="true">{{ 'products.product.quantity' | t }}</label>
<select class="quantity-proxy" id="quantity-proxy">
{% for i in (1..9) %}
<option>{{ i }}</option>
{% endfor %}
<option>10+</option>
</select>
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input class="quantity-actual" type="text" id="Quantity" name="quantity" value="1">
</div>
<img src="https://cdn.worldvectorlogo.com/logos/dhl-1.svg" alt="vrmotion-postnl-logo – EssieDarling" width="100" height="50" />
<img style="float: left;" src="https://punchclub.nl/wp-content/uploads/2016/11/ideal-logo.png" alt="ideal-logo – Punch" width="125" height="50" />
{% if section.settings.enable_payment_button %}<div class="payment-buttons">{% endif %}
<button
class="btn {% if section.settings.enable_payment_button %}btn--secondary{% else %}btn--subtle-hover{% endif %}"
type="submit"
name="add"
data-add-to-cart
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span data-add-to-cart-text>
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% if section.settings.enable_payment_button %}</div>{% endif %}
</div>
<p style="text-align: left;"><strong><span style="color: #0a445a;">Waarom Premium Paintings?</span></strong><br><span style="color: #e66215;">✓ </span><span style="color: #6caef5;"><strong>Gratis verzending</strong></span> vanaf €20<br><span style="color: #e66215;">✓ </span><span style="color: #6caef5;"><strong>Persoonlijk</strong></span> contact bij vragen<br><span style="color: #e66215;">✓ </span>Alles van A tot Z <span style="color: #6caef5;"><strong>in je pakket</strong></span><br><span style="color: #e66215;">✓ </span>Wij gebruiken <span style="color: #6caef5;"><strong>gerecycled</strong></span> plastic</p> {% if product.available and section.settings.show_backorder_text == true %}
{% render 'backorder', product: product, variant: current_variant %}
{% endif %}
{% endform %}
</div>
{% if section.settings.description_position == 'below_cart' %}
{{ product_description }}
{% endif %}
{% if section.settings.show_share_buttons %}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="container row">
<div class="reading-width reading-width--no-mobile-padding">
{% if section.settings.description_position == 'row' %}
{{ product_description }}
{% endif %}
</div>
{% unless product == empty %}
<script type="application/json" data-product-json>
{{ product | json }}
</script>
{% endunless %}
</div>
{% if settings.swatch_enabled and settings.swatch_method == 'images' %}
<style>
{%- for option in product.options -%}
{%- if option == settings.swatch_option_name -%}
{%- capture value_key -%}option{{ forloop.index }}{%- endcapture -%}
{%- capture colours -%},{%- endcapture -%}
{%- for variant in product.variants -%}
{%- capture colour_compare -%},{{ variant[value_key] }},{%- endcapture -%}
{%- unless colours contains colour_compare -%}
{%- capture colours -%}{{ colours }}{{ variant[value_key] }},{%- endcapture -%}
{%- endunless -%}
{%- endfor -%}
{%- assign colours = colours | split: ',' -%}
{%- assign non_blank_colours = 0 -%}
{%- for colour in colours -%}
{%- unless colour == blank -%}
{%- if settings.variant_style == 'listed' -%}
select[data-colour-swatch="true"] + .clickyboxes .opt--{{ colour | handle }}::after {
background-image: url({{ colour | handle | append: '.png' | file_img_url: '40x40', crop: 'center' }});
}
{%- else -%}
.select2-container .swatch-option__nugget.bg-{{ colour | handle }} {
background-image: url({{ colour | handle | append: '.png' | file_img_url: '40x40', crop: 'center' }});
}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
</style>
{% endif %}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "show_tax_and_shipping",
"label": "Show tax and shipping information",
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_type",
"label": "Show type",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": true
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_backorder_text",
"label": "Show backorder text",
"default": true,
"info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "media_layout",
"label": "Layout",
"options": [
{
"label": "List",
"value": "list"
},
{
"label": "Thumbnails - below",
"value": "thumbnails-below"
},
{
"label": "Thumbnails - left",
"value": "thumbnails-left"
}
],
"default": "list"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": {
"en": "Enable video looping"
},
"default": false
},
{
"type": "header",
"content": "Description"
},
{
"type": "select",
"id": "description_position",
"label": "Description position",
"options": [
{
"label": "Above add to cart",
"value": "above_cart"
},
{
"label": "Below add to cart",
"value": "below_cart"
},
{
"label": "Separate row",
"value": "row"
}
],
"default": "row"
},
{
"type": "checkbox",
"id": "show_tabs",
"label": "Enable tabs",
"default": false
},
{
"type": "page",
"id": "tab_2_page",
"label": "Page for tab 2"
},
{
"type": "page",
"id": "tab_3_page",
"label": "Page for tab 3"
},
{
"type": "header",
"content": "Size chart"
},
{
"type": "checkbox",
"id": "size_chart_enabled",
"label": "Show size chart",
"default": false
},
{
"type": "text",
"id": "size_chart_option_name",
"label": "Option name",
"default": "Size"
},
{
"type": "page",
"id": "size_chart_page_id",
"label": "Select page"
}
]
}
{% endschema %}
Do you have any clue where it can be?
Robert
@Meyro, sorry for the delayed response! The file structure may vary depending on the theme you’re using, so the filename may be different. You might need to contact your theme developer for help.