Products related strange image size

[Guigui123]

Hello, i have a problem with the featured product pictures. The images are very small and on the demo the images are normal.

Can you help me please, thanks in advance 🙂

[Harry]

Hi Guigui,

Please add below code to Theme Cusomize > Theme Settings > Custom Code > Custom CSS

.slick-list {width: 100%;}

And replace code in sections > product-related.liquid with below code

{% if section.settings.show_related_products == true %}
<div class="mb__60 related-products" data-section-id="{{ section.id }}" data-section-type="product-related" data-enable-history-state="true">
	{%- assign container = section.settings.full_width -%}
	{% assign number_of_related_products_per_row = section.settings.related_grid_num | plus: 0 %}
	{% assign heading = section.settings.related_title %}
	{% assign same_vendor = false %}
	{% assign same_type = false %}
	{% assign counter = 0 %}

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

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

	{% if found_a_collection %}

		{% assign current_product = product %}
		
		{% 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 %}
							{% assign counter = forloop.length | minus: 1 %}
							<div class="jas-col-xs-12">
								{% include 'product-grid-item' %}
							</div>
						{% endunless %}
					{% endunless %}
				{% endunless %}
			{% endfor %}
		{% endcapture %}

		{% assign related_items = related_items | trim %}

		{% unless related_items == blank %}
			{% capture slick %}
				data-slick='{"slidesToShow": {{ number_of_related_products_per_row }}, "slidesToScroll": {{ number_of_related_products_per_row }}, "dots": true, "arrows": false, {% if settings.enable_rtl %}"rtl": true, {% endif %}"responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 3, "slidesToScroll": 3}}, {"breakpoint": 569,"settings":{"slidesToShow": 2, "slidesToScroll": 2}}]}'
			{% endcapture %}
			{% assign slick_class = ' slick' %}
			{% unless container %}<div class="jas-container">{% endunless %}
				{% unless heading == blank %}
					<div class="section-header center-xs">
						<h2 class="pr dib fs__24 mg__0 fs__14">{{ heading }}</h1>
					</div>
				{% endunless %}
				<div class="jas-row{{ slick_class }}" {{ slick }}>
					{{ related_items }}
				</div>
			{% unless container %}</div>{% endunless %}
		{% endunless %}
	{% endif %}
  
</div>
{% endif %}

{% schema %}
	{
		"name": "Related products",
		"settings": [
			{
				"type": "checkbox",
				"id": "show_related_products",
				"label": "Show related products",
				"default": false
			},
			{
				"type": "checkbox",
				"id": "full_width",
				"label": "Full width section?"
			},
			{
				"id": "related_title",
				"type": "text",
				"label": "Section title",
				"default": "Other fine products"
			},
			{
				"type": "select",
				"id": "related_grid_num",
				"label": "Products per row",
				"default": "4",
				"options": [
					{
						"value": "2",
						"label": "2"
					},
					{
						"value": "3",
						"label": "3"
					},
					{
						"value": "4",
						"label": "4"
					},
					{
						"value": "6",
						"label": "6"
					}
				]
			}
		]
	}
{% endschema %}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts