Turn the collection list of the Dawn theme into a carousel

Store Design
, ,
1

Hello,

I’m trying to find an easy to transform the grid layout of the “collection list” section in the dawn theme into a carousel.

Thanks in advance

2 Likes
2

@augustindoublet

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?


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

{{ section.settings.title }}

{% for product in collection_main.products limit: collection_limit %}

{% endfor %}
{%- for block in section.blocks -%}
  
    {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: 1 %}
  

{%- endfor -%}

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

Thanks!

3

Hi @augustindoublet ,

For this design you need a developer to write the specific code. Or you can visit our store we have this costom code and affordable one.

Add Collection List Slider - All Shopify Themes.

Thanks!

4

Thank you for your reply. I have no idea how to proceed with flickity

5

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 reference.

6

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.

You can follow this video:

7

Do I have to download the flickity code first as you don’t go through this in your video…

8

Here is the latest custom section for adding collections slider in our store. Without using any App.

9

Just add “slider slider–desktop grid–peek” in

    To provide slider settings, I have created schema for the same

    It’s

    {
    “type”: “checkbox”,
    “id”: “swipe_on_desktop”,
    “default”: true,
    “label”: “Carousel”
    }

    If it’s true then desktop slider will be created.

    Here the how my

      tag looks like,