Skip to main content

Customize product page templates

Updated October 22, 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.

Click the dropdown showing the name of the page you are currently editing, 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.

In Template name (only you’ll see this), enter a name that will help you identify the template later, then click Create template.

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 code: 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 page 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.

note

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.

The product image gallery has two styles, Classic and Stacked. You change it in an existing product page template, so you don't need to create a new one.

  • Classic: the default thumbnail gallery.
  • Stacked: images appear one under another, and the product info stays pinned beside them while customers scroll.

Both styles can also stretch to the edges of the screen in full-width mode.

To change the gallery style:

  1. Open Site design and go to Layout.
  2. Click the dropdown showing the page you are currently editing, then select Product pages.
  3. Select the template you want to change, such as Default product page.
  4. Open the Product details section.
  5. Under Gallery, set Gallery style to Classic or Stacked.
Was this helpful?