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

Supported templates

The Advanced Products Page is available in the following templates. Templates are grouped by family.

  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Farro, Haute
  • Skye, Foundry, Indigo, Ready, Tudor
  • Tremont, Camino, Carson, Henson
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

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

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

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

Use the Image Aspect Ratio tweak in the Products: Layout section to set the shape of the images on the landing page. 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 - 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.

Category navigation

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

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

Adjust the display of the product image or images.

Products: Gallery

  • Position: Left, Right
  • Design: Slideshow, Stacked
  • Width
  • Aspect Ratio - Set the image shape. 1:1, 3:2, 2:3, 4:3, 3:4, 
  • 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 indicate when items are on sale or sold out.

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.

onsale.png

On individual product items, the item details will say Sold Out and the Add To Cart button will be grayed out.

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?
6 out of 9 found this helpful
Styling the Advanced Products Page