Customize product page templates
Updated August 1, 2026
Create and assign custom product page templates to control the layout customers 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 customers 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.
On the Oasis theme, the Product details section uses a fixed side-by-side layout on desktop: the product image appears on the left and the details (title, price, add-to-cart, description) appear on the right. There is no built-in toggle in the Site Designer to switch to a vertical layout where the image stacks above the details.
Arranging the product image and details
The Product details section controls the core product block on a product page template, but its layout is fixed. If you want more control over where the image sits relative to the text, the Featured product section is the configurable alternative.
The Featured product section is available on your homepage and custom pages, not on product page templates. It has an Image placement setting that lets you choose whether the image appears on the left or right side of the content.
| Section | Where it appears | Image placement |
|---|---|---|
| Product details | Product page templates | Fixed (image left on desktop) |
| Featured product | Homepage and custom pages | Configurable (left or right) |
Stacking the image above the details in a vertical layout is not natively supported on product page templates. If a side-by-side layout is not what you want, your options are:
- Add a Featured product section to your homepage or a custom page and set Image placement to your preferred side.
- Apply custom CSS to the Product details section to override the default side-by-side behavior on the product page itself.
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.