Solved

Display Collections as Carousel slider on Desktop

Bird_on_a_Wire
Explorer
72 0 13

Hello!

 

I am currently looking for a way to display my collections in a single carousel row on desktop rather than the current grid format offered by the current "collection list" section in Dawn theme. 

 

I have installed the Flickity slider on my Dawn theme but that only allows for products from a specific collection be displayed...I would like the slider to show the collection cards themselves.

 

Does anyone know if it is possible to customise either the "collections list" section or the Flickity slider?

 

Any help would be appreciated!

 

SITE: https://ebony-design.myshopify.com/

Password: dawlaw

 

 

 

Accepted Solutions (2)
LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Bird_on_a_Wire,

When you create a new file section and add my code, it will be a 'Collection Slider' section, not a 'Featured Collection' section.

Did you change the whole code according to my post?

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

{% 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 cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"pageDots": false,
"freeScroll": true,
"contain": true,
"wrapAround": {{ wrap_around }}
}'>

{% for product in collection_main.products limit: collection_limit %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">

</div>
{% endfor %}
{%- for block in section.blocks -%}
  <div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
    {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: 1 %}
  </div>
{%- endfor -%}
</div>
</div>
</div>

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection Slider"
},
{
  "type": "select",
  "id": "image_ratio",
  "options": [
    {
      "value": "adapt",
      "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
    },
    {
      "value": "portrait",
      "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
    },
    {
      "value": "square",
      "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
    }
  ],
  "default": "square",
  "label": "t:sections.collection-list.settings.image_ratio.label",
  "info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"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."
}
],
"blocks": [
  {
    "type": "collection",
    "name": "Collection",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Select collection"
      }
    ]
  }
],
"presets": [
{
"name": "Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Bird_on_a_Wire,

Go to Assets > base.css and paste this at the bottom of the file:

#shopify-section-template--14524002631768__16643539933e8bc029 .page-width {
  max-width: 100% !important;
}
@media screen and (max-width: 749px) {
  #shopify-section-template--14524002631768__16643539933e8bc029 .carousel__cell {
    width: 100% !important;
  }
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 18 (18)

LitExtension
Shopify Partner
4860 1001 1135

Hi @Bird_on_a_Wire,

Are you trying to change this 'Collections (standard section)' section to a Flickity slider like List Products?

Please send me the code of the Flickity slider section, I will edit it for you.

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bird_on_a_Wire
Explorer
72 0 13

Hi @LitExtension 

 

Yes, I would like the  'Collections (standard section)' to be a single row Flickity slider but showing the Collections, not individual products.

 

Here is the Section code for Feature-slider.liquid

 

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

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

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"pageDots": false,
"freeScroll": true,
"contain": true,
"wrapAround": {{ wrap_around }}
}'>

{% 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 %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
<a href="{{ product.url }}">
<img class="lazy2" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ product.featured_img.alt }}" />
</a>
<a href="{{ product.url }}">
<h5>{{ product.title }}</h5>
</a>
{% if compare_at_price > price %}
<s class="product__compare-at-price">{{ compare_at_price | money }}</s>
<p class="product__product-price">{{ price | money }}</p>
{% else %}
<p class="product__product-price">{{ price | money }}</p>
{% endif %}
</div>
{% 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 %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
{% if block.settings.featured_product != blank %}
<a href="{{ block_product.url }}">
<img class="lazy2" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ block_product.featured_img.alt }}" />
</a>
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
<a href="{{ block_product.url }}">
<h5>{{ block_product.title }}</h5>
</a>
{% if compare_at_price > price %}
<s class="block-product__compare-at-price">{{ compare_at_price | money }}</s>
<p class="block-product__product-price">{{ price | money }}</p>
{% else %}
<p class="block-product__product-price">{{ price | money }}</p>
{% endif %}
</div>
{% endfor %}
{% endcomment %}
</div>
</div>
</div>

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

 

Many thanks in advance!

LitExtension
Shopify Partner
4860 1001 1135

Hi @Bird_on_a_Wire,

Please change code here:

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

{% 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 cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"pageDots": false,
"freeScroll": true,
"contain": true,
"wrapAround": {{ wrap_around }}
}'>

{% for product in collection_main.products limit: collection_limit %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">

</div>
{% endfor %}
{%- for block in section.blocks -%}
  <div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
    {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: 1 %}
  </div>
{%- endfor -%}
</div>
</div>
</div>

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection Slider"
},
{
  "type": "select",
  "id": "image_ratio",
  "options": [
    {
      "value": "adapt",
      "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
    },
    {
      "value": "portrait",
      "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
    },
    {
      "value": "square",
      "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
    }
  ],
  "default": "square",
  "label": "t:sections.collection-list.settings.image_ratio.label",
  "info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"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."
}
],
"blocks": [
  {
    "type": "collection",
    "name": "Collection",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Select collection"
      }
    ]
  }
],
"presets": [
{
"name": "Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bird_on_a_Wire
Explorer
72 0 13

Hi @LitExtension 

 

I added the changed the code as suggested but the slider is still only allowing me to select one Collection and displaying products from that category rather than allowing me to add each Collection as an individual card.

 

Here is how it is currently displaying 

 

Screenshot 2022-09-27 at 16.02.19.png

 

This is what I would like to achieve

 

Screenshot 2022-09-27 at 15.54.24.png

 

 

 

 

 

LitExtension
Shopify Partner
4860 1001 1135

Hi @Bird_on_a_Wire,

With the code I changed you can add blocks like "Collections List" section, have you tried it again?

Screenshot.png

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bird_on_a_Wire
Explorer
72 0 13

Hi @LitExtension 

 

I have added a video below of what shows up on my screen 

 

https://drive.google.com/file/d/1UJ-rdsE1gm-tQo6Rlu7N3BUvR4Tkk_jx/view?usp=sharing 

 

Also when I added the flickity slider, I added in these two sections of code as new Assets- not sure if it's relevant maybe?

 

flickity.css https://drive.google.com/file/d/1RDTcvuO2athoFsg2KudOGTZFer6nWZtz/view?usp=sharing 

 

flickity.pkgd.jshttps://drive.google.com/file/d/1aa12u7hVyHPOCCdKFlwvCz_1XbswX6zb/view?usp=sharing 

 

 

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Bird_on_a_Wire,

When you create a new file section and add my code, it will be a 'Collection Slider' section, not a 'Featured Collection' section.

Did you change the whole code according to my post?

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

{% 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 cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"pageDots": false,
"freeScroll": true,
"contain": true,
"wrapAround": {{ wrap_around }}
}'>

{% for product in collection_main.products limit: collection_limit %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">

</div>
{% endfor %}
{%- for block in section.blocks -%}
  <div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
    {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: 1 %}
  </div>
{%- endfor -%}
</div>
</div>
</div>

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection Slider"
},
{
  "type": "select",
  "id": "image_ratio",
  "options": [
    {
      "value": "adapt",
      "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
    },
    {
      "value": "portrait",
      "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
    },
    {
      "value": "square",
      "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
    }
  ],
  "default": "square",
  "label": "t:sections.collection-list.settings.image_ratio.label",
  "info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"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."
}
],
"blocks": [
  {
    "type": "collection",
    "name": "Collection",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Select collection"
      }
    ]
  }
],
"presets": [
{
"name": "Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bird_on_a_Wire
Explorer
72 0 13

Hi @LitExtension 

 

Thanks for the clarification, the slide is displaying now but not pulling any collection cards. See slider on home page titled "Featured Collection Slider (NEW)"

 

Screenshot 2022-09-28 at 10.38.48.png

LitExtension
Shopify Partner
4860 1001 1135

Hi @Bird_on_a_Wire,

did you add 'Blocks Collection' to it?

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bird_on_a_Wire
Explorer
72 0 13

@LitExtension Whoops that was blonde of me! Yes blocks are added now and the slide is starting to take shape! YAY

 

A couple of styling questions- would it be possible to make the slider stretch all the way to the edge of the screen  on a desktop  

 

Screenshot 2022-09-28 at 11.26.45.png

 

 

And then on mobile; to only show one card at a time, looks a bit cluttered when it shows multiple + arrows

 

Screenshot 2022-09-28 at 11.30.09.png

 

 

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Bird_on_a_Wire,

Go to Assets > base.css and paste this at the bottom of the file:

#shopify-section-template--14524002631768__16643539933e8bc029 .page-width {
  max-width: 100% !important;
}
@media screen and (max-width: 749px) {
  #shopify-section-template--14524002631768__16643539933e8bc029 .carousel__cell {
    width: 100% !important;
  }
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Bird_on_a_Wire
Explorer
72 0 13

Thank you @LitExtension you have been amazingly helpful and patient! Endless thanks✌️

herbovedam
Explorer
45 4 2

@Jasoliya   @NomtechSolution 

 

Hii it works well in desktop but not in mobile please help....  for refresh theme.

 

here's URL https://herbovedam.com/

 

herbovedam_0-1686305590839.pngherbovedam_1-1686305638086.png

 

NomtechSolution
Astronaut
1245 113 147

ok need to check code of this

stethscrubs
Visitor
1 0 0

I found this thread incredibly useful in setting up my own store and ran into this same problem. Too much clutter in mobile. I fixed by overwriting settings for testing purposes to section template shown above:

"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
  {
"value": "50%",
"label": "Two"
},
{
"value": "33%",
"label": "Three"
},
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},

Then I decided I needed to make it so only two slides show at a time on mobile by adding this css: 

@media screen and (max-width: 749px) {
  .carousel__cell {
    width: 50% !important;
  }

 Now desktop can show 'x' slides while mobile only shows 2 and is not cluttered.

SwapnilJ
Visitor
1 0 0

Following the tread shattered some light. I have a similar problem. I got the collections to appear using the featured collection section, however, I am struggling with getting my slider full width and also need to get rid of shadow on hover. I used the same code from the thread. but still can see the shadow active.

 

SwapnilJ_0-1691761671669.png

 

BelgiumBaitShop
Tourist
10 0 1

@LitExtension @Bird_on_a_Wire 

 

This was an awesome coding lesson! I managed to get the collection carousel to work with different collections. I am trying to backtrack to the product collection carousel, so with only 1 collection and different products in the carousel. I got one of the first codes and it works, only the product image is not showing for some reason. I have also removed the metafield check as I don't have this on my products. 

 

Could someone help me to adapt this code to make it a working product carousel? That would be awesome! 

 

Thanks in advance and have a great day! 

Here is the code I am trying to use right now for the product carousel: 

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

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

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"pageDots": false,
"freeScroll": true,
"contain": true,
"wrapAround": {{ wrap_around }}
}'>

{% 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 %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
<a href="{{ product.url }}">
<img class="lazy2" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ product.featured_img.alt }}" />
</a>
<a href="{{ product.url }}">
<h5>{{ product.title }}</h5>
</a>
{% if compare_at_price > price %}
<s class="product__compare-at-price">{{ compare_at_price | money }}</s>
<p class="product__product-price">{{ price | money }}</p>
{% else %}
<p class="product__product-price">{{ price | money }}</p>
{% endif %}
</div>
{% 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 %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
{% if block.settings.featured_product != blank %}
<a href="{{ block_product.url }}">
<img class="lazy2" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ block_product.featured_img.alt }}" />
</a>
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
<a href="{{ block_product.url }}">
<h5>{{ block_product.title }}</h5>
</a>
{% if compare_at_price > price %}
<s class="block-product__compare-at-price">{{ compare_at_price | money }}</s>
<p class="block-product__product-price">{{ price | money }}</p>
{% else %}
<p class="block-product__product-price">{{ price | money }}</p>
{% endif %}
</div>
{% endfor %}
{% endcomment %}
</div>
</div>
</div>

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

MRamzan
Shopify Partner
126 1 19

You can create a beautiful slider in your shopify DAWN theme or any of the Shopify free themes without any App.

Without using any third party library.

Here is the way you can follow:

 

 

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112