Create a Custom Collection Slider for Your Shopify Store

Are you looking to showcase your Shopify collections in a sleek, interactive slider format? Many store owners want to display their collections in a single carousel row on desktop, rather than the standard grid layout offered by the default “collection list” section in the Dawn theme. In this comprehensive guide, we’ll walk you through the process of creating a custom collection slider without relying on third-party apps.

Understanding the Challenge

The Limitations of Default Layouts

The Dawn theme, while versatile, doesn’t offer a built-in carousel option for displaying collections. This can be limiting for store owners who want to create a more dynamic and engaging presentation of their product categories.

The Need for Custom Solutions

To achieve a slider layout for collections, we need to implement a custom solution. This involves modifying theme code and utilizing JavaScript libraries to create the desired effect.

Balancing Functionality and Performance

When adding custom features to your Shopify store, it’s crucial to consider both the visual appeal and the impact on site performance. Our solution aims to strike this balance effectively.

Implementing the Collection Slider

Preparing Your Theme

Before we dive into the code, ensure you’re working on a duplicate of your theme to avoid any unintended changes to your live store. Navigate to the theme editor in your Shopify admin panel and create a copy of your current theme.

Adding the Flickity Library

Flickity is a popular JavaScript library for creating responsive, touch-friendly sliders. To use it in your Shopify theme:

Add the following script and stylesheet links to your theme’s “ section:

<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">

Creating the Custom Section

Now, let’s create a new section file for our collection slider:

In your Shopify admin, go to “Online Store” > “Themes” > “Actions” > “Edit code”
In the “Sections” folder, click “Add a new section”
Name it “collection-slider.liquid” and paste the following code:

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

Customizing the Slider

This code creates a flexible collection slider that you can customize through the theme editor. You can adjust settings like background color, title, image ratio, slide alignment, and more.

Adding Collections to the Slider

To add collections to your slider:

Add the “Collection Slider” section to your desired page in the theme editor
Click “Add block” to add a new collection to the slider
Select the collection you want to display from the dropdown menu
Repeat for each collection you want to include

Optimizing for Mobile Devices

Responsive Design Considerations

While the slider works well on desktop, it’s important to optimize it for mobile devices. By default, the slider might show multiple cards on mobile, which can look cluttered.

Adjusting Mobile Layout

To improve the mobile experience, add the following CSS to your theme’s stylesheet:

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

This ensures that only one collection card is visible at a time on mobile devices, creating a cleaner, more user-friendly experience.

Fine-Tuning Performance and Appearance

Optimizing Image Loading

To improve page load times, consider implementing lazy loading for your collection images. This can be achieved by modifying the card-collection snippet or using a lazy loading library compatible with Flickity.

Styling Enhancements

You may want to add custom styles to make your collection slider match your store’s aesthetic. Consider adjusting the following:

Card border styles
Hover effects
Arrow navigation design
Title and text styles

Full-Width Layout

If you prefer a full-width slider that extends to the edges of the screen, modify the CSS of the slider container:

.flickity-section-{{ section.id }} .page-width {
  max-width: 100% !important;
  padding: 0;
}

Troubleshooting Common Issues

Images Not Loading

If collection images aren’t appearing, double-check that your theme is correctly rendering the card-collection snippet. You may need to adjust the image URL format based on your theme’s structure.

Slider Not Functioning

Ensure that the Flickity library is properly loaded in your theme. Check your browser’s console for any JavaScript errors that might be preventing the slider from initializing.

Styling Conflicts

If the slider’s appearance doesn’t match your expectations, inspect the elements using your browser’s developer tools. Look for any conflicting styles from your theme that might be overriding the slider’s CSS.

By following this guide, you should now have a fully functional, customizable collection slider in your Shopify Dawn theme without the need for additional apps. This solution provides a sleek, interactive way to showcase your collections while maintaining control over your store’s performance and design. Remember to test thoroughly across different devices and browsers to ensure a consistent experience for all your customers.