How to convert featured collection to slider?

Highlighted
Explorer
167 2 8

Hi all,

I was wondering how to add a slider to my featured collection products on my home page? Right now I've added a collection which contains 10 products however its only showing 4(max 6) of them. Is is possible to add a slider button or a slider which rotates automatically? 

 

store url: www.smartnutrition.nl or smartsnutrition.myshopify.com

password: plazay

Thanks in advance!

Niels

0 Likes
Highlighted
Shopify Partner
1083 221 284

Hello Niels,

Yes its possible but if you know liquid code.
Basic idea is  first you have to just pick any carousals or slider example and implement  in new section or in existing one and once you find its working without conflicting another part of theme then use the code of existing featured collection with this also remove limit from 6 to your desire.
Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Explorer
167 2 8
Hi,

Thanks for the answer. I know a little bit about liquid code but thats out of my league, can you make example for supply theme? I can create the liquid file and edit json sections myself..
0 Likes
Shopify Partner
798 124 408
Use slick slider to apply slider on your featured collection.
It is highly customizable and easier for new developer.
Here is the link for slick slider.
https://kenwheeler.github.io/slick/

Thank you
1 Like
Highlighted
Explorer
167 2 8

Hi,

I've tried but im unable to do it. This is how my featured collection looks like:

{% unless featured_collection_width %}
  {% assign featured_collection_width = 'small--one-half medium--one-third large--one-sixth' %}
{% endunless %}

{% unless featured_collection_size %}
  {% assign featured_collection_size = '540x' %}
{% endunless %}

{% if collections[featured].image %}
  {% assign collection_image = collections[featured].image %}
{% else %}
  {% assign collection_image = collections[featured].products.first.featured_image %}
{% endif %}
<div class="grid-item {{ featured_collection_width }}">
  {% capture collection_title %}{{ collections[featured].title | escape }}{% endcapture %}
  <a href="{{ collections[featured].url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}" class="featured-box">
    <div class="featured-box--inner">
      <div class="featured-box--image {% unless collection_image == blank %} vertical-middle{% endunless %}">
        {% if featured != blank %}
          {% if collections[featured].image or collections[featured].products.first.featured_image %}
            {%- assign image = collection_image -%}
            {%- assign max_width = width | plus: 0 -%}
            {%- assign max_height = height | plus: 0 -%}

            {%- include 'image-logic' with width: max_width, height: max_height -%}

            {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <div id="{{ wrapper_id }}" class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px;">
              <div {% if collection_image != blank %}style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"{% endif %}>
                <img class="no-js lazyload"
                  data-src="{{ img_url }}"
                  data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ collection_image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ collection_image.alt | escape }}">
              </div>
            </div>
            {% else %}
            {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
            {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
      {% unless collection_image == blank %}
      <noscript>
        <img src="{{ collection_image | img_url: '580x' }}"
          srcset="{{ collection_image | img_url: '580x' }} 1x, {{ collection_image | img_url: '580x', scale: 2 }} 2x"
          alt="{{ collection_image.alt }}" style="opacity:1;">
      </noscript>
      {% endunless %}
    </div>
    {% comment %}
    	<span class="featured-box--title">{% if collection_title != blank %}{{ collection_title }}{% else %}{{ 'homepage.featured_collection_rows.heading' | t }}{% endif %}</span>
    {% endcomment %}
  </a>
</div>

Can you build in slick slider for me..?

Niels

0 Likes
Highlighted
Tourist
4 0 2

Can you show me where to paste the codes please?

0 Likes
Highlighted
Shopify Partner
798 124 408

You need to hire a shopify developer to apply slider on collection.


@GenevaSpace wrote:

Can you show me where to paste the codes please?


 

0 Likes
Highlighted
Tourist
4 0 2

@candiSoft doesn't worth to pay extra money

0 Likes
Highlighted
Shopify Partner
798 124 408

@GenevaSpace ,

I dont mean to hire me. You can hire any other developer or ask for help to an expert.

I dont want your money. I just gave you right suggestion.


@GenevaSpace wrote:

@candiSoft doesn't worth to pay extra money


 

1 Like