Product slider with custom product image but it is not working
Hello Vaibhavi,
I can see in the above code the image is rendering from a snippet “product-list-item”. It would be great if you could provide me with the details of the file where the image code is written. It’ll help me to understand the issue.
Snippet :
{% comment %}
@Anonymous block Object
Optional object to display block attributes if used as a block
@Anonymous product Object
The product to display
@Anonymous product_image Object
Image object, can be used to override product image
@Anonymous product_image_alt String
String to show an alt tag on the image
{% endcomment %}
{% assign block = block | default: nil %}
{% assign product_image = product_image | default: nil %}
{% assign product_image_alt = product_image_alt | default: nil %}
{% assign onboard = false %}
{% assign image = false %}
{% assign image_alt = false %}
{% assign link = link | default: false %}
{% assign product = product | default: nil %}
{% if product == blank or product.empty? %}
{% assign onboard = true %}
{% endif %}
{% if link %}
{% assign current_product = link.object %}
{% else %}
{% assign current_product = product %}
{% endif %}
{% assign product_url = current_product.url %}
{% if onboard %}
{% assign product_title = ‘onboarding.product.title’ | t %}
{% assign product_url = ‘#’ %}
{% endif %}
{% assign compare_at_price = product.compare_at_price %}
{% if product_image and onboard == false %}
{% assign image = product_image %}
{% assign image_alt = product_image_alt | default: current_product.image.alt | escape | default: product_title | escape %}
{% elsif current_product.image %}
{% assign image = current_product.image %}
{% assign image_alt = current_product.image.alt | escape %}
{% else %}
{% assign image = current_product.first.featured_media.preview_image %}
{% assign image_alt = product_title | escape %}
{% endif %}
{% liquid
assign selected_variant = product.selected_variant
if product.variants.size == 1 or select_first_available_variant or product_form == false
assign selected_variant = product.selected_or_first_available_variant
endif
assign compare_at_price = selected_variant.compare_at_price
assign price = selected_variant.price
%}
{% if onboarding %}
{% assign compare_at_price = 2999 %}
{% assign price = 1999 %}
{% endif %}
{% assign on_sale = false %}
{% if compare_at_price > price %}
{% assign on_sale = true %}
{% endif %}
{% assign consistent_saved = false %}
{% capture consistent_savings %}
{%
render ‘consistent-savings’,
variants: product.variants,
on_sale: on_sale
%}
{% endcapture %}
{% if consistent_savings contains ‘true’ %}
{% assign consistent_saved = true %}
{% endif %}
Main Section :
{% style %}
#shopify-section-{{ section.id }} .product-list__content {
grid-template-columns: repeat({{ section.settings.thumbnail_columns_desktop }}, minmax(auto, 1fr));
}
@media only screen and (max-width: 860px) {
#shopify-section-{{ section.id }} .product-list__content {
grid-template-columns: repeat({{ section.settings.thumbnail_columns_mobile }}, minmax(auto, 1fr));
}
}
.product-list__container-style {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.product-list__container-style {
margin-top: {{ section.settings.margin_top }}px;
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
{% endstyle %}
{% if section.settings.title != blank %}
{{ section.settings.title | escape }}
{% endif %}
{% if section.settings.title_card_image != blank %}
{% endif %}
{% if section.blocks.size > 0 %}
#FFFFFF”
},
{
“type”: “header”,
“content”: “Call to action”
},
{
“type”: “text”,
“id”: “cta2_label”,
“label”: “Button Label”,
“default”: “See more”
},
},
{
“type”: “header”,
“content”: “Call to action”
},
{
“type”: “text”,
“id”: “cta2_label”,
“label”: “Button Label”,
“default”: “See more”
},
{
“type”: “header”,
“content”: “Overlay”
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay Color”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Overlay Opacity”,
“default”: 50
}
],
“blocks”: [
{
“type”: “product”,
“name”: “Product”,
“settings”: [
{
“id”: “product”,
“type”: “product”,
“label”: “Select Product”
},
{
“id”: “image”,
“type”: “image_picker”,
“label”: “Feature Image”
}
]
}
],
“presets”: [
{
“name”: “Custom Product List”,
“category”: “product”,
“blocks”: [
{
“type”: “product”
},
{
“type”: “product”
},
{
“type”: “product”
},
{
“type”: “product”
},
{
“type”: “product”
}
]
}
],
“disabled_on”: {
“groups”: [“*”]
}
}
{% endschema %}
Image :
Hi @Vaibhavi_Gabani ,
I can see in the above snippet there is a condition that says if image and image_alt can’t be blank. this applies to all. Can you please check that all the images must have an alt text?
{% if image and image_alt %}
{% else %}
{%- capture index -%}
{%- cycle '1', '2', '3', '4', '5', '6' -%}
{%- endcapture -%}
{{ 'product-' | append: index | placeholder_svg_tag: 'placeholder--image' }}
{% endif %}
Please share your store URL!