Dawn Slide Component

Solved
FervEngineering
Excursionist
17 0 10

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.

Replies 59 (59)
shadowsfall118
Explorer
10 0 4

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
Excursionist
21 1 3

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
Explorer
10 0 4

@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
Excursionist
23 0 8

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

j1419
Excursionist
34 0 10

@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
Navigator
215 11 77

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

 

dawn slider.jpg

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
marcoswatanabe
Shopify Partner
37 4 9

@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%; 
If my answer was helpful then please Like and Accept Solution :)
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/
shadowsfall118
Explorer
10 0 4

@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
Tourist
4 0 1

@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 

Screenshot 2021-09-20 at 15.26.16.png

made4Uo
Navigator
215 11 77

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>
I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.