Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Styling the Advanced Products Page

You can use the Site Styles panel 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.

Supported templates

The Advanced Products Page is available in these template families:

  • Brine
  • Farro
  • Skye
  • Tremont
  • York

Products Page vs. product details pages

Before styling your products, it's a good idea to understand how Squarespace structures them on all sites. Products are organized in two parts: Products Pages, which create a browsable Products Page, and then individual product details pages. These areas share some style tweaks and have their own style options.

To learn more, visit Adding products to your store.

Tip: The Products Page displays item thumbnails, while product details pages display product images.

Style the Products Page

  1. Go to any Products Page on your site.
  2. From the Home Menu, click Design, then Site Styles.
  3. Use the tweaks in the Products sections to adjust the Products Page style.
  4. For tweaks specific to individual product details pages, exit Site Styles, open a product, then re-enter Site Styles.


  • 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.

Products Page style options


Visitors to your Products Page see all your products laid out in a grid. Style the grid with these tweaks:

Products: Layout

  • Items Per Row 
  • Item Spacing - Adjust the space between each image in the row.

Product images

The item thumbnail represents the item on the Products 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.

Product details

The price and title of each item can display on the Products Page.

Products: Details

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.

Special effects

Advanced Products Pages support: 

  • Quick View - Click a button to see more details without leaving the Products Page.
  • Image Zoom - Enlarge product images for a closer look.
  • Hover effects - Alternate between images, show product information, or fade on hover.

Category navigation

After you add categories to your products, they can create a navigation menu at the top of the Products Page. Customers can use these links to filter the products they're interested in.

Note: The category navigation doesn't display on details 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.

After 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
  • Font
  • Color
  • Active Color

Choose Display: Hide to hide the category navigation.

Related products

Related products display in a grid at the bottom of the page. You can use these tweaks to change their appearance:

  • Items Per Row
  • Item Spacing
  • Image Aspect Ratio
  • Details Alignment: Center, Left
  • Item Title Spacing

To learn more, visit Displaying related products.

Hover effects

You can show an alternative image, product details, or a fade effect on hover. Keep in mind:

  • These templates also support Quick View and Image Zoom.
  • On mobile, item names and prices always display below the image. Alternative image and fade effects don't display.

Alternative image

To show off a special feature or key detail for each product:

  1. Add at least two images in the product editor.
  2. In the Products: Layout section of Site Styles, set Item Hover Behavior to Show Alternate Image.
Tip: If you don’t see the Item Hover Behavior tweak, select Position: Under in the Products: Details section.

The second image in the product editor shows on hover. Drag and drop the images in the product editor to set the image order. If the second image has transparent areas, the first image will be visible in those areas.


Product details

To display product information on hover, scroll to the Products: Details section of Site Styles, and set Position to Overlay.

  • If you choose this option, the Item Hover Behavior tweak disappears.
  • This replaces any hover styles you’ve set in the Products: Layout section.



To create a fade effect on hover, scroll to the Products: Layout section of Site Styles and choose Item Hover Behavior: Fade.

Tip: If you don’t see the Item Hover Behavior tweak, select Position: Under in the Products: Details section.


No effect

To display no effect on hover, select Position: Under in the Products: Details section of Site Styles, and Item Hover Behavior: None in the Products: Layout section.

Details page style options

Advanced Products Pages give you fine-tuned control over the details page view display.


Products: Layout 

  • Spacing
  • Top Padding


Hide or display a breadcrumb navigation and Next and Previous links to help your customers navigate through your store.

Products: Layout

  • 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:

Products: Gallery

  • Position: Left, Right
  • Design: Slideshow, Stacked
  • Width
  • 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.

Products: Details

  • Alignment: Left, Center, Right - Adjusts where the details are positioned on the page
  • Spacing 
  • 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.

Products: Options

Style the quantity and variants drop-downs.

  • 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
  • Font
  • Text Color

Products: Add To Cart Button

  • Show Button
  • Style: Solid, Outline, Raised
  • Shape: Square, Rounded, Pill
  • Padding: Small, Medium, Large
  • Color
  • Text Color
  • Font

Shopping cart

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

You can choose to display special badges over product thumbnails to show when items are on sale or sold out.

Use the Products: Status Badges section of Site Styles to adjust their background color, font, position, and shape. Choose Style: None to hide the badges.

Products: Status Badges

  • Style: Rectangle, Square, Circle, None
  • Sale Color
  • Sold-Out Color
  • Font
  • Padding
  • Position: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Inset: Floating, Flush, Dock Vertically, Dock Horizontally
  • Inset Size

Set the Sale Price Color in the Products: Details section.

Note: The Status Badge font color sets to black or white automatically, based on the badge background color.


On individual product items, the item details will say Sold Out and the Add To Cart button will appear dimmed.



Product items and information stack vertically in two or more columns on smartphones, tablets, and narrow browsers.


Was this article helpful?
22 out of 59 found this helpful
Styling the Advanced Products Page