Square Aspect Ratio for images on Collection pages

Store Design
5

Hi there,

Perhaps I should take back the statement I made about being confident my abilities to code, as I’m not able to make this work…

Can I confirm, am I supposed to be using the two pieces of code in conjunction? I.e. the below / plus the piece of code for the theme.css.liquid file that you wrote in your last message???

Thanks

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

  
    {{ product.title }}
  

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  

    
 
      

        
      

    

    

  

  

  {{ product.title }}

  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}