Dawn Slide Component

[FervEngineering]

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.

[Anthony_David_]

New Slider is available in DAWN, check Editor @FervEngineering 

Thanks 

[FervEngineering]

@Anthony_David_ Are you seeing it in your customizer? I see the code for it when I pull it locally, but it’s not available as a section or block. 

[lukezhang]

I don't see it either. Any pointer will be helpful.

[marcoswata · 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.

[FervEngineering]

@marcoswata Thanks, I found its usage in featured-collection.liquid and is used as below-looks like they created a custom HTML element for it. I'll accept your answer as the solution.

<slider-component class="slider-mobile-gutter">

[jaymewada213]

Thanks for the quick solution. Can you also explain how can we enable this product slide on the desktop version also. 
I am struggling to be slider to be displayed on desktop also on the DAWN theme

[FervEngineering]

It's going to be a little bit involved to get it to work. You'll need to get the products to keep the horizontal grid and unhide the slider buttons like mobile uses. All the classes are already available, but you might want to make an alternate version so it's not confusing when someone's trying to debug and they see class="mobile-xxx" when the viewport is at desktop size.

[smj_90]

I tried everything, by playing with classes and liquid, ALAS! no workaround found!

There is a solution but no accepted! Unless, I don't copy the slider component, and duplicate it and one I call for desktop and other for mobile/tablet version, it doesn't work for desktop!

But duplicating the code is nothing but redundancy.

Does anyone has any solution yet???

[Marb]

+1 for this, still looking for a solution aswell. Hope this gets updated soon

[shadowsfall118]

I have achieved adding a slider to the product page images by using the slick slider.

Notes:

• This requires adding code and not editing any of the existing.
• The click to enlarge still works from the existing code.
• Works on mobile

There is 4 files to edit:

1. main-product.liquid
2. section-main-product.css
3. header.liquid
4. footer.liquid  

Step 1: For main-product.liquid add the following and comment / remove the "<slider-component class="slider-mobile-gutter">" start and end tags. Add the below code before the <slider-component class="slider-mobile-gutter"> tag we removed or commented out.

<section class="lazy slider" data-sizes="50vw">
{%- for media in product.media -%}
<div>

{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
</li>
{%- endunless -%}

</div>
{%- endfor -%}
</section>

Step 2: For section-main-product.css add the following to the bottom of the file

.slider {
width: 80%;
margin-left:auto;
margin-right:auto;
}

.slick-slide {
margin: 0px 20px;
}

.slick-slide img {
width: 100%;
}

.slick-prev:before,
.slick-next:before {
color: black;
}

.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}

.slick-active {
opacity: .5;
}

.slick-current {
opacity: 1;
}

Step 3: For header.liquid add the following just after {%- endif -%} on line 9

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>

Step 4: For footer.liquid add the following to the end of the file

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {

$(".lazy").slick({
lazyLoad: 'ondemand', // ondemand progressive anticipated
infinite: true
});
});
</script>

[smj_90]

That's like adding more code to the theme!

Since DAWN is the fastest theme, why to burden it with more code.

There should be a way to use that <slider-component> in desktop mode too!

[shadowsfall118]

@smj_90 for sure it's adding more but not too much. I didn't notice any impact on performance. I started to look into how to implement the built-in slider component but it would take alot of time I don't have to figure out what CSS @media quires need to be modified or disabled for force showing it on desktop. Not to mention any other code that may be altering how it looks.

For now I think this will have to do as the best free option as I did not come across any other step by step solutions. I came across the barstool dev one but for the life of me couldn't get it to work. 

[oliverjames]

The slideshow works but the images still stay below it which is annoying..

[j1419]

@shadowsfall118 Your solution has been the only one that I have seen that works to implement a slider on Dawn's product page. Very detailed instructions worked great. Thanks

[made4Uo]

Hi,

Fortunately, I manage to customize the Dawn code and added a product slider. I preserve the slider-component code and mostly customize the CSS. Oh I added a javascript code also so when you click the image, the large image container should show the clicked image. Not only that, my product images has different heights, so I added a code so that the slider adjust to the height of the large image. Do not worry. I don't work with any app or any website.  The code is free. Just give me a thumbs up if I solve your problem. 

Grab the code here with instructions https://made4uo.com/blogs/journey-to-awesome-shopify-website/product-slider-for-dawn-theme

[marcoswata]

@made4Uo nice work!

I've quickly put together a version of a simple desktop slideshow for the Dawn theme here:

https://dawn-slideshow.myshopify.com/products/example-t-shirt

Password: rohwah

It's not the best way of doing that, but it's an easy one for those who are not used to coding.

Code in github

Basically:

1. sections/main-product.liquid

• add  the classes slider--desktop slider--tablet  to the <ul> element
• remove the whole {% if %}..{% endif %} statement from the div.product element

2. assets/component.slider.css (probably easier if you just copy the source code):

• replicate the existing code for .slider.slider--mobile  to our newly created class .slider.slider--desktop

3.  snippets/product-thumbnail.liquid (optional; for fixed image dimensions):

• wherever you see img_url: '<number>x', replace it with img_url: '<number>x<number>'. E.g. img_url: '288x
• for each .product__media.media element, change the padding-top to padding-top:100%; 

[shadowsfall118]

@made4Uo I followed your guide with a base dawn theme as I like how you implemented the thumbnails but i'm not getting the large main image (only thumbnails). Any thoughts?

[StewartM]

@made4Uo

I also have the same problem, i have even tried deleting and copying the entire css text that is on the website, as this is probably a direct copy from your dev site - i thought it was me. The css file in the video and the one on the site are different, but only because with the cut and paste one you include all the code that has been commented out i think. 

I have gone step by step by with the video and also by just following the steps on the page, it is a fresh "Dawn" install so no other customisations have taken place as yet. 

I think there is a problem with the css style sheet or the script as it doesnt appear to be calling or linking up with the large image in any way, certainly the large image isnt displayed and the slider does not move. 

When you do the first step you are left with giant product images on the product page, which is fine, then you implement the css file and the images shrink to what you would expect the ones along the bottom of the carousel (but with no large image showing). This at least does seem have a slide component that works, but when you change the global.js file to "3" and "4" the slider stops moving and you are left with 4 (or however many images you have on your product page) thumbnail images that just run along the bottom....

I have included a screenshot to show you what i mean, if you could take a look at your code or even try it on a fresh dawn install that would be great as others have shown how to do a slider on the main product images, which is great, but i need a carousel for a design i am working on. 

Thanks 

[made4Uo]

Hi, 

Thank you for letting me know. The large image is the original image from Dawn, which has the modal, the zoom bottom. I edited the new Dawn theme, which is unedited. 

The bold code is responsible for the big image. The red code is from Dawn. Take note too. In the video, I did not comment out the whole CSS file. Can you post your code?

<section class="page-width">

        <div class="product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">

          <div class="grid__item product__media-wrapper">

            <div class="slider-container" >

            <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">

            {{ "accessibility.skip_to_product_info" | t }}

            </a>

            <ul class="large-image" id="large-image">

                {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}

                {%- if product.selected_or_first_available_variant.featured_media != null -%}

                {%- assign media = product.selected_or_first_available_variant.featured_media -%}

                {%- for media in product.media -%}

                <li class="large-image-item product__media-item grid__item slider__slide

                    {% if media.media_type != 'image' %}

                    product__media-item--full{% endif %}"

                    data-media-id="{{ section.id }}-{{ media.id }}">

                    {% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}

                    </li>

                {%- endfor -%}

                {%- endif -%}

                </ul>

      <slider-component >

                <ul class="product-slider-box slider" role="list">

                    {%- for media in product.media -%}

                    <li class="product-slider slider__slide">

                        <img class="slide-image"

                        onclick="newLargeImage(this)"

                        data-thumb-id="{{ section.id }}-{{ media.id }}"

                        src="{{ media.preview_image | img_url: 'large', scale: 4 }}"

                        alt="{{ thumbnailAlt }}">

                    </li>

                {% endfor %}

                </ul>

          <div class="slider-buttons no-js-hidden{% if product.media.size < 2 %}

            small-hide{% endif %}">

            <button type="button" class="slider-button slider-button--prev bigger-slider" 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">{% if section.settings.hide_variants %}{{ product.media.size | minus: variant_images.size | plus: 1 }}{% else %}{{ product.media.size }}{% endif %}</span>

              </div>

            <button type="button" class="slider-button slider-button--next bigger-slider" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>

          </div>

          </slider-component>

      </div>