How can I create a great slide show.

[Dfree45185]

I would like to create a great slide show.  I have been using Canva but want to know if there are any other ways to create a great slide show.  Please give me some ideas and I will get back with what I used and how it worked.

Thanks from David

www.watchesnjewels.com

[Ninthony]

I use slick slider:

https://kenwheeler.github.io/slick/

It's a pretty easy to implement js slider. Just requires a slight bit of coding knowledge. There's a bunch of demos underneath on all the stuff you can do with it.

Basically you include the JS file in your theme.liquid, and in your code where you want the slider to show up, say for products, you would target the container:

<div class="carousel-container">
<div class="product-container">
{% for product in collections.featured-products.products %}
<div class="product-title">
{{ product.title }}
</div>
<div class="product-image">
<img src="{{ product.images[0] | img_url: 'grande' }}">
</div>
<div class="product-price">
{{ product.price }}
</div>
{% endfor %}
</div>
<div class="product-carousel-next">Next</div>
<div class="product-carousel-prev">Prev</div>
</div>

Then target it with js:

<script>
  $('.product-container').slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 5,
    nextArrow:$('.product-carousel-next'),
    prevArrow:$('.product-carousel-prev'),
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: false

        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
</script>

[JasonC]

Hey, David!

Jason here from Shopify Support. So nice hearing from you again!

Great question. This depends on what your goal is. A slideshow section is a great section to promote your brand and engage your visitor by images. It's typically sitting at the top and directly visible to the visitors when they first visit your store. Because it's moving, it creates interest.

Since you've mentioned Canva, I'm assuming you're referring to image editing tips. If so, there're a few points that may help you with the design direction:

1. The image you use in the first place is quite important. From a market research point of view, lifestyle pictures that speak true to your brand are the ones work the best.
2. Keep in mind the readability of the images. Try to pick an image that isn't super busy with patterns and colors to start with. This will help you with the placement of the slogans/promotional phrases and increase readability.
3. Don't forget colors evoke emotion. Think carefully which color scheme you want to use in your store. A slideshow section is a part of the store but once you've started designing, you'll notice the section relates to the store as a whole. It interacts with the color in the header and the background. Here's Color, Psychology, and Design. This article goes over a general concept of how all three intertwine with each other. If you run into issues on picking up a color scheme, I recommend you to check out Coolors.co, it offers great selections of color schemes, along with their hex codes, to inspire you.
4. Just like the design tip at point 3, watch out the typefaces/fonts you select designing the images. In a store, try to avoid having too many different types of typefaces/fonts at once. Fonts, like colors, can evoke emotion as well. For instance, Sans Serif has higher readability on the web. It gives a feeling of modern and sleekness. To go more in-depth, here's Fonts & Feelings: Does Typography Connote Emotions?. Remember, consistency is the key here. When the designs are consistent, the store becomes more welcoming. 

These are some of the general guidelines when designing the images from a slideshow section and a store as a whole.

Just in case if you're referring to creating a slideshow from your theme, the theme you're currently on offers a slideshow section. You can access it by Shopify admin > Online Store > Themes > Customize. In the theme editor, on the left-hand menu, double check if the Slideshow section is already available. If it is, you just have to go ahead and edit it. Remember to click on the eye icon to make it visible. As always, don't forget to click on Save at the top right corner when you're done. 

When you have a moment, I encourage you to check out How to Design Your Online Store (with Zero Design Experience). It's a great free tutorial offering useful tips and design related guidelines that can help you create an attractive store.

I hope this information helps, however, should you have any questions, please don't hesitate to reply back here and I'd be happy to help out!

All the best,
Jason

[Dfree45185]

Thank you for the response.  I really appreciate it.

David

www.watchesnjewels.com

[Dfree45185]

Hello Jason,

Great information which I will certainly use.  I did not even know this was available.

Thank you so much,

David