Product slideshow section for Brooklyn Theme homepage

Shopify Expert
2683 67 676

Here is my attemp at creating a new section for Brooklyn theme (may be suitable for other themes as well with minimal tweaking).

The section picks up several first products from the specified collection and does a slideshow of them.

Just add a new section with the name product-slider.liquid and paste the code from this post down below.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
2 Likes
Excursionist
46 1 2

Thank you so much, makes so much more sense to me now. You have been extremely helpful.

0 Likes
Shopify Partner
8 0 2

Thank you so much, I've been looking for something like this for a long time!

I have a problem if I activate the sale badge , the top margin is cut out. DO you have a solution to this?

 

0 Likes
Shopify Partner
8 0 2

This is how it looks like.

2 Likes
Excursionist
46 1 2

Hey Sandra - Looks like a CSS edit, can you provide link to that page so I can take a look?

0 Likes
Shopify Expert
2683 67 676

Sandra, that's exactly why I have a checkbox to hide sale and sold-out labels :)

The label is set to be partially outside the product rectangle, and slider library cuts it out. What can possibly be done is to move them to be fully inside. Try changing this code:

      {%- if section.settings.home_slider_hidelables -%}
      	<style>
          div#slick-{{ section.id }} .grid-product__sold-out,.grid-product__on-sale { 
              display: none; 
          }
        </style>
      {%- endif -%}

to be like this:

{%- if section.settings.home_slider_hidelables -%}
      	<style>
          div#slick-{{ section.id }} .grid-product__sold-out,.grid-product__on-sale { 
            display: none; 
          }
        </style>
      {% else %}
      	<style>
          div#slick-{{ section.id }} .grid-product__sold-out,.grid-product__on-sale { 
            top:0;
            left:0;
          }
        </style>

      {%- endif -%}

These top and left are -8px initially.

PS. Pantofi sounds sweet. Not like'em shooooes :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Partner
8 0 2

Thank you so much :) I fixed the problem and now the labels look perfect.

The problem I just observed is that it's not mobile responsive, the product photos are very small and the badges are way to big (i'm guessing because there are 4 photos displayed instead of 1 or 2)

If it's possible I would like to find a solution so the products on mobile are displayed like in the attached photo.(2 per row with slider arrows)

P.S: Pantofi means shoes in romanian language :)

0 Likes
Shopify Partner
8 0 2

This is how it looks now.

0 Likes
Shopify Expert
2683 67 676

Sandra, can you share your storefront password so I can see it working -- i do not have this implemented at the moment, so nowhere to check...

I'd try to change this part

        _slick.slick (
            {
              slidesToShow: _slick.data('slick').slidesToShow,
              slidesToScroll: 1,
              autoplay: _slick.data('slick').autoplay,
              autoplaySpeed: _slick.data('slick').autoplaySpeed
            }
          );

to be like this:

         _slick.slick (
            {
              slidesToShow: _slick.data('slick').slidesToShow,
              slidesToScroll: 1,
              autoplay: _slick.data('slick').autoplay,
              autoplaySpeed: _slick.data('slick').autoplaySpeed,
              responsive: [ 
                          {
                            breakpoint: 480,
                            settings: {
                              slidesToShow: 2
                          }
                        }
                      ]
            }
          );

I expect it to make two slides on narrow screens.

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Expert
2683 67 676

Update version:

<!-- Product slideshow section 
	 Author: timur.tairli@trezoro.com.au
---- Licence: MIT -->

<div id="CollectionSlider" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-grid-type="grid">
  <div class="wrapper">
    {% if section.settings.title != blank %}
      <div class="section-header text-center">
        <h2 class="h1 section-header__title">{{ section.settings.title }}</h2>
        <hr class="hr--small">
      </div>
    {% endif %}

    <div id="slick-{{ section.id }}" 
         class="product-slider" 
         style="display:none !important;"
         data-slick='{
                  "slidesToShow": {{section.settings.home_slider_slides}},
                  "slidesToScroll": 1,"autoplay":{{section.settings.home_slider_auto}},
                  "autoplaySpeed": {{ section.settings.home_slider_auto_speed }}}'
         >
      
      	<style>
          {% if section.settings.home_slider_hidetext %}
	          div#slick-{{ section.id }} a.grid-product__meta {display: none;}
          {% endif %}

          div#slick-{{ section.id }} .grid-product__sold-out,
          div#slick-{{ section.id }} .grid-product__on-sale { 
            {% if section.settings.home_slider_hidelables %}
                  display: none; 
            {% else %}
                  top:0;
                  left:0;
            {% endif %}
          }
        </style>
      

      {%- if section.settings.home_featured_products == blank or 
      		collections[section.settings.home_featured_products].empty? or 
      		collections[section.settings.home_featured_products].products_count == 0 -%}

      	<h4 class="text-center">Please, Select a non-empty collection.</h4>
      {%- else -%}

          {% assign grid_item_width = 'medium--one-half large--one-third' %}
          {% for product in collections[section.settings.home_featured_products].products 
          			limit: section.settings.home_slider_limit %}
            {% include 'product-grid-item' %}
          {% endfor %}

      {%- endif -%}
    </div>
  </div>
</div>

<script>
  

document.addEventListener( 'DOMContentLoaded', function () {
          $('#slick-{{ section.id }}').slick (
            {
              slidesToShow: {{section.settings.home_slider_slides}},
              slidesToScroll: 1,
              autoplay: {{section.settings.home_slider_auto}},
              autoplaySpeed: {{ section.settings.home_slider_auto_speed }},
              responsive: [ 
                        {
                            breakpoint: 480,
                            settings: {
                              slidesToShow: 2
                          }
                        }

                      ]
            }
          ).fadeIn(1500);

    }, false );
</script>

{% javascript %}

function process_slick_event(evt) {
  var _slick = $( "#" +evt.target.id + " .product-slider");
  if( _slick.length )
  {
    switch ( evt.originalEvent.type ) {
      case "shopify:section:load" : 
        console.log('Load ' + _slick.attr("id"));
        _slick.slick (
            {
              slidesToShow: _slick.data('slick').slidesToShow,
              slidesToScroll: 1,
              autoplay: _slick.data('slick').autoplay,
              autoplaySpeed: _slick.data('slick').autoplaySpeed,
              responsive: [ 
						{
                            breakpoint: 480,
                            settings: {
                              slidesToShow: 2
                          }
                        }
                      ]
            }
          );
      break; 
      case "shopify:section:unload" :
        console.log('Unload ' + _slick.attr("id"));
        _slick.slick('unslick');
      break;

     } 
  }
}
    
document.addEventListener( 'DOMContentLoaded', function () {
  $(document)
   .on( 'shopify:section:load shopify:section:unload', process_slick_event );
}, false );
{% endjavascript %}

{% schema %}
  {
    "name": "Products Slider",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Product slideshow"
      },
      {
        "type": "collection",
        "id": "home_featured_products",
        "label": "Collection"
      },
	 {
        "type": "checkbox",
        "id": "home_slider_auto",
        "label": "Auto rotate between slides",
        "default": true
      },
	  {
        "type": "select",
        "id": "home_slider_auto_speed",
        "label": "Slide changes every",
        "options": [
          {
            "value": "3000",
            "label": "3 seconds"
          },
		  {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      },
	  {
        "type": "select",
        "id": "home_slider_slides",
        "label": "How many slides to show",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          }
		  ]
		},
	  {
        "type": "select",
        "id": "home_slider_limit",
        "label": "How many products to select for slideshow",
        "options": [
          {
            "value": "6",
            "label": "6"
          },
          {
            "value": "9",
            "label": "9"
          },
          {
            "value": "15",
            "label": "15"
          }
		  ]
		},
	      {
    		"type": "checkbox",
		    "id": "home_slider_hidetext",
		    "default": false,
		    "label": "Hide Names and price?"
		  },
	      {
    		"type": "checkbox",
		    "id": "home_slider_hidelables",
		    "default": true,
		    "label": "Hide Sale and Sold Out labels?"
		  }
    ],
    "presets": [{
      "name": "Products Slideshow",
      "category": "Collection"
    }],
    "blocks" : []
  }
{% endschema %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
3 Likes