How to Create a Product Slider in Squarespace (Design Hack)
Want a professional-looking product slider for your Squarespace-created online store? Our design hack lets you add a product slider your customers will appreciate.
A product slider makes browsing your inventory easier for your customers. In this article you’ll learn how to add a product slider to your ecommerce store on your Squarespace website using a design hack presented by Launch Happy.
We have to admit, it would be great if Squarespace already had a product slider option available on the home page. But even though the platform does not, our manual workaround works well while giving you plenty of flexibility.
Table of Contents in Detail Hide
How to Create a Section for Your Products
To begin, go to the Home page and create a section for your products. The goal is to highlight a few of the products you carry.
Click Edit on the Home page
Inside the Home page, create a new Section by clicking on “Add Section”
Within the section, create a List
From the menu, choose one of the List templates that has a letter “i” on the top right corner of the item – this will give you the most control and flexibility
Next, you will be adding your featured products into the content blocks of the List template you’ve selected.
Essentially, you are using a template that Squarespace provides for creating list-type sections and tweaking it to turn it into a slider for a selection of your products.
How to Edit the Product Content
Your next step is to go into the list-type section and personalize it by editing the content:
Click on “Edit Content”
You can leave the Elements the way they’re already set
Go to Content and customize the title of the section (such as, “Our Products”)
Remove the sample items from the template
Select the first “New List Item” and edit it by adding an image of one of your products to be featured, editing the title, and writing a description
Edit the Button Text for your product and add a link to the product page
When adding a product image into a New List Item, you can click on “Search Images.” This will bring up your library of images from which you can pull a product image.
Complete the Product Set
Once you’ve added your first product to the section, keep going!
Add several, making sure to customize each list item by adding a unique product image, editing the title, writing a description (it can be short), editing the Button Text, and linking the button to the respective product page.
Once you’ve added three or more products to the section you’ve created, and you’ve edited the product content for each item, you have created a product set manually, and you’re ready to work on layout design.
Design the Page Layout
After manually entering your images and writing content for each item, you’re ready to work on the design elements of your section turned product slider.
First, know that even though you’ve just created and edited your new section as a simple list, you can change it directly from your editor.
To recap, you’ve left the Elements as-is. You’ve customized the Content to reflect your products. Now you’re going to customize the Design aspect of your section. For the structure, you can choose one of the following:
Simple List
Banner Slideshow
Carousel
Go ahead and select Banner Slideshow. You’ll see that there are options to choose from for the layout width (full bleed, full, inset), the vertical padding (S, M, L), the alignment (left, centered, right), and so on.
If you have design skills, you’ll have a sense of how you’ll want your product slider to look, and you can go through this process efficiently. If you’re new at design, give yourself some time to get it just right.
After you’ve made design changes, but sure to check how the results look on mobile, tablet, and desktop screens.
If you select Carousel for the design structure of your product slider, you’ll create an infinite scroll effect that you may find appealing.
Other design elements you can experiment with include:
Max columns
Image crop
Show adjacent slides
Style (card, padding, background, etc.)
Size & space
And more
After you’ve finished exploring what you can do within Edit Content, click on the pencil icon you’ll find at the top right of the section you’re creating.
Clicking the pencil icon to edit the section lets you change the overall look and feel of the entire section, enabling you to lighten or darken the borders and change other aspects.
At every step, be sure to save your edits!
Go ahead and slide through the section you’ve just created. You’ll see that, even though it required some manual work on your part, it didn’t take you too long to create a beautiful, eye-catching product slider your customers will value.
To Learn More
If you’ve enjoyed our design hack for creating a product slider on your Squarespace ecommerce store, you’ll like the other tips and tricks you’ll find at Launch Happy.
Sign up for our newsletter chockful of insider development tips that will streamline your website-building process.
Browse through our extensive library of Squarespace and SEO guides for helpful free information.
And be sure to check out our services if you’re stuck and need expert assistance.
