---
title: Customize product page templates
shortDescription: Create and assign custom product page templates to control the layout supporters see when they view an individual product in your shop.
articleType: Tutorial
primaryTopic: product-view-templates
categories:
  - Store Design
  - Products
tags:
  - product-page-template
  - site-design
  - product-layout
  - template-editor
  - product-sections
  - storefront-customization
  - product-view
  - page-sections
  - product-display
tasks:
  - Create a new product page template
  - Open product page templates in the Site Designer
  - Add or remove sections in a product page template
  - Reorder sections in a product page template
  - Assign a template to a specific product
  - Assign a template to all products of a certain type
terms:
  - product page template
  - product view template
  - customize product page
  - product layout
  - product page design
  - product page sections
  - assign product template
  - product page layout
  - custom product page
  - product display template
  - site design pages
  - product template sections
labels:
  - product-design
  - site-design
  - templates
  - storefront-customization
contextString: Available on all Fourthwall plans. Accessed via Site design in the creator dashboard.
breadcrumbPath: "Getting started > Design my storefront"
relatedModules:
  - name: theme-editor-pages
    route: /admin/dashboard/store-design/pages/
  - name: theme-editor-layout-home
    route: /admin/dashboard/store-design/layout/index
  - name: collections-list
    route: /admin/dashboard/products/collections/
last_updated: '2026-05-25'
path: getting-started/design-my-storefront/customizing-product-view-templates
---

# Customize product page templates

Product page templates control the layout supporters see when they view an individual product in your shop. By default, every product uses the same layout. Templates let you build different layouts for different products or product types, controlling which sections appear and in what order around the product image and add-to-cart button.

## How product page templates work

A product page template defines the layout of an individual product page. It controls which sections appear on the page (such as product images, description, related products, or custom content) and how they are arranged.

You can have multiple templates and assign them to specific products or to all products of a certain type. For example, you might use one template for physical products and a different one for digital downloads.

Product page templates are separate from collection view templates, which control the layout of your collection listing pages.

## Step 1: Open product page templates in the Site Designer

In your Fourthwall dashboard, open the [**Site Designer**](https://my-shop.fourthwall.com/admin/dashboard/store-design/?redirect).

At the top center of the editor, click the dropdown showing the current page name, then select **Product pages**.

The sub-group expands to show your existing product page templates. Each template lists how it is assigned, such as **Assigned to all products** or **Assigned to N products**.

## Step 2: Create a new template

To build a new template from scratch, click **Create new template** at the bottom of the **Product pages** sub-group.

Give the template a name that will help you identify it later, then confirm to open it in the editor.

## Step 3: Customize the template sections

The editor shows the sections currently included in the template. You can add, remove, and reorder sections to build your layout.

The following section types are available in a product page template:

- **Product details**. The core product block containing the main image, title, price, add-to-cart button, and description.
- **Related products**. A grid of other products supporters might like.
- **Custom HTML**. Embed custom code or third-party widgets.
- **Text**. A freeform text block.
- **Image**. A standalone image section.
- **Video**. An embedded video section.

To add a section, click **Add section** and choose from the list. To reorder sections, drag them using the handle to the left of each section name. To remove a section, open it and click **Delete**. When you are done editing, click **Save**.

The internal elements inside the **Product details** section (such as the title, price, add-to-cart button, and description) follow a fixed order and cannot be rearranged from the Site Designer. To move the add-to-cart button above the description, apply custom CSS in your theme.

## Step 4: Assign the template to products

After saving your template, assign it to one or more products for it to take effect.

**Assign to a specific product**: Go to the product in your dashboard. In the product settings, find the **Template** field and select your new template from the drop-down. Click **Save** to apply the template to that product.

**Assign to all products of a type**: Open each product in your dashboard and set its **Template** field to your new template. The **Product pages** sub-group in the Site Designer dropdown shows the assignment count under each template, so you can confirm how many products are using it. Any product without a custom template assignment continues to use the default Fourthwall product page layout.

## Related articles

- Customize collection view templates
- Create a collection
- Customize your homepage layout