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
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>
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:
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
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
5m ago | ||
27m ago | ||
30m ago | ||
32m ago | ||
an hour ago |