How To Increase Image Resolution in Collage.Liquid

niko585 · August 18, 2022, 1:35am

I know this question has been asked but I am not well versed in coding. In the banner image I fixed this by changing the image URL size but this code section is formatted differently. Can someone help me out?

{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-modal-video.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    ## {{ section.settings.heading | escape }}
    
      {%- for block in section.blocks -%}
        

          {%- case block.type -%}
            {%- when 'image' -%}
              

                

                  {%- if block.settings.image != blank -%}
                    
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                  {%- endif -%}
                

              

            {%- when 'product' -%}
              {% render 'card-product',
                card_product: block.settings.product,
                media_aspect_ratio: 'adapt',
                show_secondary_image: block.settings.second_image,
                extend_height: true
              %}
            {%- when 'collection' -%}
              {% render 'card-collection',
                card_collection: block.settings.collection,
                media_aspect_ratio: 'adapt',
                columns: 2,
                extend_height: true
              %}
            {%- when 'video' -%}
              
                
                
                
              

          {%- endcase -%}
        

      {%- endfor -%}
    

  

{% schema %}
{
  "name": "t:sections.collage.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Multimedia collage",
      "label": "t:sections.collage.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "options": [
        {
          "value": "left",
          "label": "t:sections.collage.settings.desktop_layout.options__1.label"
        },
        {
          "value": "right",
          "label": "t:sections.collage.settings.desktop_layout.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.collage.settings.desktop_layout.label"
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "options": [
        {
          "value": "collage",
          "label": "t:sections.collage.settings.mobile_layout.options__1.label"
        },
        {
          "value": "column",
          "label": "t:sections.collage.settings.mobile_layout.options__2.label"
        }
      ],
      "default": "collage",
      "label": "t:sections.collage.settings.mobile_layout.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "t:sections.collage.blocks.image.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.collage.blocks.image.settings.image.label"
        },
        {
          "type": "checkbox",
          "id": "image_padding",
          "default": false,
          "label": "t:sections.collage.blocks.image.settings.image_padding.label",
          "info": "t:sections.collage.blocks.image.settings.image_padding.info"
        }
      ]
    },
    {
      "type": "product",
      "name": "t:sections.collage.blocks.product.name",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "t:sections.collage.blocks.product.settings.product.label"
        },
        {
          "type": "checkbox",
          "id": "second_image",
          "default": false,
          "label": "t:sections.collage.blocks.product.settings.second_image.label"
        }
      ]
    },
    {
      "type": "collection",
      "name": "t:sections.collage.blocks.collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collage.blocks.collection.settings.collection.label"
        }
      ]
    },
    {
      "type": "video",
      "name": "t:sections.collage.blocks.video.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "cover_image",
          "label": "t:sections.collage.blocks.video.settings.cover_image.label"
        },
        {
          "type": "video_url",
          "id": "video_url",
          "accept": [
            "youtube",
            "vimeo"
          ],
          "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
          "label": "t:sections.collage.blocks.video.settings.video_url.label",
          "placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
          "info": "t:sections.collage.blocks.video.settings.video_url.info"
        },
        {
          "type": "text",
          "id": "description",
          "default": "Describe the video",
          "label": "t:sections.collage.blocks.video.settings.description.label",
          "info": "t:sections.collage.blocks.video.settings.description.info"
        },
        {
          "type": "checkbox",
          "id": "image_padding",
          "default": false,
          "label": "t:sections.collage.blocks.video.settings.image_padding.label",
          "info": "t:sections.collage.blocks.video.settings.image_padding.info"
        }
      ]
    }
  ],
  "max_blocks": 3,
  "presets": [
    {
      "name": "t:sections.collage.presets.name",
      "blocks": [
        {
          "type": "video"
        },
        {
          "type": "product"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

niko585 · August 18, 2022, 1:50am

If you would like to help, could you please let me know what you did? I am also trying to do the same with the featured products part.

niko585 · August 18, 2022, 4:07am

In addition, when I click the blurry product image in the product listing, I go to the product page which has the HD picture. Now when I click back, the image is now HD on the product listing. I tried changing to “eager” instead of lazy and did not work.

LitExtension · August 18, 2022, 4:26am

Hi @niko585 ,

Please change code here:

Code:

Hope it helps!

niko585 · August 18, 2022, 4:29pm

Did not work. I tried replacing the section you highlighted with the code. I tried replacing the code with all sections within the collage and I also tried switching to 3000 instead of master. When I click the blurry image, the product page is HD, then when I go back the blurry image is replaced with the HD image. Basically when I load the homepage it’s always blurry.

LitExtension · August 19, 2022, 4:23am

Hi @niko585 ,

Are you referring to the large right image of the ‘Backyard Vibes Collection’ section?

It’s a product image, not a banner image, so you need to change the code somewhere else.

You just need to change the code at card-product.liquid file, it will display fine. Or you can send me the code, I will guide it for you.

niko585 · August 19, 2022, 2:53pm

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  

    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}

            {% render 'price', product: card_product, price_class: '' %}
          

        

        {%- if show_quick_add -%}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.variants.size == 1 -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
          {%- endif -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}
          

        

      

    

  

{%- endif -%}

peacefulZen · April 30, 2023, 6:35pm

This fixed the issue for me. Thank you

Makeitperfect · March 28, 2024, 2:07pm

@LitExtension Hi there,

I am in need of a similar manipulation for my Product images in the actual Product pages - I’ve managed to up the definition on most areas either by increasing the px size of the image_url or by changing some digits that worked for all areas I intended to fix.

However, I am facing difficulties with getting the image quality of the product pages between the iPad and Mobile version. For iPad when I am resizing my browser the image starts off HQ then as I continue to resize the quality starts dropping down until it reaches the mobile version where the slider option turns on and at that point the quality is just terrible. I know I just need to change some integers somewhere but I’ve been digging through all product liquid files and so far I’ve not been able to fix this.

Would be very appreciated if you can guide me with this problem.

I am pasting the card-product.liquid file along with a screenshot showing the other liquid files related to products in case you think it’s something else. I’ve followed some instructions from this post https://community.shopify.com/c/shopify-design/bad-quality-images-featured-collection-mobile-layout-1-column/td-p/2442812 but its still not fixing the mobile slider product photo quality.

The code,

{% comment %}
Renders a product card

Accepts:

card_product: {Object} Product Liquid object (optional)
media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
image_shape: {String} Image mask to apply to the product image card. Values are “arch”, “blob”, “chevronleft”, “chevronright”, “diamond”, “parallelogram”, and “round”. (optional)
show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
show_vendor: {Boolean} Show the product vendor. Default: false
show_rating: {Boolean} Show the product rating. Default: false
extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
show_quick_add: {Boolean} Show the quick add button.
section_id: {String} The ID of the section that contains this card.
horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)
horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
placeholder_image: {String} The placeholder image to use when no product exists. Default: ‘product-apparel-2’ (optional)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{{ ‘component-volume-pricing.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% assign columns_desktop = section.settings.columns_desktop | default: 4 %}
{% assign columns_mobile = section.settings.columns_mobile | default: 2 %}
<img
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src=“{{ card_product.featured_media | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: columns_desktop }}px, (min-width: 990px) calc((100vw - 130px) / {{ columns_desktop }}), (min-width: 750px) calc((100vw - 120px) / {{ columns_mobile }}), calc((100vw - 35px) / {{ columns_mobile }})”
alt=“{{ card_product.featured_media.alt | escape }}”
class=“motion-reduce”
{% unless lazy_load == false %}
loading=“lazy”
{% endunless %}
width=“{{ card_product.featured_media.width }}”
height=“{{ card_product.featured_media.height }}”

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: columns_desktop }}px, (min-width: 990px) calc((100vw - 130px) / {{ columns_desktop }}), (min-width: 750px) calc((100vw - 120px) / {{ columns_mobile }}), calc((100vw - 35px) / {{ columns_mobile }})”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{%- endif -%}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }}) {{- card_product.metafields.reviews.rating_count }} {{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}

{%- endif -%}

{%- if show_quick_add -%}

{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {{ 'products.product.choose_options' | t }} {%- if horizontal_quick_add -%} {% render 'icon-arrow' %} {%- endif -%} {%- render 'loading-spinner' -%}

{% render 'icon-close' %}

{%- else -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }} {%- if horizontal_quick_add -%} {% render 'icon-plus' %} {%- endif -%} {%- render 'loading-spinner' -%} {%- endform -%} {%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- else -%} {%- liquid assign ratio = 1 if media_aspect_ratio == 'portrait' assign ratio = 0.8 endif -%}

{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{%- endif -%} {% render 'price', show_compare_at_price: true %}

{%- endif -%}

Topic		Replies	Views
Dawn Theme - Product Block within Collage Sub Menu in design mode is low resolution Store Design	5	11	August 20, 2022
How to improve the quality of a product image on homepage when linking to a product? refresh theme Store Design design	7	61	October 1, 2024
Blurry pictures on collection page - Refresh Theme Store Design collection-page , shopify-themes	7	47	October 4, 2024
Removing image compression for large product image as part of a collage on homepage. dawn theme Technical Q&A css	7	45	November 1, 2022
Homepage images low res Store Design design , css	21	94	January 20, 2025

How To Increase Image Resolution in Collage.Liquid

Topic summary

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ 'onboarding.product_title' | t }}

Related topics