Customize product page templates
Updated May 25, 2026
Create and assign custom product page templates to control the layout supporters see when they view an individual product in your shop
By default, every product in your shop uses the same product page layout. Product page templates let you change that. You can build different layouts for different products or product types, controlling what 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.
At the top center of the editor, you will see a dropdown showing the name of the page you are currently editing. Click it, 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. If you want to move the add-to-cart button above the description, for example, you will need to apply custom CSS in your theme.
Step 4: Assign the template to products
After saving your template, you need to assign it to one or more products for it to take effect.
Assign to a specific product
Go to the product you want to update 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
To apply the same template to a group of products, 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.
If you want every product to use a single template, assign that template to each product individually. Any product without a custom template assignment continues to use the default Fourthwall product page layout.