Product images do not show; Theme: Narrative

Highlighted
New Member
2 0 0

I have added a new section.

 

The section has blocks that should look like below:

image.png

 

The issue I am getting is that if I open / view the website, the 2nd block product images are not shown. The 1st block product images are visible. 2nd block like so:

image.png

If I hover over the empty space, I can click what is supposed to be the product image area. That redirects me to the product page.

 

The really weird thing is that if I am in the "theme editor", and I click on my section called "Featured Products", the 2nd block product images are shown. If I press back and see all sections in my home page, the product images disappear again. Very very weird. Not able to find out what the issue is.

 

You can take a look at my website https://antrix-group.myshopify.com/ to see the issue.

 

The new section code is as below:

 

<form action="/cart" method="post">

	<br />
	<br />
	<br />

	{% for block in section.blocks %}  
			
		{%- assign desktopColumns = '2' -%}
		{%- assign mobileColumns = '1' -%}
		{%- assign gridClasses = 'medium-up--one-half' -%}
		
		<div class="featured-collection collection-template" data-section-id="{{ section.id }}" data-section-type="collection-template">
			<div class="page-width">
				
				<div class="custom__block-image-container" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%">
					{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
					
					<img class="custom__block-image lazyload"
						data-src="{{ img_url }}"
						data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
						data-aspectratio="{{ block.settings.image.aspect_ratio }}"
						data-sizes="auto"
						alt="{{ block.settings.image.alt | escape }}">

					<noscript>
						<img src="{{ block.settings.image | img_url: '1024x1024' }}" class="custom__block-image">
					</noscript>
				</div>
			
				<p>{{ block.settings.description }}</p>
			
				<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" grid-style="grid">
					
					{%- assign product = all_products[block.settings.product1] -%}
					{%- assign variant = product.selected_or_first_available_variant -%}
					
					<div class="card-list__column grid grid__item {{ gridClasses }}">
						
						<input class="product-form__quantity-input" type="number" id="Quantity" name="updates[{{ variant.id }}]" value="1" min="0" pattern="[0-9]*" style="padding-left: 15px; opacity: 1;">
						
						{% include 'product-card', product: product, grid_style: 'grid' %}
						
					</div>
					
					{%- assign product = all_products[block.settings.product2] -%}
					{%- assign variant = product.selected_or_first_available_variant -%}
					
					<div class="card-list__column grid grid__item {{ gridClasses }}">						
						
						<input class="product-form__quantity-input" type="number" id="Quantity" name="updates[{{ variant.id }}]" value="1" min="0" pattern="[0-9]*" style="padding-left: 15px; opacity: 1;">
						
						{% include 'product-card', product: product, grid_style: 'grid' %}
						
					</div>
					
				</div>
				
			</div>
			
		</div>
	
	{% endfor %}
	
	<div class="card-list grid" data-desktop-columns="1" data-mobile-columns="1" grid-style="grid">
		
		<div class="card-list__column card-list__column--center grid grid__item {{ gridClasses }}">
			
			<button class="btn btn--to-secondary btn--full product__add-to-cart-button" data-cart-submit="" type="submit" name="add" aria-label="Add to Cart">
				<span class="primary-text" aria-hidden="false" data-cart-primary-submit-text="">
					Add to Cart
				</span>
				<span class="secondary-text" aria-hidden="true" data-cart-secondary-submit-text="">View cart</span>
			</button>
			
		</div>
	
	</div>	
	
	<br />
	<br />
	<br />
	
</form>


{% schema %}
{
  "name": "Featured Products",
  "settings": [
    
  ],
  "blocks": [
    {
      "type": "product",
      "name": {
        "en": "Row"
      },
      "settings": [
		{
		  "type": "image_picker",
		  "id": "image",
		  "label": {
			"da": "Billede",
			"de": "Foto",
			"en": "Image",
			"es": "Imagen",
			"fi": "Kuva",
			"fr": "Image",
			"hi": "इमेज",
			"it": "Immagine",
			"ja": "画像",
			"ko": "이미지",
			"nb": "Bilde",
			"nl": "Afbeelding",
			"pt-BR": "Imagem",
			"pt-PT": "Imagem",
			"sv": "Bild",
			"th": "รูปภาพ",
			"zh-CN": "图片",
			"zh-TW": "圖片"
		  }
		},
		{
			"type": "richtext",
			"id": "description",
			"label": {
				"en": "Description"
			}
		},
        {
          "type": "product",
          "id": "product1",
          "label": {
            "da": "Produkt 1",
			"de": "Produkte 1",
			"en": "Product 1",
			"es": "Producto 1",
			"fi": "Tuote 1",
			"fr": "Produit 1",
			"hi": "उत्पाद 1",
			"it": "Prodotto 1",
			"ja": "商品 1",
			"ko": "제품 1",
			"nb": "Produkt 1",
			"nl": "Product 1",
			"pt-BR": "Produto 1",
			"pt-PT": "Produto 1",
			"sv": "Produkt 1",
			"th": "สินค้า 1",
			"zh-CN": "产品 1",
			"zh-TW": "產品 1"
          }
        },
		{
          "type": "product",
          "id": "product2",
          "label": {
            "da": "Produkt 2",
			"de": "Produkte 2",
			"en": "Product 2",
			"es": "Producto 2",
			"fi": "Tuote 2",
			"fr": "Produit 2",
			"hi": "उत्पाद 2",
			"it": "Prodotto 2",
			"ja": "商品 2",
			"ko": "제품 2",
			"nb": "Produkt 2",
			"nl": "Product 2",
			"pt-BR": "Produto 2",
			"pt-PT": "Produto 2",
			"sv": "Produkt 2",
			"th": "สินค้า 2",
			"zh-CN": "产品 2",
			"zh-TW": "產品 2"
          }
        }		
      ]
    }
  ],
  "presets": [
    {
      "name": "Featured Products",
      "category": "Custom",
	  "blocks": [
        {
          "type": "product"
        },
        {
          "type": "product"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
0 Likes