Styling store pages

Customize your site’s store pages and product detail pages.

Last updated January 30, 2025

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 store pages and product details pages based on your site's version.

To learn more about making accessible style changes, visit Creating an accessible Commerce site

Store 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: store pages, 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 paintbrush icon on the store section you want to edit. To learn more about opening store section styles, visit Collection page sections.
  • Product details pages - Open the product details page you want to edit. Click Edit design, then click the Paintbrush icon. These style settings apply to all product details pages on your site.

To style store pages:

  1. Open the store page you want to edit.
  2. Return to the Website panel, click Design, 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 store pages, style changes apply site-wide to all store pages to create a consistent look.
  • Your template may have features, such as banner images or page headers, that affect how the store page looks.

Store page

Visitors to your store page find all your product item featured images laid out in a grid. The store page shows up to 200 products. If there are more than 200 products, customers can click Next to view more products.

In the store section styles, you can customize the details below. Keep in mind that your changes apply to all store pages on your site.

Format:

  • Image width
  • Column spacing
  • Row spacing
  • Number of columns (two minimum)
  • Image aspect ratio
  • Text alignment
  • Image text spacing
  • Add to cart button - Displays the add to cart button on the store page, in addition to product details pages, if the product has one or no variants. If the product has more than one variant, a View options button displays on the store page.
    • Added to cart confirmation - This pop-up message displays after a customer adds something to their cart. The text follows the section's background color.
  • Show or hide price
  • Where category navigation displays. It's not possible to hide the category navigation.
  • Header text alignment
  • Show category title - Hides or displays the page title at the top of the store section.
  • Product navigation
    • Breadcrumb - Displays the navigation path visitors took before landing on their current page, excluding related products and filtered category pages. 
    • 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
  • Unique - Galapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

Layout

Visitors to your store page find all your product item featured 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 store 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

The images that display are the product images. To style the product details page:

  1. Open the product details page you want to edit.
  2. Click Edit design in the top-left corner. On some sites, you may need to hover over Edit, click Edit design, then click the Paintbrush icon.

Choose from the following layout options:

  • Simple - The product image and description display side by side, surrounded by whitespace. 
  • Wrap - The product images wrap around the description. Images are always aligned left.
  • Half - The product image splits the page with the description. The image is always aligned left.
  • Full - Product images display in a full-bleed carousel above the description.

If you select the Simple layout, you can also customize these options: 

  • Variant display
  • Image width
  • Image aspect ratio (slideshow and carousel design only).
    • In the carousel design, the aspect ratio sets the proportions of the image container, but your image may not crop to fill it. We recommend adding images that have the same aspect ratio you choose in your settings.
  • Text alignment
  • Product navigation style
  • Description position - Where the product description displays.
  • Add to cart button - The Inline option places the button beside the quantity field.
  • Image spacing
  • Gallery width
  • Content alignment (top, center) - The top alignment may display padding between the top of the product image and the text. Content alignment is available for slideshow and carousel designs, not stacked
  • Design (slideshow, stacked, carousel) - If the design is slideshow, thumbnails of the other product images display.
  • Gallery placement
  • Gallery thumbnail placement - Positions the product featured images when the design is slideshow.
  • Form width
  • Carousel arrow size and color 
  • Click action (zoom or lightbox)
  • Hover action (zoom or none)
  • Image zoom factor

Subscription frequency

If you sell subscription products, you can change the colors that display in the subscription frequency section of the product details page. Open your site's color themes and change the colors under product details page: subscriptions. 

Frequency.png

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 and Checkout buttons

The Add to cart button can display beneath product thumbnails on the store page, and on individual product details pages. On store pages, the button colors follow your product text and background colors. The Add to cart button on product details pages and the Checkout button on the shopping cart page both follow your Primary button style tweaks and your site's color settings. Keep in mind, the button style options apply to most buttons on your site to ensure a consistent look and feel. These buttons always direct customers to your Squarespace cart and checkout page. It's not possible to use these buttons to link to external sites.

To preserve the look and feel of your product details pages, horizontal padding tweaks don't affect Add to Cart buttons. It's not possible to hide the Add to cart button in version 7.1. When a product is sold out, the Add to cart button appears dimmed.

Variant display

In the simple layout, you can display variants as buttons or in a drop-down menu. Variant buttons follow your site's secondary button style tweaks. All other layouts display variants in drop-down menus. The variant drop-down menu color changes based on the section's color theme. It follows the Variant fields font family. Keep in mind, the option to sign up for a product waitlist only appears when variants display in drop-down menus.

The quantity field

The quantity field displays on the product details page if:

  • The product's stock level is greater than one
  • It has variants, regardless of the individual variant stock levels

To display the current stock level for each variant on the product details page, enable limited availability labels. This will stop customers from trying to add more than one product to their cart when the stock level is one. It's not possible to change the size of the quantity field.

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
  • Unique - Galapagos 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 store 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 display font. It's not possible to change the menu item font. Font n/a

The quantity field

The quantity field displays on the product details page if:

  • The product's stock level is greater than one
  • It has variants, regardless of the individual variant stock levels

To display the current stock level for each variant on the product details page, enable limited availability labels. This will stop customers from trying to add more than one product to their cart when the stock level is one.

Add to cart button

Site styles section

  • Advanced - Show buttons
  • Classic - Buttons
Description Advanced Classic
Hide the button Uncheck Show button n/a
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.

Checkout button

The Checkout button that displays on the shopping cart page follows your site's color settings. It's not possible to customize its shape or font.

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 by default. If you hide the shopping cart icon, it appears at the bottom of the page when customers add items to their cart. 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 can display at the top of your store page, or in a sidebar. Keep in mind, category navigation always displays at the top on mobile devices.

The category navigation font follows the paragraph style. The color follows the Category nav tweak under Products: Basic Grid in Site styles.

Depending on the position, subcategories display in a nested menu. To change the position, open the section styles and click Sidebar or Top under Categories type. To change the order of the navigation, click and drag the categories in the category manager.

  • Sidebar - Subcategories will display in a nested menu on the store page, and on filtered category pages
  • Top - Subcategories will display on the main filtered category page, but not filtered subcategory pages.

To hide the category navigation, open the category settings and switch off the toggle beside Filter visibility. Repeat this for every category. To learn more, visit Organizing products.

The category navigation displays alphabetically. 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
  • Unique - Galapagos and Supply follow different style tweaks. It's not possible to hide the category navigation in these templates. Visit your template guide for information about styling the category navigation.

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, 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 in the row 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 a customizable sold out label. In both versions, you can change the label text and its font and color. In version 7.0, you can change the label's shape and location.

Sale and Limited availability labels also display if you've enabled them. The way to style them depends on your site's version. You can change the limited availability label text in the Limited availability panel, but it's not possible to change the on sale label text.

  • Sold out items always display their status badge beneath the product image on the store page and product details page.
  • Sale and Limited availability labels follow your site's color and miscellaneous font tweaks.

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
  • Unique - Galapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

To access these style tweaks, go to the store 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 store pages when a product has more than one image. Product details always display below the product image. You can enable quick view in the page or block settings. The quick view lightbox background color follows the store section's color.

Image zoom isn't available on store 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 store 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 (displays when the Product: details position is set to under)

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 - Products: Image zoom
  • Classic - n/a
Description Advanced Classic
Enable or disable image zoom Enable image zoom n/a
Set the image zoom factor Image zoom factor n/a
Set image zoom to activate on click or hover Zoom activates on n/a
Set product images to open in a lightbox

Enable lightbox. If the Enable lightbox setting doesn't appear, enable image zoom and set the zoom to activate on Hover. This should reveal the Enable lightbox setting. You can disable image zoom after enabling the lightbox.

To enable both image zoom and lightbox, image zoom needs to be set to activate on Hover.

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 store page. This feature isn't available for classic store 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 store 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 store 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. Product details pages follow the store section's color theme.

  1. On the store page, click Edit design, then open site styles.
  2. Click Fonts.
  3. 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 page and product details pages:

Section Store 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 store pages

The text on the classic store 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 dropdown menus are an exception, as they use the same font on all classic store pages. This font can't be changed in site styles.

Advanced store pages

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

Mobile

Product items and information stack vertically on smartphones, tablets, and narrow browsers.

  • Currently, quick view and image zoom aren't available on mobile.
  • Titles and prices always display below product the images on store pages.
  • Overlay color, alternative image, and fade effects don't display.
  • When the category navigation can’t fit on one line, it displays as a horizontal scrolling list visitors can swipe through.

On version 7.1:

  • Images on the product details page always display in a slideshow for customers to swipe through. Thumbnail images don't display beneath the slideshow.
  • The add to cart button displays before the description on product pages with the Full and Simple layouts.
  • The category navigation displays horizontally for shoppers to swipe through.
  • Products display in one or two columns. In mobile view, click Edit, then Edit section. Click the or - icon to change the number of columns that display.
  • On mobile devices, breadcrumb navigation appears when visitors click the category tags on a store landing page. Breadcrumb navigation doesn't appear when visitors click a product directly on a store page.
  • Images on product details pages display with a 1:1 aspect ratio, regardless of the layout.

On version 7.0:

  • Advanced store pages have unique mobile colors for item titles, prices, and sale prices.
  • Products display in two or more columns.

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.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.