Why do my high-quality photos turn blurry on the Brooklyn theme?

Technical Q&A
1

Hello! I cannot seem to get a clear crisp photo uploaded unless I use my cell phone,and I’d really like to not use cell phone pics. I’m using a high quality photo, resize it to 2048. It looks good before I upload. But then it looks awful and blurry on the website. It’s the midnight blue color. https://lockkeyleathers.com/collections/cross-body-bags/products/the-vivian-satchel?variant=42065839587482

2

@Lockkeyleathers

oh sorry for issue

can you please send product page code

Go to Edit Code >>>> Section >>> product or main-product or product-section

3

Hello! This is what comes up under Section: What should I click on? Thank you!

4

@Lockkeyleathers

i need this

5 

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

{% if section.settings.image_layout == "stacked" %}
{% comment %}
Default or stacked layout
{% endcomment %}

{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}

{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

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

{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}

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

{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}

{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}

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

{% endunless %}
{% endfor %}

{% else %}
{% comment %}
Thumbnails layout
{% endcomment %}

{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

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

{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}

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

{% comment %}
Populate rest of product images with display = none, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}

{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}

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

{% endunless %}
{% endfor %}

{% comment %}
Display thumbnails
{% endcomment %}

{% for image in product.images %}
{% if product.images.size > 1 %}
- 
{% endif %}
{% endfor %}

{% endif %}

{% if section.settings.product_vendor_enable %}
## {{ product.vendor }}
{% endif %}

# {{ product.title }}

{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}

{% if current_variant.compare_at_price > current_variant.price %}
{{ '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 %}

{{ current_variant.price | money }}

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- if shop.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}

{%- endif -%}

---

{% 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 %}

{% if section.settings.product_selector == 'radio' %}

{% else %}

{% endif %}

{% endfor %}
{% endunless %}

{% if section.settings.quantity_enabled %}

{% endif %}

{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}

{% endform %}

{{ product.description }}

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

{% if collection %}

---

← {{ 'products.general.collection_return' | t: collection: collection.title }}

{% endif %}

{% unless product.empty == empty %}

{% endunless %}

{% schema %}
{
"name": {
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fr": "Pages de produits",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"pt-BR": "Páginas de produtos"
},
"settings": [
{
"type": "checkbox",
"id": "zoom_enable",
"label": {
"de": "Aktivieren des Bildzooms",
"en": "Enable image zoom",
"es": "Habilitar zoom de imagen",
"fr": "Activer le zoom sur image",
"it": "Abilita lo zoom dell'immagine",
"ja": "画像ズームを有効にする",
"pt-BR": "Ative o zoom da imagem"
}
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": {
"de": "Teilen von Produkten aktivieren",
"en": "Enable product sharing",
"es": "Habilitar compartir productos",
"fr": "Activer le partage de produits",
"it": "Permetti condivisione del prodotto",
"ja": "商品の共有を有効にする",
"pt-BR": "Habilite o compartilhamento de produtos"
},
"default": true
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": {
"de": "Produktverkäufer anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fr": "Afficher le distributeur du produit",
"it": "Indica fornitore prodotto",
"ja": "商品の販売元を表示する",
"pt-BR": "Exiba o fornecedor do produto"
}
},
{
"type": "select",
"id": "image_layout",
"label": {
"de": "Bildanzeige",
"en": "Image display",
"es": "Visualización de imagen",
"fr": "Affichage de l'image",
"it": "Visualizzazione immagine",
"ja": "画像表示",
"pt-BR": "Exibição de imagem"
},
"default": "stacked",
"options": [
{
"value": "stacked",
"label": {
"de": "Gestapelt",
"en": "Stacked",
"es": "Stacked",
"fr": "Empiler",
"it": "Elenco",
"ja": "スタックされました",
"pt-BR": "Empilhado"
}
},
{
"value": "thumbnails",
"label": {
"de": "Vorschaubilder",
"en": "Thumbnails",
"es": "Miniaturas",
"fr": "Vignettes",
"it": "Miniature",
"ja": "サムネイル",
"pt-BR": "Miniaturas"
}
}
]
},
{
"type": "header",
"content": {
"de": "Produktoptionsformular",
"en": "Product options form",
"es": "Formulario de opciones de producto",
"fr": "Formulaire d'options de produit",
"it": "Modulo delle opzioni di prodotto",
"ja": "商品オプションのフォーム",
"pt-BR": "Formulário de opções de produtos"
}
},
{
"type": "checkbox",
"id": "quantity_enabled",
"label": {
"de": "Mengenauswahl anzeigen",
"en": "Show quantity picker",
"es": "Mostrar selector de cantidad",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore di quantità",
"ja": "数量ピッカーを表示する",
"pt-BR": "Exibir seletor de quantidade"
}
},
{
"type": "select",
"id": "product_selector",
"label": {
"de": "Auswahlart",
"en": "Picker type",
"es": "Tipo de selector",
"fr": "Type de sélecteur",
"it": "Tipo di selettore",
"ja": "ピッカーの種類",
"pt-BR": "Tipo de seletor"
},
"options": [
{
"value": "radio",
"label": {
"de": "Schaltfläche",
"en": "Button",
"es": "Botón",
"fr": "Bouton",
"it": "Pulsante",
"ja": "ボタン",
"pt-BR": "Botão"
}
},
{
"value": "select",
"label": {
"de": "Dropdown",
"en": "Dropdown",
"es": "Desplegable",
"fr": "Menu déroulant",
"it": "Menu a tendina",
"ja": "ドロップダウン",
"pt-BR": "Menu suspenso"
}
}
]
},
{
"type": "header",
"content": {
"de": "Schaltfläche In den Warenkorb",
"en": "Add to cart button",
"es": "Añadir al carrito",
"fr": "Bouton d'ajout au panier",
"it": "Pulsante \"Aggiungi al carrello\"",
"ja": "カートボタンに追加する",
"pt-BR": "Botão Adicionar ao carrinho"
}
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"de": "Dynamischen Checkout-Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fr": "Afficher le bouton de passage à la caisse dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "ダイナミックチェックアウトボタンを表示する",
"pt-BR": "Exibir botão dinâmico de finalização da compra"
},
"info": {
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in Ihrem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Infos](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "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)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[もっと詳しく](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá seu método de pagamento preferido dentre os disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "select",
"id": "add_to_cart_button_size",
"label": {
"de": "Schaltflächengröße",
"en": "Button size",
"es": "Tamaño del botón",
"fr": "Taille du bouton",
"it": "Dimensione pulsante",
"ja": "ボタンのサイズ",
"pt-BR": "Tamanho do botão"
},
"default": "small",
"options": [
{
"value": "small",
"label": {
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fr": "Petit",
"it": "Piccolo",
"ja": "小",
"pt-BR": "Pequeno"
}
},
{
"value": "large",
"label": {
"de": "Groß",
"en": "Large",
"es": "grande",
"fr": "Grand",
"it": "Grande",
"ja": "大",
"pt-BR": "Grande"
}
}
]
}
]
}
{% endschema %}