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
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
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
You need to hire a shopify developer to apply slider on collection.
@GenevaSpace wrote:Can you show me where to paste the codes please?
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
I am keen on doing the same thing.
@CANDISOFT is there a way I can contact you regarding hiring you to help with this?
User | Count |
---|---|
23 | |
20 | |
18 | |
16 | |
16 |