Customize your site’s store pages and product detail 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 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:
- Open the store page you want to edit.
- Return to the Website panel, click Design, then click Site Styles.
- Use the tweaks in the Products sections to change the landing page style.
- 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.
- 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:
- Set your site's colors, or create a unique look for your store section by choosing a different section theme.
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:
- Open the product details page you want to edit.
- 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.
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.
- On the store page, click Edit design, then open site styles.
- Click Fonts.
- 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.