How to add a slideshow to your Squarespace website

Having a big slider on your homepage can often make a great first impression for people landing on your website. Especially if you have great high quality images. And for many photographers this is a great entrance to their website as they can show a few of their best images.

You can also use a slider to bring across different information on each image or link to different blog posts with each image.

In this blog post I am explaining two different ways to insert a slider on your homepage of your Squarespace website. A video tutorial is also included.

As the third option I am also showing you how to insert a slider on any regular page.

How to add a slideshow to your Squarespace website | MNFL Design

Inserting a slider to your Squarespace website - option 1

The first option is simply by inserting a slideshow block of the gallery block section as the first element of your homepage or of course on any other page.

Adding a Slideshow block to Squarespace | MNFL Design

You just upload the images you would like for your slideshow and you can drag and drop them around to determine the order.

If you click on to Design you can then determine things like

  • whether you want the images to rotate automatically,

  • show the previous and next buttons on the images

  • Automatically crop the images - which is very good when your images are not the same size so the slider does not look like it is ‘jumping around’

  • Show thumbnails under the images to show if another image is coming after the current one

  • Show the title and description and when and where to show them.

  • And if you want the images to be linked to another page within your website or an external site and whether you want and new window to be opened.

I encourage you to play with it and see what works best for you. And of course I am demonstrating all of these options in the video tutorial.

When you are finished you always need to click apply and save.

With this option the slider will be inserted into the page and will be restricted to the site wide design style. So if you website has a border around it the border will also be around the slider. And sometimes it is nicer to have a slider that is wider and covers the whole width of the page. Then the next option comes into play.

Inserting a slider as a gallery index section - option 2

The second option how to insert a gallery is by using an index page and adding a gallery section.
It has several advantages, one of them is that you have more styling options and for many templates you can also use the parallax scrolling system.

adding-an-index-page-to-Squarespace.jpg
adding-a-gallery-section-to-an-index-page.jpg

The following Squarespace template families support index pages:

Avenue, Bedford, Brine, Flatiron, Forte, Momentum, Montauk, Pacific, Supply, Tremont, York

Check out this page to find out more about index pages, which templates support index pages and parallax scrolling option.

Once you have added the gallery page or section you can upload your images and also move them around until they are in the desired order.

The difference is that you need to adjust the look of your slider in the site styles. You go to -> Design -> Site Styles and in there you can determine the same things like with the first option. You can also determine a lot more like the style of the arrows, how and how quickly the images fade from one to the next, the width of the slider and a many other things.

site-style-options-for-index-gallery.jpg

Again I encourage you to play with it and see what you like and works for your website. The beauty is your flexibility and that you can make the slider site wide. However you always have to bear in mind that these design styles will then be set for any gallery index section that you add to your website. That means you have to plan your site in advance as you can’t use the gallery sections for displaying many images in a grid style on an index of your website.

Video Tutorial

Inserting a slider as a gallery page - Option 3.

The third option is to insert a gallery page to your website which is set to being a slider and not a grid. You just add a gallery page, add your images, determine the order and you can again determine the look of this gallery in your site styles (-> Design -> Site styles). Again you need to remember that this look is then the set look for any gallery page that you insert.

inserting-a-gallery-page.jpg
gallery-page.jpg
gallery-page-styles.jpg

When using this option you need to bear in mind that you can only insert a slideshow on your page and nothing else as this is specified to be a page. Therefore this option is probably not ideal used on your homepage and the two options above are more ideal.


Please note, I have used a template within the Brine family to show you these options as this is the template family I believe gives the most flexibility for the styling of your website. You might have less options for another template for the gallery page option.


Join the community

Newsletter blog post optin in image emilia

This is me writing blog posts every week 😊

If you enjoyed what you read just now and would like to get more tips and tricks about branding, website design, business and Squarespace straight to your inbox - sign up for my weekly Newsletter and I promise you will find help and support!

Nobody needs to be alone when starting and running a small business!

I won't send you spam and you can unsubscribe at any time. Powered by ConvertKit

These posts might also interest you: