I have added a new section.
The section has blocks that should look like below:
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:
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 %}
