Solved

Is the Dawn slide component available in the latest Shopify version?

FervEngineering
Excursionist
19 0 12

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
122 10 34

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)
StewartM
Shopify Partner
5 0 1

Thanks both of you for looking into to this so quickly and investigating, its much appreciated. 

 

I know this will help an awful lot of people who are looking to get the same functionality with the theme 🙂 

 

Thanks again @made4Uo and @shadowsfall118 

 

 

made4Uo
Shopify Partner
3804 713 1124

No problem at all. Glad to help. Thank you @shadowsfall118 for helping me modify the code

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
HamishDavisonIC
Shopify Partner
62 9 66

@made4Uo Could I ask your permission to make a YouTube video using this method? I have people literally begging me to find a solution and I've been looking for a week and finally got it working thanks to your guide

made4Uo
Shopify Partner
3804 713 1124

I did create a YouTube video in my website but due to some code changes, you might not able to follow. I will be creating a YouTube video in a few. Stay tuned. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3804 713 1124

Hi, 

For people that are looking to convert the Dawn product page with slider, please see video. Link with code in the video description. NO APP needed

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
JohnFromJotting
Shopify Partner
665 94 132

For those who want a more intuitive slider, with actual slide functionality, I've created a blog on how to add flickity onto the dawn theme, found here https://www.bluish.io/shopify/how-to-create-a-product-image-slider-on-dawn-theme

You can test it out here - https://shopify.bluish.io/products/example

It's the bare minimum, so I can take any suggestions on what functionality you'd like, and I'll keep updating it.

flickity-slider-dawn.JPG

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


To hire me, visit my Upwork profile

King-Kang
Trailblazer
148 8 76

Slider works really well!

Nice discovery! Some fresh air 🙂
Congratulations with your blog.
I will definetely follow.
Now it's time to learn a bit more with your tutorials!

Thank you

j1419
Shopify Partner
49 2 17

@JohnFromJotting The product image slider works great on desktop but my images are not showing while on the mobile viewer. My store's preview link. 

https://u6upmackdx52944s-41111158934.shopifypreview.com

LIxiao
Shopify Partner
5 0 0

Mouse can't slide

Menibig
Excursionist
16 0 5

I followed the instructions, and the slider itself works great.

But I have a problem with the slider-counter. Since I edited my Dawn theme code and changed it to Right-to-Left, I believe it's making it a little bit mixed up.

For some reason it's not showing me all numbers, but only the total-media, while the current image number is different everytime.

I added a short video to demonstrate.

Help would be appreciated.

made4Uo
Shopify Partner
3804 713 1124

Hi, 

Please update your codes. Transform you Dawn Theme in Debut theme product page for free.

Enjoy this features below:

Product slider working.
Zoom feature working.
Variant buttons connected to the large image and the product slider.
Resize your thumbnail images.
No more massive images in the product page.

Check the code here for free. No app needed. Check the video for preview

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
akatev
Tourist
9 0 1

@made4Uo 

Hi, would you be able to help with creating a second product template for pre-order?  I had it with the old theme but unable to recreate one for the new Dawn theme.  It's pretty much another template to change the button from add to cart to Pre-order.

Also, is there a way to have a pop up alert when customer adding both pre-order and in tock items in the same cart?

 

Thanks.

made4Uo
Shopify Partner
3804 713 1124

@akatev 

 

Can you tell me more about it?

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
akatev
Tourist
9 0 1

@made4Uo 

-I'm looking to have a separate product template for my pre-orders.  So instead of the Add to Cart button, we will have a Pre-order button instead.  

-The second part is for a possible pop-up alert for the shopping cart when a pre-order item is added to the cart that contain in stock item.  Typically, with mix items (in stock & Pre-order), we will have to wait until the pre-order to arrive and ship the whole order at once.  This pop up alert is to remind the buyer to not expecting the in stock items to ship right away when they are being carted and purchased along with pre-order items.  

 

Menibig
Excursionist
16 0 5

@made4Uo  Thanks! I did it and it works just fine.

The only problem is when picking a variant it is not changing the large image. What did I do wrong and how should I fix it?

And one more thing, how can I use the same slider (without numbers/pagination) with collections on the home page?

made4Uo
Shopify Partner
3804 713 1124

@Menibig 

You might have miss the step for the variant image. It is in global.js. I have a different slider for home page here

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Menibig
Excursionist
16 0 5

@made4Uo  Thanks for the fast reply.

I just re-did the step with global.js again, but it's still won't work...

made4Uo
Shopify Partner
3804 713 1124

@Menibig  it's hard to figure which one you did wrong without seeing your code. Can you message me in my website, Made4uo.com with your code?

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
smj_90
Shopify Partner
54 1 15

@made4Uo I noticed one thing while working with my theme, your code works fine with the product slider on product page, but you know what the built-in slider component which comes with the dawn theme by default is not working on mobile/tablet. 

change your code line in the slider.

onButtonClick(event) {
event.preventDefault();
const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderItems[0].clientWidth : this.slider.scrollLeft - this.sliderItems[0].clientWidth;
this.slider.scrollTo({
left: slideScrollPosition
});
}

to this

it will work then!

you can check on your own, I did it.

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
made4Uo
Shopify Partner
3804 713 1124

@smj_90 

Just FYI. The code is made to specify the use of the productSlider (the one I added). This is the code that I wrote for the onButtonClick function. 

 

onButtonClick(event) {
event.preventDefault();

if (this.productSlider) {
const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (this.slider.clientWidth): this.slider.scrollLeft - (this.slider.clientWidth);
this.slider.scrollTo({
left: Math.floor(slideScrollPosition)
});

this.currSlide = Math.round(slideScrollPosition / this.slider.clientWidth);
if (this.currSlide === 0 ) {
this.prevButton.setAttribute('disabled', true);
} else {
this.prevButton.removeAttribute('disabled');
}
if (this.currSlide === this.totalPages / 3 ) {
this.nextButton.setAttribute('disabled', true);
} else {
this.nextButton.removeAttribute('disabled');
}
} else {
const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth;
this.slider.scrollTo({
left: Math.floor(slideScrollPosition)
});
}
}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
JohnFromJotting
Shopify Partner
665 94 132

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 132

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
61 4 13

Erno_Vegh
Shopify Partner
6 0 17

class SlideshowComponent extends SliderComponent

 

global.js