Narrative Theme. How do I add an arrow and dots to the testimonial slider?

Store Design
1

I want to add arrows and dot navigations to the testimonials section but can’t seem to figure out how to do it.

2

This post should point you in the right direction: https://community.shopify.com/c/Shopify-Design/Adding-navigational-arrows-to-a-collection-of-products-in-the/m-p/496289/highlight/true#M127585

It’s basically the same concept except instead of looping through products you just post your testimonials as the carousel content.

3

Thanks, Eric. I don’t think Narrative is using Slick Slider. I’ve tried to add slick slider, but it did not work.

4

Jaslin, I took a look at the sample of that theme in Shopify’s theme store. Just at glance it looks like they custom wrote the js that handles that section so it looks like you would need to extend their code to build in the arrow and dot navigation functions.

It would be a lot easier to rebuild that section to use a 3rd party script like Slick that already has arrow and dot navigation support.

5

Eric, I agree with you on that. However, I’ve been trying to integrate Slickr into this theme following this tutorial https://www.mattgibson.ca/howto-add-slick-slider-shopify-home-page/

For whatever reason, It just doesn’t work. Do you by any chance know of an easier way to implement Slickr into a theme? That would be God sent.

6

I’m not familiar with that method, but when need it we’ll typically just bring it in from a CDN which makes it a lot easier: https://cdnjs.com/libraries/slick-carousel

Just grab:

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

You can either try to take the existing quote section and modifying it. If you’re unfamiliar with how the sections are built in Shopify, it would be easier to just hardcode the structure in.

Basically you need to create a container and then add js to initialize slick. I’d probably just copy/paste in the content from your live site since it has all the styled classes your site uses.

  <div id="testimonials">
    <div>TESTIMONIAL_1</div>
    <div>TESTIMONIAL_2</div>
    <div>TESTIMONIAL_3</div>
  </div>

then somewhere at the bottom:

<script>
$(function(){
  $('#testimonials').slick({
    // slick options
  });
});
</script>
7

That sounds exactly like what I need. Now I just need to figure out how to do what you mentioned lol. Thanks.

8

Include the slick files into the header:

{{ '[https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css](https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css)' | stylesheet_tag }}
{{ '[https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css](https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css)' | stylesheet_tag }}
{{ '[https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js](https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js)' | script_tag }}

Add this code to where you want it to appear. The classes from narrative were added so you can just edit the placeholders.

<div id="testimonials">
  <div class="quotes-slide">
    <div class="h4 quote rte-setting"><p>"Quote 1"</p></div>
    <span class="quote__author">Quote 1 Author</span>
  </div>
  <div class="quotes-slide">
    <div class="h4 quote rte-setting"><p>"Quote 2"</p></div>
    <span class="quote__author">Quote 2 Author</span>
  </div>
</div>

Initialize the script from the footer

<script>
$(function(){
  $('#testimonials').slick({
    // slick options
  });
});
</script>

Settings for slick can be found here: http://kenwheeler.github.io/slick/#settings

You can copy/paste in all the code above to get started in the right direction. Good luck, you got this!

9

I followed your direction, I tried to get it but I couldn’t get it implemented. I reached out to a friend of mine who dabbles a bit with Shopify theme, but he mentioned, my theme doesn’t support the slick slider. I’m not sure if he’s right or just couldn’t figure out so he told me that. Have you ever heard of a theme that you couldn’t implement slick slider with?

10

If you recall the first part is adding in the files to the head which is what slick to work on your theme. Once those are loaded in your theme will support it. Slick can be implemented on any Shopify site (or any other website for that matter).

11

Hi,

Which .liquid file to post this code in. I am using the minimal theme.

Thanks

12

I followed this and it didn’t work out of the box. with the same code. Narrative theme comes in with some css for the bundled slider. You have to remove/deactivate that css (ideally use different classes for slider and slides) in order to make slick work.

Also, the left/right arrows, and the dots didn’t show for me with negative top/bottom/right values. So I had to adjust those values in my custom css.