Why are images not displaying in my Featured Collection Slider?

Store Design
1

Images are not being displayed in the Featured Collection Slider.
Theme - Debut
Currently in Draft
Preview Link - https://umx6e608qxh6bwzo-7337377856.shopifypreview.com

2

It seems your lazy loading is not working correctly, a quick workaround hack would be adding this JavaScript code.

$(document).ready(function(){
    $(".carousel__cell").find("img").each(function(){ $(this).attr("src",$(this).attr("data-src"))})
})
3

@onestopperfumes

can you please share your code so i will check and upate

4

** @KetanKumar **
Also please tell how to make it auto slide

{% comment %}

  • Make sure you have the Flickity plugin installed and the proper license for this to function on your store
  • Plugin, licensing and documentation at https://flickity.metafizzy.co/
    {% endcomment %}

{% assign collection_main = collections[section.settings.collection_main] %}
{% assign collection_limit = section.settings.collection_limit %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: ‘x’ %}

{{ section.settings.title }}

{% for product in collection_main.products limit: collection_limit %}
{%- if product.metafields.inventory.ShappifyHidden == ‘true’ -%}{%- continue -%}{%- endif -%}
{% assign first_variant = product.selected_or_first_available_variant %}
{% assign featured_img_src=first_variant.featured_img.src | default: product.featured_image.src %}
{% assign price = first_variant.price %}
{% assign compare_at_price = first_variant.compare_at_price %}

{{ product.featured_img.alt }}
{{ product.title }}
 {% if compare_at_price > price %} {{ compare_at_price | money }}

{{ price | money }}

{% else %}

{{ price | money }}

{% endif %}
{% endfor %} {% comment %} {% for block in section.blocks %} {% assign block_product = all_products[block.settings.featured_product] %} {% assign block_first_variant = block_product.selected_or_first_available_variant %} {% assign featured_img_src=block_first_variant.featured_img.src | default: block_product.featured_image.src %} {% assign price = block_first_variant.price %} {% assign compare_at_price = block_first_variant.compare_at_price %}
{% if block.settings.featured_product != blank %} {{ block_product.featured_img.alt }} {% else %} {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}
{{ block_product.title }}
 {% if compare_at_price > price %} {{ compare_at_price | money }}

{{ price | money }}

{% else %}

{{ price | money }}

{% endif %}
{% endfor %} {% endcomment %}

{% schema %}
{
“name”: “Collection Slider”,
“settings”: [
{
“type”: “collection”,
“id”: “collection_main”,
“label”: “Choose a Collection”
},
{
“type”: “range”,
“id”: “collection_limit”,
“min”: 2,
“max”: 50,
“step”: 1,
“unit”: “.”,
“label”: “How many products to show”,
“default”: 4
},
{
“type”: “color”,
“id”: “bg”,
“label”: “Background Color”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Featured Collection Slider”
},
{
“type”: “range”,
“id”: “img_width”,
“min”: 200,
“max”: 600,
“step”: 5,
“unit”: “px”,
“label”: “Image Width”,
“default”: 200
},
{
“type”: “select”,
“id”: “cell_align”,
“label”: “Slide Alignment”,
“options”: [
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “center”
},
{
“type”: “range”,
“id”: “title_mb”,
“min”: 30,
“max”: 120,
“step”: 1,
“unit”: “px”,
“label”: “Title Margin Bottom”,
“default”: 48
},
{
“type”: “select”,
“id”: “cell_width”,
“label”: “Choose number of slides to show on start”,
“options”: [
{
“value”: “25%”,
“label”: “Four”
},
{
“value”: “20%”,
“label”: “Five”
},
{
“value”: “16.6666667%”,
“label”: “Six”
},
{
“value”: “12.5%”,
“label”: “Eight”
}
],
“default”: “25%”
},
{
“type”: “radio”,
“id”: “wrap_around”,
“label”: “Enable Wrap Around (endless scrolling)”,
“options”: [
{
“value”: “true”,
“label”: “True”
},
{
“value”: “false”,
“label”: “False”
}
],
“default”: “true”
},
{
“type”: “range”,
“id”: “mr”,
“min”: 0,
“max”: 48,
“step”: 1,
“unit”: “px”,
“label”: “Cell Margin Right”,
“default”: 16,
“info”: “Save page to see changes.”

}
],
“presets”: [
{
“name”: “Collection Slider”,
“category”: “Slider”
}
]
}

{% endschema %}

5

Hello @onestopperfumes ,
Replace this code with below code we share.

{% comment %}

  • Make sure you have the Flickity plugin installed and the proper license for this to function on your store
  • Plugin, licensing and documentation at https://flickity.metafizzy.co/
    {% endcomment %}

{% assign collection_main = collections[section.settings.collection_main] %}
{% assign collection_limit = section.settings.collection_limit %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: ‘x’ %}

{{ section.settings.title }}

{% for product in collection_main.products limit: collection_limit %}
{%- if product.metafields.inventory.ShappifyHidden == ‘true’ -%}{%- continue -%}{%- endif -%}
{% assign first_variant = product.selected_or_first_available_variant %}
{% assign featured_img_src=first_variant.featured_img.src | default: product.featured_image.src %}
{% assign price = first_variant.price %}
{% assign compare_at_price = first_variant.compare_at_price %}

{{ product.featured_img.alt }}
{{ product.title }}
 {% if compare_at_price > price %} {{ compare_at_price | money }}

{{ price | money }}

{% else %}

{{ price | money }}

{% endif %}
{% endfor %} {% comment %} {% for block in section.blocks %} {% assign block_product = all_products[block.settings.featured_product] %} {% assign block_first_variant = block_product.selected_or_first_available_variant %} {% assign featured_img_src=block_first_variant.featured_img.src | default: block_product.featured_image.src %} {% assign price = block_first_variant.price %} {% assign compare_at_price = block_first_variant.compare_at_price %}
{% if block.settings.featured_product != blank %} {{ block_product.featured_img.alt }} {% else %} {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}
{{ block_product.title }}
 {% if compare_at_price > price %} {{ compare_at_price | money }}

{{ price | money }}

{% else %}

{{ price | money }}

{% endif %}
{% endfor %} {% endcomment %}

{% schema %}
{
“name”: “Collection Slider”,
“settings”: [
{
“type”: “collection”,
“id”: “collection_main”,
“label”: “Choose a Collection”
},
{
“type”: “range”,
“id”: “collection_limit”,
“min”: 2,
“max”: 50,
“step”: 1,
“unit”: “.”,
“label”: “How many products to show”,
“default”: 4
},
{
“type”: “color”,
“id”: “bg”,
“label”: “Background Color”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Featured Collection Slider”
},
{
“type”: “range”,
“id”: “img_width”,
“min”: 200,
“max”: 600,
“step”: 5,
“unit”: “px”,
“label”: “Image Width”,
“default”: 200
},
{
“type”: “select”,
“id”: “cell_align”,
“label”: “Slide Alignment”,
“options”: [
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “center”
},
{
“type”: “range”,
“id”: “title_mb”,
“min”: 30,
“max”: 120,
“step”: 1,
“unit”: “px”,
“label”: “Title Margin Bottom”,
“default”: 48
},
{
“type”: “select”,
“id”: “cell_width”,
“label”: “Choose number of slides to show on start”,
“options”: [
{
“value”: “25%”,
“label”: “Four”
},
{
“value”: “20%”,
“label”: “Five”
},
{
“value”: “16.6666667%”,
“label”: “Six”
},
{
“value”: “12.5%”,
“label”: “Eight”
}
],
“default”: “25%”
},
{
“type”: “radio”,
“id”: “wrap_around”,
“label”: “Enable Wrap Around (endless scrolling)”,
“options”: [
{
“value”: “true”,
“label”: “True”
},
{
“value”: “false”,
“label”: “False”
}
],
“default”: “true”
},
{
“type”: “range”,
“id”: “mr”,
“min”: 0,
“max”: 48,
“step”: 1,
“unit”: “px”,
“label”: “Cell Margin Right”,
“default”: 16,
“info”: “Save page to see changes.”

}
],
“presets”: [
{
“name”: “Collection Slider”,
“category”: “Slider”
}
]
}

{% endschema %}

6

Use this code to fix the image issue and enable auto slide


{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}

{% assign collection_main = collections[section.settings.collection_main] %}
{% assign collection_limit = section.settings.collection_limit %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

{{ section.settings.title }}

{% for product in collection_main.products limit: collection_limit %}
{%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}
{% assign first_variant = product.selected_or_first_available_variant %}
{% assign featured_img_src=first_variant.featured_img.src | default: product.featured_image.src %}
{% assign price = first_variant.price %}
{% assign compare_at_price = first_variant.compare_at_price %}

##### {{ product.title }}

{% if compare_at_price > price %}
~~{{ compare_at_price | money }}~~

{{ price | money }}

{% else %}

{{ price | money }}

{% endif %}

{% endfor %}
{% comment %}
{% for block in section.blocks %}
{% assign block_product = all_products[block.settings.featured_product] %}
{% assign block_first_variant = block_product.selected_or_first_available_variant %}
{% assign featured_img_src=block_first_variant.featured_img.src | default: block_product.featured_image.src %}
{% assign price = block_first_variant.price %}
{% assign compare_at_price = block_first_variant.compare_at_price %}

{% if block.settings.featured_product != blank %}

{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

##### {{ block_product.title }}

{% if compare_at_price > price %}
~~{{ compare_at_price | money }}~~

{{ price | money }}

{% else %}

{{ price | money }}

{% endif %}

{% endfor %}
{% endcomment %}

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "collection",
"id": "collection_main",
"label": "Choose a Collection"
},
{
"type": "range",
"id": "collection_limit",
"min": 2,
"max": 50,
"step": 1,
"unit": ".",
"label": "How many products to show",
"default": 4
},
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection Slider"
},
{
"type": "range",
"id": "img_width",
"min": 200,
"max": 600,
"step": 5,
"unit": "px",
"label": "Image Width",
"default": 200
},
{
"type": "select",
"id": "cell_align",
"label": "Slide Alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
],
"default": "center"
},
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."

}
],
"presets": [
{
"name": "Collection Slider",
"category": "Slider"
}
]
}

{% endschema %}