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

Styling Products Pages

You can customize the way products appear on your site to match the design and presentation of your brand. Use this guide to find the style options for your Products Pages and product details pages based on your site's version. In version 7.1, the Products Page is called the Store Page.

Products Page vs. product details page

Before styling your products, it's good to understand how Squarespace structures them on all sites. Products are organized in two parts: Products Pages (called Store Pages in version 7.1), which create a browsable landing 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.

Open the style options

You'll change Store Page and product details page style options in two places:

  • Store Pages - Click Edit on the site preview, then click the Pencil icon on the Store Section you want to edit. To learn more about opening store section styles, visit Collection page sections in version 7.1.
  • Product details pages - Click Edit design in the top left corner of the details page to open the Product Items panel. These style settings apply to all product details pages on your site.

To style Products Pages:

  1. Open the Products Page you want to edit.
  2. In the Home Menu, click Designs, then click Site Styles.
  3. Use the tweaks in the Products sections to change the landing page style.
  4. For tweaks specific to individual product details 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 apply site-wide to all Products Pages to create a consistent look.
  • Your template may have features, such as banner images or page headers, that affect how the Products Page looks.

Products Page

Visitors to your Store Page see all your product item thumbnail images laid out in a grid. In the store section styles, you can customize these details:

Format:

  • Image width
  • Column spacing
  • Row spacing
  • Number of columns
  • Image aspect ratio
  • Text alignment
  • Image text spacing
  • Show or hide price
  • Where category navigation displays. It's not possible to hide the category navigation.
  • Header text alignment
  • Show category title
  • Product navigation
    • Breadcrumbs - A caret between the Products Page title and the product title
    • Prev/next - Links to go backwards and forwards in the order products display on the Products Page
    • Both
    • None

Colors:

Use the table below to find the style options for these template families:

  • Advanced - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • UniqueGalapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

Layout

Visitors to your Products Page see all your product item thumbnail images laid out in a grid. Style the grid with these tweaks.

Site Styles section

  • Advanced - Product: Layout
  • Classic - Products
Description Advanced Classic
Change the number of items per row Items per row Products Per Row
Change the space between each item in the row Item spacing n/a
Change the image shape. Images crop to fit Image aspect ratio n/a
Set the shape of the image container n/a Product Item Size
Choose whether the image crops to fill the image container n/a Product Image Auto Crop
Change the color that displays behind images that aren't cropped to the container size n/a Product Background Color

Product information

To display mobile tweaks for Advanced Products Pages, select Position: Overlay.

Site Styles section

  • Advanced - Products: details
  • Classic - Products
Description Advanced Classic
Set the title and price to display under the image or on hover Position: Under, Overlay Product List Titles: Under, Overlay
Align text when Product List Titles: Under is enabled n/a Product List Alignment: Center, Left
Set the color of the on-hover overlay when Product List Titles: Overlay is selected. Adjust the slider to set transparency n/a Product Overlay Color
Choose where the text displays on mobile browsers Position (Mobile): Under, Overlay n/a
Choose how the text aligns Alignment n/a
Set the color of the on-hover overlay when Position: Overlay is selected. Move the slider to set transparency Overlay Color n/a
Further change the alignment of the text when set to display on hover Overlay Padding n/a
Change the spacing below each row Spacing n/a
Uncheck to hide the item titles Show Title n/a
Set the title font Title Font n/a
Set the title Color Title Color n/a
Set the title color on mobile Title Color (Mobile) n/a
Set the space between the text and image when set to Position: Under Title Spacing n/a
Uncheck to hide prices. Show Price Show Product Price
Set the price font Price Font n/a
Set the price color on the computer Price Color n/a
Set the price color on mobile Price Color (Mobile) n/a
Set the sale price color on the computer Sale Price Color n/a
Set the sale price color on mobile Sale Price Color (Mobile) n/a
Set the space between the price and the title Price Spacing n/a

Product details page

To style the product details page, in the Home Menu, click Design, then click Product Items. The images that display are the product images. You can customize these options:

  • Image width
  • Image aspect ratio
  • Text alignment
  • Product navigation style
  • Image spacing
  • Gallery width
  • Content alignment
  • Gallery design (Slideshow, Stacked Carousel)
  • Gallery placement
  • Gallery thumbnail placement
  • Form width
  • Carousel arrow size
  • Click action (Zoom or Lightbox)
  • Hover action (Zoom or none)
  • Image zoom factor

Related products

The related products section on product details pages follows the tweaks in the store section styles. To access these settings from a Product Details page, go back to the Store Page and click Edit in the top-left corner. The fonts follow your site's font tweaks.

Add to cart button

This button follows your site's button style tweaks. It's not possible to hide the Add to cart button in version 7.1.

Use the table below to find the style options for these template families:

  • Advanced - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • UniqueGalapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

Layout

Site Styles section

  • Advanced - Products: Layout
  • Classic - Products
Description Advanced Classic
Change item spacing Spacing n/a
Add blank space to the top of the page Top Padding n/a

Change pagination display

Nav Display: Breadcrumb Only, Pagination Only, Breadcrumb and Pagination, None Show product item nav
Change pagination text  Pagination Style: Previous/Next, Titles n/a
Change pagination text Nav Alignment: Left, Center, Right, Split n/a
Change pagination font Nav Font n/a
Change pagination color Nav Color n/a
Change the color of the arrow between page titles in the navigation Nav Separator Color n/a

Pagination tips: 

  • Product order is set by where they appear on Products Pages. They are ordered from left to right.
  • It's not possible to limit pagination to a specific category. Pagination displays all products.

Images

When looking at an individual item, customers see the product images.

Site Styles section

  • Advanced - Products: Gallery
  • Classic - Products
Description Advanced Classic
Change image alignment Position: Left, Right n/a
Change gallery style Design: Slideshow, Stacked n/a
Change image width Width n/a
Set the image shape Aspect Ratio Product gallery size
Choose whether the product image crops to fill the image container. If not, the Product Background Color will display behind the image. n/a Product gallery auto-crop
Thumbnail tweaks affect the navigation thumbnails that display under the image when Design: Slideshow is selected. Thumbnail Alignment: Left, Center, Right n/a
Change thumbnail width Thumbnail Width n/a
Change thumbnail spacing Thumbnail Spacing n/a
Change the space between images when Design: Stacked is selected. Spacing n/a

Product information

Site Styles section

  • Advanced - Products: Details
  • Classic - Products
Description Advanced Classic
Change where the details are positioned on the page Alignment: Left, Center, Right n/a
Change the line height

Line height

The line height tweak in the Body: Font section also affects line height here.

n/a
Change letter spacing Spacing n/a
Show or hide product title Show Title n/a
Change product title font Title Font n/a
Change product title color Title Color n/a
Show or hide price Show Price n/a
Change price font Price Font n/a
Change price color Price Color n/a
Change the color for sale items. Sale Price Color n/a
Select where the product description displays Excerpt Position: Above Price, Below Price, Below Add to Cart Button n/a
Change product description font Excerpt Font n/a
Change product description color Excerpt Color n/a
Change product description link color Excerpt Link Color n/a
Hide or display the Share buttons. Show Share Buttons Product social sharing
Use the tweaks in the Share Buttons section. Style Share Buttons Style Share Buttons

Quantity and variants

Site Styles section

  • Advanced - Products: Options
  • Classic - Main content
Description Advanced Classic
Show or hide variants Show Variants n/a
Show or hide quantity. The quantity only displays when there are multiple items available. Show Quantity n/a
Change the quantity display Style: Text-Only, Square, Rounded, Pill n/a
Add a border color to the quantity display Border Color n/a
Add a background color to the quantity display Background Color n/a
Change the quantity display font Label Font n/a
Change the quantity display color Label Color n/a
Set the quantity and variants font Font Follows site-wide Header or Heading 1 tweaks.
Set the quantity and variants text color Text Color n/a
Change variant drop-down menu font. It's not possible to change the menu item font. Font n/a

Add to cart button

Site Styles section

  • Advanced - Show Buttons
  • Classic - Buttons
Description Advanced Classic
Change the button style Style: Solid, Outline, Raised Style: Default, Solid, Outline, Raised
Change the button shape Shape: Square, Rounded, Pill Shape: Square, Rounded, Pill
Add or remove button padding Padding: Small, Medium, Large n/a
Change button color Color Button Color
Change button text color Text Color Text Color
Change button font Font Font
Tip: When a product is sold out, the Add to Cart button appears dimmed.

Related products

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

Site Styles section

  • Advanced - Products: Related Products
  • Classic - Products
Description Advanced Classic
Change items per row Items Per Row Items Per Row
Add or remove item spacing Item Spacing Item Spacing
Set the image aspect ratio Image Aspect Ratio Image Aspect Ratio
Change the text alignment Details Alignment: Center, Left Details Alignment: Center, Left
Change the title spacing Title Spacing Title Spacing

Shopping cart

The icon displays as a cart in the site header. To learn more, visit Shopping cart icon display.

All templates support a shopping Cart button that shows the number of items in a customer's cart and leads to the checkout page. If your cart isn't appearing, see our troubleshooting tips. To learn how to style your template's shopping cart icon, visit Shopping cart icon display.

Category navigation

After you add categories to your products, they create a navigation menu at the top of the landing page. Customers can use these links to filter the products they're interested in. Keep in mind that in both versions, category navigation:

  • Only displays after you've added at least one category
  • Doesn't display on details pages
  • Displays all categories, even those linked to hidden products

The category navigation font follows the paragraph style.It's not possible to change the position of the category navigation, or delete it without deleting all product categories.

Use the table below to find the style options for these template families:

  • Advanced - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • UniqueGalapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

Site Styles section

  • Advanced - Products: Sort + Filter
  • Classic - Products
Description Advanced Classic
Hide category navigation Display: Hide Uncheck Show category navigation
Enable, disable, and align category navigation Display: Top, Left Side, or Right Side, Hide n/a
Set the width if the category navigation is on the left or right. Width n/a
Change the space below the navigation. Margin n/a
Change the space between each Item Spacing n/a
Set the text alignment Alignment: Left, Center, Right n/a
Set the navigation font Font

Category Nav Font

(Not available in Bedford, Five, Ishimoto, Montauk, and Native)

Set the navigation color Color

Category Nav Color

(Not available in Bedford, Five, Ishimoto, Montauk, and Native)

Choose the color links display on hover Active Color

Category Nav Active Color

(Not available in Bedford, Five, Ishimoto, Montauk, and Native)

On sale, sold out, and limited availability labels

Sold out items always display Sold out on the Products Page and product details page. On sale and Limited Availability Labels also display if you've enabled them. The status labels follow your site's color and meta font tweaks, or you can customize them.

Use the table below to find the style options for these template families:

  • Advanced - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • UniqueGalapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

To access these style tweaks, go to the Products Page you want to edit before opening Site Styles.

Site Styles section

  • Advanced - Products: Status badges
  • Classic - Products
Description Advanced Classic
Hide the badge Style: None n/a
Set the badge style Style: Rectangle, Square, Circle, None n/a
Set the sale badge color Sale Color n/a
Set the sold-out badge color Sold-Out Color n/a
Set the badge font Font n/a
Add or remove padding Padding n/a
Set the badge position Position: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right n/a
Overlap the badge with the product image Inset: Floating, Flush, Dock Vertically, Dock Horizontally n/a
Change the badge size Inset Size n/a
Sale price color Use Sale price color in the Products: Details section n/a
Status badge color Can only be black or white, based on the badge background color n/a
Limited availability label color Limited availability label color Limited availability label color 
Limited availability label font Limited availability label font Limited availability label font

Image zoom, quick view, and hover effects

An alternate product image always displays on hover on Products Pages. Product details always display below the product image. You can enable quick view in the page or block settings.

Image zoom isn't available on Products Pages. However, you can enable lightboxes and image zoom on click and hover on the product details page. Enable these effects in the Product Items panel:

  • Lightbox - Opens the image in a lightbox window on click.
  • Zoom - Magnifies image details on click or hover.

Use the table below to find the style options for these template families:

  • Advanced - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Galapagos supports the alternate image and product info overlay options.
  • Supply supports unique product info overlay options.

Hover effects

To display the item hover behavior tweak in Advanced Products Pages, go to the Product: Details section and select Position: Under.

Site Styles section

  • Advanced - Products: Layout
  • Classic - Products
Description Advanced Classic
Set the hover action

Item Hover Behavior

n/a
Display the second image in the product editor shows on hover. Item Hover Behavior: Show alternate image n/a
Fades visible product details on hover.

Item Hover Behavior: Fade

n/a
No hover effect

In the Product: Details section, select Position: Under, and in the Product: Layout section, choose Item Hover Behavior: None

Product List titles: Under
Display product details on hover instead of an alternate image or a fade.

In the Product: Details section, select Position: Overlay

Product List Titles: Overlay
Display product titles beneath the product image n/a Product List Titles: Under
Change the overlay color on hover n/a Product overlay color
Show or hide the product price on hover n/a Show product price

Alternate image tips:

  • If the second product image has transparent areas, the first image will be visible in those areas on hover.

Image zoom

Site Styles section

  • Advanced - Product items
  • Classic n/a
Description Advanced Classic
Enable product quick view Hover action: Zoom n/a
Set the image zoom factor Image zoom factor n/a

Image zoom tips:

  • Images with transparent backgrounds (.png) will display the original image behind the zoomed version.

Quick view

After enabling Quick View, new sections appear in the Site Styles Panel. Style settings apply site-wide to create a consistent look.

Visitors use product quick view to view the item details in a lightbox without navigating away from the Products Page. This feature isn't available for Classic Products Pages, although product images open in a lightbox from the product details pages in these templates.

Site Styles section

  • Advanced - Products: Quick View Button
  • Classic n/a
Description Advanced Classic
Customize the style, color, font, padding, position, and size of the Quick View button Position n/a
Customize the appearance of the lightbox Products: Quick View Lightbox n/a
Display the product description Excerpt Display: Truncate n/a
Add a color filter to the Products Page behind the lightbox Overlay Color n/a
Change the navigation and close button that appear outside the lightbox Controls n/a
Change the Quick View title font In the Products: Details section, select Title Font n/a

Quick view tips:

  • If your Quick View text has formatting issues, try adding the product details as plain text instead.
  • Quick View isn't available on mobile devices.
  • The "Quick View" button text can't be customized.
  • Product images display as a cropped square in Quick View.
  • Product descriptions appear in Quick View without special formatting, including header styling, bold, italics, or bulleted lists.

Fonts and colors

Colors and fonts on the Products Page and product details page follow your site-wide font and color tweaks. You can also change the color of specific Store Sections in the section style editor.

  1. In the Home Menu, click Design, then click Fonts.
  2. Choose a font, and click the to apply the font to specific parts of your site.

Use these tweaks to change fonts on your Store Pages and product details pages:

Section Product Page elements
Headings Page titles, Related products section title, and product titles
Paragraphs Product description, price, and page navigation
Buttons Buttons
Meta Miscellaneous styles, like tags and prices
Advanced: Products: List List title, list price, list status
Advanced: Product detail page Item title, item price, item description, variant fields

Use the table below to find the style options for these template families:

  • Advanced - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Classic Products Pages

The text on the Classic 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, use the Header or Heading 1 tweak. Some elements, like Category Navigation, have their own font tweaks which are listed throughout this guide based on the element you're styling.

Variant drop-down menus are an exception, as they use the same font on all Classic Products Pages. This font can't be changed in Site Styles.

Advanced Products Pages

Fonts on Advanced Products Pages follow the style tweaks on the rest of your site, but they have additional font tweaks for specific elements of the Products Page. These tweaks are listed throughout this guide based on the element you're styling.

Mobile

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

  • In version 7.0, Advanced Products Pages have unique mobile colors for item titles, prices, and sale prices.
  • Currently, Quick View and Image Zoom aren't available on mobile.
  • Titles and prices always display below product the images on Products Pages.
  • Overlay color, alternative image, and fade effects don't display.
  • Visit Version 7.0 advanced mobile styles to learn about your template's other mobile options. Version 7.1 doesn't have separate mobile styles.
  • In version 7.1, images on the product details page always display in a slideshow.
  • When the category navigation can’t fit on one line, it displays as a horizontal scrolling list visitors can swipe through.
Was this article helpful?
23 out of 61 found this helpful