Creating a Collection Carousel in Shopify the Easy Way
Studies have shown that the farther a visitor has to scroll down to see a piece of content, the less likely they are to see it at all.
That’s why you should use vertical space conservatively when designing pages for your store. For example, if you want to highlight some collections on one of your pages, you could do so with a Shopify collection carousel rather than display these collections in a grid format. This could end up saving you quite a lot of room, increasing the odds that visitors will be exposed to the rest of the content that you’ve put the effort into building out for the page.
Below, we’ll show you two ways to implement this feature on your storefront — you can use Shopify’s built-in theme editor (which may require some coding), or you could opt for a no-code solution with Shogun Page Builder.
Creating a Collection Carousel Using the Shopify Editor
The process for adding a collection carousel to one of your pages with Shopify’s built-in theme editor will depend on which theme you’re using.
Indeed, some themes already include a feature for exactly this purpose. For example, with Shopify’s new Horizon theme, you can add a collection carousel with just a few clicks. Here’s how:
- After logging in to your Shopify account, select the “Online Store” option in the left sidebar of the main control panel.
- Click on the “Customize” button that’s located just to the right of the Horizon theme (this is assuming you’ve already downloaded the theme). You’ll then be taken to Shopify’s built-in theme editor.
- By default, the theme editor will initially load up your homepage. But you could also use the dropdown menu located at the top of the editor to switch over to another one of the templates in your theme, allowing you to customize the design of your product pages, collection pages, About Us page, etc.
- Whether you choose to edit your homepage or another type of page, the next step will be to click on the “Add section” button that’s located in the “Template” section of the theme editor’s left sidebar.
- Select “Collection list: Carousel” — this will add a collection carousel to the page.
Once you’ve added this section to the page, all you need to do now is check off the collections that you want to be featured. The Horizon theme also gives you a few options for customizing the appearance of this section (e.g., you can write your own text in the heading and adjust the amount of space between each collection card).
It’s not always that easy. For example, in the popular Sense theme, you’ll find that while there is a “Collection list” section available, it doesn’t offer an option for carousel/slider navigation on the desktop version of your site — it will just display all the collections you’ve selected in a grid.
In cases like these, you’ll need to create a collection carousel section yourself with Shopify Liquid, which is the templating language used to build Shopify themes:
- Go to Shopify and select the “Online Store” option in the left sidebar of the main control panel.
- Open the “…” menu next to the theme you want to customize, then select “Edit code” — this will take you to Shopify’s code editor.
- Open the “Sections” folder in the left sidebar of the code editor and select “Add a new section”.
- Make sure “liquid” is selected, give this new section a name like “collection-carousel”, and then select “Done”.
Then, delete the default new section text and replace it with the following code:
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign collections_to_display = section.blocks | size
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = false
if section.settings.enable_desktop_slider and collections_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collection-list-wrapper isolate{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.title == blank -%}
<div class="page-width">
<div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2
id="SectionHeading-{{ section.id }}"
class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
{{ section.settings.title }}
</h2>
{%- if section.settings.show_view_all and show_mobile_slider -%}
<a
href="{{ routes.collections_url }}"
id="ViewAll-{{ section.id }}"
class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
>
{{- 'sections.collection_list.view_all' | t -}}
</a>
{%- endif -%}
</div>
</div>
{%- endunless -%}
<slider-component class="slider-mobile-gutter {% if show_desktop_slider %} slider-component-desktop{% endif %} {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul
class="slider--desktop collection-list contains-card contains-card--collection {% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet {% endif %} collection-list--{{ section.blocks.size }}-items "
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign columns = section.blocks.size
if columns > 3
assign columns = 3
endif
-%}
{%- for block in section.blocks -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="collection-list__item grid__item {% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: section.settings.image_ratio,
columns: columns,
placeholder_image: placeholder_image
%}
</li>
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
>
{% render 'icon-caret' %}
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
>
{% render 'icon-caret' %}
</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
<div
class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
<a
href="{{ routes.collections_url }}"
class="button"
id="ViewAllButton-{{ section.id }}"
aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
>
{{- 'sections.collection_list.view_all' | t -}}
</a>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "Collection carousel",
"tag": "section",
"class": "section section-collection-list",
"max_blocks": 15,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Collections",
"label": "t:sections.collection-list.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"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": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "t:sections.collection-list.settings.show_view_all.label"
},
{
"type": "header",
"content": "t:sections.collection-list.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.collection-list.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
]
}
],
"presets": [
{
"name": "Collection carousel",
"blocks": [
{
"type": "featured_collection"
},
{
"type": "featured_collection"
},
{
"type": "featured_collection"
}
]
}
]
}
{% endschema %}
Don’t forget to save your changes.
Once you’ve added this code, you’ll see that there is now a “Collection carousel” option available when you go to add a new section to a page in Shopify’s built-in theme editor.
Toggle on the “Enable carousel on desktop” option to display the pagination and arrow icons for this section (otherwise, visitors will have a horizontal scroll bar that they can use to navigate to the parts of this section that aren’t visible by default).
It should be noted that while this example works on the latest version of the Sense theme, you may need to make some adjustments to the code for it to function properly if you’re using a different theme.
And even if the code does work properly, you may still want to make some tweaks to it in order to set up the section’s appearance or functionality exactly the way you want it. That’s one of the biggest benefits of the Shopify platform — by allowing you to get under the hood and make your own edits to the theme code, you have the freedom to design just about any type of store you can imagine.
While it does help to have some web development experience when you’re digging into the code, with some research and a little trial and error you very well may be able to implement whatever solutions you have in mind. Check out our Shopify Liquid guide to learn more.
Creating a Collection Carousel Using Shogun Page Builder
Of course, figuring out how to custom-code the features you want to add to your site can often be a frustrating and time-consuming experience.
You could save yourself some trouble by using Shogun Page Builder instead. This app gives you the power to create nearly anything you want for your Shopify store without writing a single line of code.
To demonstrate, let’s review how you can use this app to add a carousel collection to your homepage. If you haven’t done so already, you’ll first need to import your homepage from Shopify into Shogun:
- Go to Shopify and select the “Apps” option in the left sidebar of the main control panel.
- Open Shogun Page Builder (assuming you’ve already installed the app).
- In the “Pages” section of Shogun Page Builder, you’ll find two tabs — “Shogun” and “Shopify”. Select “Shopify”.
- The “Shopify” tab contains all the pages you haven’t yet imported into Shogun. Set the page type filter to “Standard”, then scroll down and select the “Import page” button next to your homepage.
- Select “Import this page”.
Once your homepage has been imported, you will then be able to add your collection carousel to it:
- Your homepage will now be listed in the “Shogun” tab of the “Pages” section, along with all the other pages that have already been imported. Click on the page to open it up in the Shogun editor.
- Click on the “Elements” icon in the left sidebar of the editor (it’s the one that looks like a plus sign inside of a circle) — this will open the element library, which contains all kinds of features that you can add to the page by simply dragging them over into place.
- The “Slider” element is perfect for this use case. Click and hold on the “Slider” icon in the element library, then drop the element wherever you’d like your collection carousel to be located.
- In the right sidebar, you’ll find the settings for the “Slider” icon. Adjust the number of slides per page and the total number of slides as needed.
- You can add elements inside each slide, so you can treat them like individual collection cards and set them up however you want. For example, in each slide you could add an “Image” element that depicts an item in a collection and links to the collection page and then add a “Text” element below it to label the collection.
- Once you’re done editing, save your changes and publish the page.
Shogun provides you with many different ways to customize your collection carousel section.
In the “Slider” settings, you can determine whether the carousel loops back to the start when visitors reach the end as well as whether the carousel will start moving from one slide to the next automatically (and if so, you can set how long each slide is shown and whether the carousel is paused when the visitor hovers their cursor over it).
Also, for the controls of the carousel, you can add arrows, pick the exact color you want to use for your arrows, adjust the arrow height, add pagination dots, pick the exact color you want to use for the selected and unselected dots, adjust the size of the selected and unselected dots, etc.
And again, absolutely no coding is required.