Need help: Displaying combination of product image with a plank when using product grid layout.

Highlighted
New Member
1 0 0

Hi,

I am redesigning product grid view of our shop. I would like to display product image (lets say shoe) and a plank just below the product to give a feel of shoe being placed on the plank (attached a sample image below).

NagaPydi_0-1604459298558.png

 

I am using product-card-grid.liquid, and used followed snippet to add plank image below the product (shoe) image. But, the plank image is being displayed as square and not being displayed just below the shoe. Is there a shopify grid CSS class for displaying bottom border image? Or, any other idea on how to fix the CSS for our use case?

 

<div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
...
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>
    <img src="{{ 'WhiteGlassShelf1.png' | asset_img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: 5 }}px;">

 

0 Likes