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

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 two parts: 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

  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 landing page style.
  4. For tweaks specific to individual product item pages, exit Site Styles, open a product, then re-enter Site Styles.

Tips:

  • 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

Layout

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

Product details

The price and title of each item can display on the landing 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 landing 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 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

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.

Hover effects

You can show an alternative image, product details, or a fade effect on hover. Keep these tips 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.

hover-alt-image.gif

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.

hover-overlay.gif

Fade

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.

hover-fade.gif

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.

Item page style options

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

Layout

Products: Layout 

  • Spacing
  • Top Padding 

Pagination

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

Image

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.

Details  

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 (rectangle, square, or circle).

Note: It's not possible to customize the Status Badge font color.

Select Style: None to hide the badges.

onsale.png

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

sold-out-prod-2.jpg

Mobile

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

mobile1.png

Was this article helpful?
18 out of 35 found this helpful
Styling the Advanced Products Page