Dawn Slide Component

Solved
FervEngineering
Excursionist
19 0 5

When reading the link below, it says Dawn will have a slider. Either I can't find it, or it hasn't been shipped in the last version. Does anyone have insight into this?

 

https://ux.shopify.com/next-generation-theme-design-5aae94f6d44c


Edit: I just found a slider example in a section named "featured-blog" which doesn't seem enabled. I don't know if it hasn't been completed yet or if we're supposed to figure out how to implement it on our own.

Accepted Solution (1)
marcoswata
Shopify Partner
114 10 28

This is an accepted solution.

There is a slider component that seems to be used on mobile only, in some sections.

The component CSS and JS can be found at:

/assets/component-slider.css

/assets/slider.js

It uses CSS Flex and you'd have to tweak the CSS to show it on desktop too.

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!

View solution in original post

Replies 75 (75)
JohnFromJotting
Shopify Partner
665 94 130

Hi @j1419 

 

I found the problem, seems like there is conflicting css elements being called.

 

In the main-product.liquid, in the product slider code.

 

Delete class="flickity-desktop" in the image tag <img class="flickity-desktop"

 

That will solve the issue. I also updated the blog to have a thumbnail slider. So you should use the new code

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

j1419
Shopify Partner
49 2 17

@JohnFromJotting Thanks for that. The code is working great on mobile now. I like this original code without the thumbnails. Have you thought about making having both versions as separate blogs? Just a thought. Thanks again 

JohnFromJotting
Shopify Partner
665 94 130

Hi @j1419 

 

To get rid of thumbnail,

 

Find and delete below

{% if product.images.size > 1 %}
      <div class="carousel product__image-thumbnail">
        {%- for media in product.images -%}
        <div class="carousel-cell">
          <img
               data-flickity-lazyload-srcset="
                                              {{ media | img_url: '1440x' }} 1440w,
                                              {{ media | img_url: '1080x' }} 1080w,
                                              {{ media | img_url: '720x' }} 767w,
                                              {{ media | img_url: '480x' }} 480w"
               sizes="(min-width: 480px) 1440px, 1080px, 767px, 480x"
               data-flickity-lazyload-src="{{ media | img_url: 'master' }}"
               alt="{{ media.alt | escape }}"
               border="0"/>
        </div>
        {%- endfor -%}
        <!--- Coded by bluish.io --->
      </div>
      {% endif %}

 

then go to the script section and replace it to the below

<script>
  var elem = document.querySelector('.carousel.product__image-slider');
  var flkty = new Flickity( elem, {
    contain: true,
    imagesLoaded: true,
    lazyLoad: 1,
    wrapAround: true,
    {% if product.images.size < 2 %}
    prevNextButtons: false,
    {% endif %}
    adaptiveHeight: true
  });
</script>

 

That should bring back the dots and you should no longer have the thumbnail.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

DB160
Shopify Partner
21 0 9

Turn the dawn featured category into a slider on the desktop in 2 easy steps.

 

1. unhide the controls on desk top. In component-slider.css change

 

@media screen and (min-width: 990px) {
  .slider-buttons {
    display: none;
  }
}

to

@media screen and (min-width: 990px) {
  #shopify-section-{{ section.id }} .slider-buttons {
     display: flex;
   }
}

2. add slider css settings for destop. In component-slider.css add

 

@media screen and (min-width: 990px) {
  .slider.slider--desktop {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--desktop .slider__slide {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

and add .slider .slider--desktop to the slider component UL in featured-category.liquid

 

I have updated the featured category section to switch netween slider and non slider mode using a checkbox in the featured category configuration settings. Update the code as below. In configuration settings sellect the show slider on desktop settings and ensure products to show is greater than 4.

 

sections . featured-category.liquid - Replace everything with

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif
-%}
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
  <div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
    <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.collection.all_products_count > 4 and section.settings.show_slider_on_desktop and section.settings.products_to_show > 4 %}slider slider--desktop{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
      {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
        <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
          {% render 'product-card',
            product_card_product: product,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
      {%- endfor -%}
    </ul>
    {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
      <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.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">{{ 'accessibility.of' | t }}</span>
          <span class="slider-counter--total">{{ products_to_display }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ section.settings.collection.url }}"
        class="button"
        aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
      >
        {{ 'sections.featured_collection.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</div>

{%- style -%}
  {%- if section.settings.collection.all_products_count > 4 and section.settings.show_slider_on_desktop and section.settings.products_to_show > 4 -%}
    @media screen and (min-width: 990px) {
      #shopify-section-{{ section.id }} .slider-buttons {
        display: flex;
      }
    }
  {%- endif -%}
{%- endstyle -%}

{% schema %}
{
  "name": "t:sections.featured-collection.name",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Featured collection",
      "label": "t:sections.featured-collection.settings.title.label"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },
    {
      "type": "checkbox",
      "id": "show_slider_on_desktop",
      "default": false,
      "label": "Enable slider on desktop"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-collection.settings.show_view_all.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.featured-collection.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "t:sections.featured-collection.settings.show_image_outline.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection.presets.name"
    }
  ]
}
{% endschema %}

 

assets  > component-slider.css - Replace everything with

slider-component {
  position: relative;
  display: block;
}

@media screen and (max-width: 989px) {
  .no-js slider-component .slider {
    padding-bottom: 3rem;
  }
}

.slider__slide {
  scroll-snap-align: start;
  flex-shrink: 0;
}

@media screen and (max-width: 749px) {
  .slider.slider--mobile {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--mobile .slider__slide {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 989px) {
  .slider.slider--tablet {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--tablet .slider__slide {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media screen and (min-width: 990px) {
  .slider.slider--desktop {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--desktop .slider__slide {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* Scrollbar */

.slider {
  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}

.no-js .slider {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

.no-js .slider::-webkit-scrollbar {
  display: initial;
}

.slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}

.slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}

.slider-counter {
  margin: 0 1.2rem;
}

.slider-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 990px) {
  .slider-buttons {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .slider--mobile + .slider-buttons {
    display: none;
  }
}

.slider-button {
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.slider-button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.slider-button .icon {
  height: 0.6rem;
}

.slider-button[disabled] .icon {
  color: rgba(var(--color-foreground), 0.3);
}

.slider-button--next .icon {
  margin-right: -0.2rem;
  transform: rotate(-90deg) translateX(0.15rem);
}

.slider-button--prev .icon {
  margin-left: -0.2rem;
  transform: rotate(90deg) translateX(-0.15rem);
}

.slider-button--next:not([disabled]):hover .icon {
  transform: rotate(-90deg) translateX(0.15rem) scale(1.07);
}

.slider-button--prev:not([disabled]):hover .icon {
  transform: rotate(90deg) translateX(-0.15rem) scale(1.07);
}

 

Hope this is useful

 

Cheers

 

Darren

 

 

TomTranzistor
Shopify Partner
59 4 12
Erno_Vegh
Shopify Partner
6 0 14

class SlideshowComponent extends SliderComponent

 

global.js