You can use the Style Editor to customize the way products appear on your site. This is a great way to match the design and presentation of your products to your site's brand.
Product styling options vary by template. Use this guide to explore what you can style in the Classic Products Page.
The Classic Product Page is available in these templates. This list groups templates by family:
- Aviator, Aubrey, Encore
- Bedford, Anya, Bryant, Hayden
- Marquee, Adversary, Alex, Eamon, Shift
- Montauk, Julia, Kent, Om
- Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
Landing page vs. product item pages
Before styling your products, it's a good idea to understand how Squarespace structures them on all sites. Products are organized in a two-part hierarchy: Products Pages, which create a browsable landing page, and then individual product item pages. These areas share some style tweaks and have their own style options.
To learn more, visit Adding products to your store.
Style the Products Page
- Go to any Products Page on your site.
- From the Home Menu, click Design, then Style Editor.
- Use the Products tweaks to adjust the landing page style.
- For tweaks specific to individual product item pages, exit the Style Editor, open a product, then re-enter the Style Editor.
- Click any area of the page in the preview to display only the style tweaks available for that area and hide the rest.
- If you have multiple Products Pages, style changes will apply to all of them to create a consistent look.
- Your template may support additional features, such as banner images or page headers, that affect how the Products Page looks.
Visitors to your Products Page see all your products laid out in a grid. Style the grid with the Products Per Row tweak.
Use the following tweaks to style how product images display on the landing page.
- Product Item Size - Set the shape of the image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9
- Product Image Auto Crop - Choose whether the image crops to fill the image container.
- Product Background Color - This color displays behind images that aren't cropped to the container size.
Here's an example where the images aren't cropped, and the product background color is set to blue:
The price and title of each item can display on the landing page.
- Product List Titles: Under, Overlay - Set the title and price to display under the image or on hover.
- Product List Alignment: Center, Left - Align text when Product List Titles: Under is enabled.
- Show Product Price - Uncheck to hide the prices on the landing page.
- Product Overlay Color - Set the color of the on-hover overlay when Product List Titles: Overlay is selected. Adjust the slider to set transparency.
Once you add categories to your products, they can create a navigation menu at the top of the landing page. Customers can use these links to filter the products they want.
Style the category navigation with these tweaks:
- Show Category Navigation - Uncheck to hide the category navigation on item pages and the landing page.
- Category Nav Font
- Category Nav Color
- Category Nav Active Color
Classic Products Pages include some tweaks for the item page view:
- Show Product Nav - Hide or display a navigation link back to the Products Page.
- Product Social Sharing - Add Share buttons
- Product Gallery Size - Set the size of the product image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9.
- Product Gallery Auto Crop - Choose whether the product image crops to fill the image container. If not, the Product Background Color will display behind the image.
You can also choose to display the category navigation on both the item page and landing page.
Add to Cart button
Adjust the Add To Cart button with the tweaks in the Buttons section. This affects other buttons on your site, such as the Submit button in a Form Block.
- Style: Default, Solid, Outline, Raised
- Shape: Square, Rounded, Pill
- Button Color
- Text Color
The text on the Products Page follows the same style tweaks as the text on the rest of your site. For example, to change the item title font or color, adjust the Header or Heading 1 tweak. Tweak names vary by template.