Setting Up Templates for the Product List Page and Product Details Page – SHOPLINE Help Center

The Product list page and Product details page support multiple page templates, allowing you to create different layouts for specific product categories or individual products instead of using a single layout across your entire store.

In addition to the system's default template, you can create up to 20 custom templates for each page type and assign them to specific categories or products. Any category or product that is not assigned a custom template automatically uses the default template layout.

This article explains how to create and manage custom templates, assign them to categories or products, and understand how templates work.

Understanding Default and Custom Templates

Every Product list page and Product details page includes a default template. You can also create custom templates.

Default template: Built into the system and cannot be deleted or renamed. Any category or product that is not assigned a custom template automatically uses the default template layout.
Custom templates: You can create up to 20 custom templates for each page type (Product list page and Product details page) and assign them to specific categories or products.

The default template and custom templates share the same page structure, consisting of a fixed area and a body area. The only difference between them is the components placed in the body area.

Shared and Template-Specific Components

Each template consists of a fixed area and a body area, and components in each area behave differently across templates:

Fixed area (shared components): Components such as the top app bar, product album, product information, floating icon, and floating action bar are shared across all templates and can only be edited in the Default template. In custom templates, these components are read-only and automatically stay in sync with the default template.
Body area (template-specific components): Components added to the body area are unique to each template. Each template maintains its own body-area components independently, and changes made to one template do not affect any others.

Note: The Announcement bar is fixed at the top of the page (its position cannot be changed) and is a shared component. It can only be edited in the Default template. Custom templates automatically inherit the Announcement bar settings from the default template.

Creating Custom Templates

To create a custom template for the Product list page or Product details page:

Click the page selector at the top of the Shopper App editor, select Product list or Product details page, then click + Create template.
In the Create template panel, configure the following:
- Template name: Enter a name for the template (up to 50 characters).
- Based on: Select the source for the new template — the default template or an existing custom template.
Click Create. A confirmation message appears after the template is created successfully.

Note: You can create up to 20 custom templates for each page type. Once this limit is reached, you cannot create additional templates.

Assigning Categories to a Product List Page Template

After creating a template, you can assign it to specific product categories so that product lists in those categories use the template's layout.

In the left-hand menu, click Assign categories next to the template.
In the Unassigned tab, search for product categories in the Shopper App sales channel, or select them directly from the list (multiple selection and Select all are supported). After making your selections, click Assign.
The selected categories are moved to the Assigned tab.
To remove categories from the template, go to the Assigned tab, select the categories you want to remove (multiple selection and Select all are supported), then click Unassign.

Note: A category can be assigned to only one template at a time. If a selected category is already assigned to another template, you'll be prompted to confirm whether you want to reassign it to the current template. For detailed instructions on configuring the Product List page, refer to "Designing Product List Pages."

Assigning Products to a Product Details Page Template

After creating a template, you can assign it to specific products so that their product details pages use the template's layout.

In the left-hand menu, click Assign products next to the template.
In the Unassigned tab, search for products in the Shopper App sales channel, or select them directly from the list (multiple selection and Select all are supported). After making your selections, click Assign.
The selected products are moved to the Assigned tab.
To remove products from the template, go to the Assigned tab, select the products you want to remove (multiple selection and Select all are supported), then click Unassign.

Note: A product can be assigned to only one template at a time. If a selected product is already assigned to another template, you'll be prompted to confirm whether you want to reassign it to the current template. For detailed instructions on configuring the Product Details page, refer to "Designing the Product Details Page."

Managing Templates for Product List and Product Details Pages

Once you've created templates, you can view and manage them in the template list:

The Default template always appears first, followed by custom templates sorted in reverse chronological order (newest first).
To edit a custom template, hover over it and click the pencil icon.

To delete a custom template, hover over it and click the trash icon, then confirm the deletion.

Note: After you delete a custom template, any categories or products previously assigned to it automatically revert to the default template. Renaming a template may also break the association between the template and its assigned categories or products. Proceed with caution.

Important Notes About Product List and Product Details Page Templates

Components added to the body area are template-specific and maintained independently by each template. Sharing body-area components across templates is not currently supported. In contrast, fixed-area components (such as the top app bar, product album, product information, and floating icon) are shared across all templates and can only be edited in the default template.
Template creation and assignment are available across all markets. You can configure independent layouts for individual markets, while markets without an independent layout automatically inherit the App Default layout. For more information about multi-market layouts, refer to "Customizing Your App Layout by Market."