related products not showing pictures in Live theme

Solved
Highlighted
New Member
4 0 0

Hello

I'm having troubles setting up the related products as per the guide:

https://help.shopify.com/themes/customization/products/recommend-related-products

The related products are shown, but without the pictures.

Thank you for your help!!

0 Likes
Shopify Partner
1557 269 328

Send me you store url may be issue with your store.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
4 0 0

allweneedisdog.com

 

Thank you!

0 Likes
New Member
4 0 0

And here's the code for related-products.liquid

 

{% if section.settings.show_related_products == true %}
<hr>
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">

{% comment %}
Number of related items per row,
and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = section.settings.related_grid_num %}
{% assign number_of_rows = section.settings.related_grid_row %}

{% comment %}
Heading.
Leave blank if you don't need one.
{% endcomment %}

{% assign heading = section.settings.related_title %}

{% comment %}
Set either or both to true, if you want
to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
Collections to ignore.
Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
{% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
{% unless exclusions contains collection.handle %}
{% assign found_a_collection = true %}
{% endunless %}
{% endif %}
{% unless found_a_collection %}
{% for c in product.collections %}
{% unless exclusions contains c.handle or c.all_products_count < 2 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% break %}
{% endunless %}
{% endfor %}
{% endunless %}

{% comment %}
If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

{% assign counter = 0 %}
{% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
{% assign current_product = product %}

{% case number_of_related_products_per_row %}
{% when '1' %}
{% assign grid_item_width = '' %}
{% when '2' %}
{% assign grid_item_width = 'large--one-half medium--one-half' %}
{% when '3' %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% when '4' %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
{% when '5' %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% when '6' %}
{% assign grid_item_width = 'large--one-sixth medium--one-third small--one-half' %}
{% else %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
{% endcase %}


{% capture related_items %}
{% for product in collection.products %}
{% unless product.handle == current_product.handle %}
{% unless same_vendor and current_product.vendor != product.vendor %}
{% unless same_type and current_product.type != product.type %}

{% include 'product-grid-item' %}

{% assign counter = counter | plus: 1 %}
{% if counter == break_at %}
{% break %}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endcapture %}

{% assign related_items = related_items | trim %}

{% unless related_items == blank %}

<aside class="grid">
<div class="grid__item">
{% unless heading == blank %}
<header class="section-header">
<h2 class="section-header__title">{{ heading }}</h1>
</header>
{% endunless %}
<div class="grid-uniform">
{{ related_items }}
</div>
</div>
</aside>

{% endunless %}

{% endif %}

</div>
{% endif %}

{% schema %}
{
"name": "Related products",
"settings": [
{
"type": "checkbox",
"id": "show_related_products",
"label": "Show related products",
"default": false
},
{
"id": "related_title",
"type": "text",
"label": "Section title",
"default": "Other fine products"
},
{
"type": "select",
"id": "related_grid_num",
"label": "Products per row (Desktop)",
"default": "4",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
}
]
},
{
"type": "select",
"id": "related_grid_row",
"label": "Number of rows (Desktop)",
"default": "1",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
}
]
}
]
}
{% endschema %}

0 Likes

Success.

Shopify Partner
1557 269 328

Hi, image not showing that's because of lazy-load affecting with max-width, follow this

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.product-grid-image .lazyload__image-wrapper.no-js{ max-width: initial !important;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
1 Like
New Member
4 0 0

Thank you soooooo much!!!! 

0 Likes