Customize the design of store and product details pages

false

Customize the design of store and product details pages

Last updated October 22, 2026 17:29

Customize the look and feel of your site’s store pages and product detail pages.

Style and customize the way products appear on your site to match the design and presentation of your brand.

Tip: Make your online store easy to navigate for all visitors with accessible style changes.

Not what you’re looking for?

• Customize the shopping cart icon
• Create sale pricing
• Sold out products
• Limited availability labels
• Add quick view, image zoom, and hover effects to your store page
• Customize the design of your site’s category navigation

Store page vs. product details page

When you add products to your store, they’re organized in two parts: store pages, which create a browsable landing page, and product details pages, which show details of individual products. These pages share some style tweaks and have their own style options. How you open the style tweaks depends on your site’s version.

Customize your store pages

Based on the device view you're in, you can set device-specific styles for some design elements, like text alignment and image aspect ratio. When applicable, the design setting includes the device (desktop or mobile) beside it.

How you style your store page depends on your site’s version.

• Version 7.1
• Version 7.0

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

To style the store page section:

1. Open the store page you want to edit.
2. Click Edit.
3. Click Edit Section on the store section. You can customize the details below. Changes apply only to this store section.

In the Elements tab, you can customize:

• Store title: Display the page title at the top of the section.
• Breadcrumbs: Display the navigation path visitors took before landing on their current page, excluding related products and filtered category pages.
• Categories label: Display the “Categories” label on the categories menu.
• Filters label: Display the “Filters” label on the filters menu.
• Filters:  Add filters to help customers browse your products by tag, availability, price range, or by hiding sold-out products.
• Product description: Show or hide the product description when you have the list layout.
• Price: Show or hide the price on the product thumbnail.
• Add to cart button: Displays beneath product thumbnails on the store page and on product details pages. If the product has one variant, a variant dropdown menu displays above the Add to cart button. If the product has two or more variants, a View options button linking to the product details page displays instead.

In the Design tab, you can customize:

• Layout: Display product thumbnails in a grid or list. In the list layout, display a preview of your product descriptions.
• Title alignment: Set the text justification for your store title.
• Menu placement: Display category navigation at the top of the section or as a sidebar.
• Categories style: Style your categories menu as a dropdown, subnav, or buttons.
• Number of columns in the grid layout (two minimum)
• Column and row spacing
• Background: Show or hide a background to surround your product thumbnail, similar to a picture mat. Set the background color, curve the corners, and choose the stroke type, color, and thickness.
• Button styling and alignment
• Image aspect ratio and text spacing
• Corners: The thumbnail background and product images can have square or curved corners.
• Section width and vertical padding.
• Divider: Display a divider between your store section and other sections on the page. Choose the divider shape, stroke type, color, and thickness.

In the Colors tab:

• Select a section theme for your store section.
• Click the pencil icon on a theme to customize it. Changes affect all sections using the theme.

Store page filters

Add filters for price range, product availability, or hiding sold-out products, or create product filters with tags to help your customers find the products and services most interesting to them. The filter button follows your primary button styles.

Which style options are available depend on your site’s template family and its store page type.

Note: Galapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

If you have multiple store pages, style changes apply site-wide to all store pages to create a consistent look. To style store pages:

1. Open the store page you want to edit.
2. Return to the Website panel.
3. Click Design.
4. Click Site Styles.
5. Use the tweaks in the Products sections to change the landing page style. To only use the style tweaks available to a specific part of the page, click that area of the page in the preview.
6. For tweaks specific to individual product details pages, exit site styles, open a product, then re-enter site styles.

Store page layout

Visitors to your store page find all your product item featured images laid out in a grid. You can style the grid with these tweaks under the Product: Layout site styles section (Advanced store pages) or the Products site styles section (Classic store pages), as applicable.

Your template may have features, such as banner images or page headers, that can also affect how the store page looks.

Style description

• Change the number of items per row
• Advanced: Items per row
• Classic: Products per row
• Change the space between each item in the row
• Advanced: Item spacing
• Change the image shape. Images crop to fit
• Advanced: Item spacing
• Set the shape of the image container
• Classic: Product item size
• Choose whether the image crops to fill the image container
• Classic: Product image auto crop
• Change the color that displays behind images that aren't cropped to the container size
• Classic: Product background color

Store page product information

To display mobile tweaks for advanced store pages, select Position: overlay. You can style product information with these tweaks under the Product: Details site styles section (Advanced store pages) or the Products site styles section (Classic store pages), as applicable.

Style description

• Set the title and price to display under the image or on hover
• Advanced: Position: under, overlay
• Classic: Product list titles: under, overlay
• Align text when Product list titles: under is enabled
• Classic: 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
• Classic: Product overlay color
• Choose where the text displays on mobile browsers
• Advanced: Position (mobile): under, overlay
• Choose how the text aligns
• Advanced: Alignment
• Set the color of the on-hover overlay when Position: overlay is selected. Move the slider to set transparency
• Advanced: Overlay color
• Further change the alignment of the text when set to display on hover
• Advanced: Overlay padding
• Change the spacing below each row
• Advanced: Spacing
• Uncheck to hide the item titles
• Advanced: Show title
• Set the title font
• Advanced: Title font
• Set the title color
• Advanced: Title color
• Set the title color on mobile
• Advanced: Title color (mobile)
• Set the space between the text and image when set to Position: under
• Advanced: Title spacing
• Uncheck to hide prices
• Advanced: Show price
• Classic: Show product price
• Set the price font
• Advanced: Price font
• Set the price color on the computer
• Advanced: Price color
• Set the price color on mobile
• Advanced: Price color (mobile)
• Set the sale price color on the computer
• Advanced: Sale price color
• Set the sale price color on mobile
• Advanced: Sale price color (mobile)
• Set the space between the price and the title
• Advanced: Price spacing

Can I delete the cents from the price and only display dollars?

No. All prices must show cents, even if your price is rounded to the whole dollar ($10.00 rather than $10).

Customize your product details page

How you style your product details page depends on your site’s version.

• Version 7.1
• Version 7.0

Any changes apply to all product details pages on the same store page. To style the product details page:

1. Open the product details page you want to edit.
2. Click Edit, then click Edit Section.

In the Format tab, choose from the following layout options:

• Simple: The product image and description display side by side, surrounded by whitespace.
• Wrap: 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 customize these options:

• Content width.
• Image design and spacing: Choose from slideshow, stacked, or carousel designs when your product has multiple images. If the design is slideshow, thumbnails of the other product images display.
• Variant display.
• Text alignment.
• Content alignment: Choose from top or 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.
• Form width.
• Product navigation style.
• Description position: Where the product description displays.
• Add to cart button: The Inline option places the button beside the quantity field.
• Gallery 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.
• Gallery placement and width.
• Gallery thumbnail placement: Positions the product featured images when the design is slideshow.
• Carousel arrow size (slideshow and carousel design only).
• Click action: Choose from none, zoom or lightbox, depending on the design.
• Hover action.

In the Colors tab:

• Select a section theme for your store section.
• Click the pencil icon on a theme to customize it. Keep in mind, this affects all sections using the theme.

Customize product variants display

In the Simple layout, you can display variants as buttons or in a dropdown menu. All other layouts display variants in dropdown menus.

• Variant buttons: Follow your site's form styles. Open Site Styles, then click > next to Forms. Click Selection options, then click Radio.
• Variant dropdown menu: Follows the Variant fields font family, and its color depends on the section's color theme.

Note: The option to sign up for a product waitlist only appears when variants display in dropdown menus.

Style Add to cart and Checkout buttons on the store page

The Add to cart button can display beneath product thumbnails on the store page and on individual product details pages.

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

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.

Manage mini cart colors

The mini cart color automatically contrasts with your section background. To change the colors the mini cart uses, apply a different theme to the section or change your site’s color palette.

On version 7.1 sites, it’s not possible to choose the mini cart’s colors directly. Instead, the mini cart automatically contrasts with your section background so it stays visible.

Editing individual tweaks in a color theme doesn’t affect the mini cart:

• Light backgrounds: The mini cart displays in a dark theme.
• Dark backgrounds: The mini cart displays in a light theme.

Can I hide the Add to cart button on my store page?

You can’t hide the Add to cart button without using custom code. This topic has come up in the Squarespace Forum, but falls outside our scope of support.

To promote your products without the option to buy them, you can display them on your site using a layout page with image and text blocks.

When does the quantity field appear on my store page?

The quantity field appears 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, turn on limited availability labels. This will prevent customers from trying to add more than one product to their cart when the stock level is one.

You can't change the size of the quantity field. You can hide the quantity field for physical and service products in your checkout settings.

Customize related products

The related products section on product details pages follows the tweaks in the store section styles and your site-wide font tweaks.

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

Which style options are available depend on your site’s template family and its store page type.

Note: Galapagos and Supply follow different style tweaks. Visit your template guide for information about styling products.

Product details page layout

Style the layout under the Product: Layout site styles section (Advanced store pages) or the Products site styles section (Classic store pages), as applicable.

Style description

• Change item spacing
• Advanced: Spacing
• Add blank space to the top of the page
• Advanced: Top padding
• Change pagination display
• Advanced: Nav display: breadcrumb only, pagination only, breadcrumb and pagination, none
• Classic: Show product item nav
• Change pagination text
• Advanced: Pagination style: previous/next, titles
• Change pagination text
• Advanced: Nav alignment: left, center, right, split
• Change pagination font
• Advanced: Nav font
• Change pagination color
• Advanced: Nav color
• Change the color of the arrow between page titles in the navigation
• Advanced: Nav separator color

Note:

• Product order is set by where products appear on store pages. They’re ordered from left to right.
• Pagination displays all products. You can’t limit it to a specific category.

Product details page images

When looking at an individual item, customers see the product images. Style images under the Products: Gallery site styles section (Advanced store pages) or the Products site styles section (Classic store pages), as applicable.

Style description

• Change image alignment
• Advanced: Position: left, right
• Change gallery style
• Advanced: Design: slideshow, stacked
• Change image width
• Advanced: Width
• Set the image shape
• Advanced: Aspect ratio
• Classic: 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.
• Classic: Product gallery auto-crop
• Thumbnail tweaks affect the navigation thumbnails that display under the image when Design: slideshow is selected.
• Advanced: Thumbnail alignment: left, center, right
• Change thumbnail width
• Advanced: Thumbnail width
• Change thumbnail spacing
• Advanced: Thumbnail spacing
• Change the space between images when Design: stacked is selected.
• Advanced: Spacing

Product details page product information

Style the product information under the Products: Details site styles section (Advanced store pages) or the Products site styles section (Classic store pages), as applicable.

Style description

• Change where the details are positioned on the page
• Advanced: Alignment: left, center, right
• Change the line height
• Advanced: Line height. The line height tweak in the Body: font section also affects line height here
• Change letter spacing
• Advanced: Spacing
• Show or hide product title
• Advanced: Show title
• Change product title font
• Advanced: Title font
• Change product title color
• Advanced: Title color
• Show or hide price
• Advanced: Show price
• Change price font
• Advanced: Price font
• Change price color
• Advanced: Price color
• Change the color for sale items
• Advanced: Sale price color
• Select where the product description displays
• Advanced: Excerpt position: above price, below price, below add to cart button
• Change product description font
• Advanced: Excerpt font
• Change product description color
• Advanced: Excerpt color
• Change product description link color
• Advanced: Excerpt link color
• Hide or display the share buttons
• Advanced: Show share buttons
• Classic: Product social sharing
• Use the tweaks in the Share buttons section
• Advanced: Style share buttons
• Classic: Style share buttons

Product details page quantity and variants

Style quantity and variants under the Products: Options site styles section (Advanced store pages) or the Main content site styles section (Classic store pages), as applicable.

Style description

• Show or hide variants
• Advanced: Show variants
• Show or hide quantity. The quantity only displays when there are multiple items available.
• Advanced: Show quantity
• Change the quantity display
• Advanced: Style: text-only, square, rounded, pill
• Add a border color to the quantity display
• Advanced: Border color
• Add a background color to the quantity display
• Advanced: Background color
• Change the quantity display font
• Advanced: Label font
• Change the quantity display color
• Advanced: Label color
• Set the quantity and variants font
• Advanced: Font
• Classic: Follows site-wide Header or Heading 1 tweaks.
• Set the quantity and variants text color
• Advanced: Text color
• Change variant display font. It's not possible to change the menu item font.
• Advanced: Font

When does the quantity field appear on the product details page?

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.

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

Can I hide the quantity dropdown?

You can hide the product quantity in version 7.0, if your site's template is in the Brine, Farro, Skye, Tremont, or York families. In these templates, to hide the quantity dropdown menu on item pages:

1. Go to your store page.
2. Open the individual item.
3. Return to the Website panel, click Design, then Site styles.
4. Scroll to the Products: Options section.
5. Uncheck Show Quantity.

Tip: The quantity option will still display at checkout. You can disable this for service items in all templates.

Add to cart button on the product details page

Style quantity and variants under the Show buttons site styles section (Advanced store pages) or the Buttons site styles section (Classic store pages), as applicable.

Style description

• Hide the button
• Advanced: Uncheck Show button
• Change the button style
• Advanced: Style: solid, outline, raised
• Classic: Style: default, solid, outline, raised
• Change the button shape
• Advanced: Shape: square, rounded, pill
• Classic: Shape: square, rounded, pill
• Add or remove button padding
• Advanced: Padding: small, medium, large
• Change button color
• Advanced: Color
• Classic: Button color
• Change button text color
• Advanced: Text color
• Classic: Text color
• Change button font
• Advanced: Font
• Classic: Font

Note: When a product is sold out, the Add to cart button appears dimmed.

Product details page Checkout button

The Checkout button that displays on the shopping cart page follows your site's color settings. You can’t customize its shape or font.

Related products on the product details page

Related products display in a grid at the bottom of the page.

Was this article helpful?

Yes No

136 out of 631 found this helpful

Yes No

Customize the design of store and product details pages