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 Advanced Products Page.
The Advanced Products Page is available in the following templates. Templates are grouped by family.
- Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
- Farro family - Farro, Haute
- Skye family - Foundry, Indigo, Ready, Skye, Tudor
- Tremont family - Camino, Carson, Henson, Tremont
- York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
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.
Tip: The landing page displays item thumbnails, while product item pages display product images.
Style the Products Page
- Go to any Products Page on your site.
- From the Home Menu, click Design, then Style Editor.
- Use the tweaks in the Products sections 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 site-wide to all Products Pages 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.
Landing page style options
Visitors to your Products Page see all your products laid out in a grid. Style the grid with these tweaks:
- Items Per Row
- Item Spacing - Adjust the space between each image in the row.
The item thumbnail represents the item on the landing page.
Use the Image Aspect Ratio tweak in the Products: Layout section to set the shape of the images. The images automatically crop to fit the shape.
The price and title of each item can display on the landing page.
Mobile tweaks only appear when Position: Overlay is selected.
- Position: Under, Overlay - Set the title and price to display under the image or on hover.
- Position (Mobile): Under, Overlay - Choose where the text displays on mobile browsers.
- Alignment - Choose how the text aligns.
- Overlay Color - Set the color of the on-hover overlay when Position: Overlay is selected. Adjust the slider to set transparency.
- Overlay Padding - Further adjust the alignment of the text when set to display on hover.
- Spacing - Adjust the spacing below each row.
- Show Title - Uncheck to hide the item titles.
- Title Font
- Title Color
- Title Color (Mobile)
- Title Spacing - Set the space between the text and image when set to Position: Under.
- Show Price - Uncheck to hide prices.
- Price Font
- Price Color
- Price Color (Mobile)
- Sale Price Color
- Sale Price Color (Mobile)
- Price Spacing - Set the space between the price and the title.
Advanced Products Pages support:
- Quick View - Visitors can click a button to see more details without leaving the landing page.
- Alternate image on hover - Alternate between the main product image and a second image on hover.
- Fade on hover - Create a fade effect on hover.
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're interested in.
Note: The category navigation doesn't display on item pages.
Enable category navigation with the Display tweak in the Products: Sort + Filter section. The tweak only appears when you've added at least one product with a category label. Use this tweak to choose whether to display your navigation at the Top, Left Side, or Right Side.
Once you’ve enabled category navigation, more tweaks appear:
Products: Sort + Filter
- Width - Set the width if the category navigation is on the left or right.
- Margin - Adjust the space below the navigation.
- Item Spacing - Adjust the space between each
- Alignment: Left, Center, Right
- Active Color
Choose Display: Hide to hide the category navigation.
Item page style options
Advanced Products Pages give you fine-tuned control over the item page view display.
- Top Padding
Hide or display a breadcrumb navigation and Next and Previous links to help your customers navigate through your store.
- Nav Display: Breadcrumb Only, Pagination Only, Breadcrumb and Pagination, None
- Pagination Style: Previous/Next, Titles
- Nav Alignment: Left, Center, Right, Split
- Nav Font
- Nav Color
- Nav Separator Color
When looking at an individual item, customers see the product images. Use the following tweaks to adjust their display:
- Position: Left, Right
- Design: Slideshow, Stacked
- Aspect Ratio - Set the image shape.
- Thumbnail Alignment: Left, Center, Right - Thumbnail tweaks affect the navigation thumbnails that display under the image when Design: Slideshow is selected.
- Thumbnail Width
- Thumbnail Spacing
- Spacing - Adjust the space between images when Design: Stacked is selected.
You can also enable Image Zoom so customers can enlarge product images for a closer look. Set the zoom to activate on hover or when the image is clicked.
Adjust the image title, price, description, Share buttons, and Add To Cart button.
Tip: The body font line height also adjusts the spacing for these elements.
- Alignment: Left, Center, Right - Adjusts where the details are positioned on the page
- Show Title
- Title Font
- Title Color
- Show Price
- Price Font
- Price Color
- Sale Price Color - Adjust the color for sale items.
- Show Excerpt - Excerpt tweaks affect the item description.
- Excerpt Position: Above Price, Below Price, Below Add to Cart Button
- Excerpt Font
- Excerpt Color
- Excerpt Link Color
- Show Share Buttons - Hide or display the Share buttons. Use the tweaks in the Share Buttons section to style them.
- Show Variants
- Show Quantity - The quantity only displays when there are multiple items available.
- Style: Text-Only, Square, Rounded, Pill
- Border Color
- Background Color
- Label Font
- Label Color
- Text Color
Products: Add To Cart Button
- Show Button
- Style: Solid, Outline, Raised
- Shape: Square, Rounded, Pill
- Padding: Small, Medium, Large
- Text Color
Each template has its own shopping cart styling options. Visit your template's Structure and style guide for more information.
On sale or sold out items
Use the Products: Status Badges section of the Style Editor to adjust their background color, font, position, and shape (rectangle, square, or circle).
Note: It's not possible to customize the Status Badge font color.
Select Style: None to hide the badges.
On individual product items, the item details will say Sold Out and the Add To Cart button will be grayed out.
Product items and information stack vertically in two or more columns on smartphones, tablets, and narrow browsers.
- The landing page has unique mobile colors for item titles, prices, and sale prices.
- Currently, Quick view and Product Image Zoom aren't available on mobile.
- Visit Advanced mobile styles to learn about your template's other mobile options.