Customizing Store Page Layouts with Templates

Page templates let you customize different layouts and content structures for the same type of page—such as product detail pages, product list pages, blog pages, blog category pages, and custom pages. This feature is ideal when you need special display requirements for different product types, collections, industries, or marketing scenarios.

With page templates, merchants can:

• Create multiple layout versions of the same page type
• Customize the style, components, and content for each template
• Assign templates to specific products, collections, or content to achieve differentiated page experiences

For example, you can create one template for clothing and another for shoes on the product detail page, each with different components, layouts, and storytelling styles.

This article uses the product detail page as the primary example, but the same concepts apply to all supported page types.

Example for Feature Description

Taking the product detail page of the Arise Pro theme as an example, similar principles apply to other themes and pages.

For instance, a clothing store may have different layout requirements for displaying various collections (e.g., clothing, shirts) on the product detail page. To accommodate this, templates can be created for clothing and shirt collections on the product detail page, allowing for specific customization and linking of products to corresponding templates.

1. Different templates on the product detail page are decorated separately, and they can differ in content and typesetting.
   
   
    
2. For the shirt detail page template, the page consists of component product details, recommended products, and images with text based on the product characteristics, as shown in the following figure.
   
   
    
3. For the clothing template, the detail page comprises component product details, recently viewed products, and rich text based on the product characteristics, as shown in the following figure.
   
    

Configuration Path on Product Detail Page

Configuring a template involves four main steps: Create template > Preview template > Assign template to product > Modify template.

The product details page of the Arise Pro theme is taken as an example, similar principles apply to other themes and pages.

1. Create a template.

• Switch the drop-down menu at the top of the page to Products and select Create a template.
  
  
   
• Template name and Based on template: - Name the template based on the category or its characteristics and select the Based on template option. If no template is created, the creation will be based on the default template. If templates are created, you can select a previously created template as needed.
  
  
   
• Once the template is successfully created, the template name will be displayed in the upper left corner of the page. You can then proceed to design and decorate the template.
  
   
• After decoration, click Save to complete the creation.

2. Preview the template.

• To preview the template's decoration effect for different products, use the preview function. Click the drop-down triangle on the page to switch the product for preview. You can also directly edit the product information from here. 
  

3. Assign the template to the product. 
   
    

After creating a new template, the product detail page will still use the original template. You need to assign the newly created template to the corresponding product so that the product detail page displays the new template. This can be done in two ways: assigning the template in the editor page (supports batch assignment) and assigning the template in the admin product management page.

• Assign the template to the editor page:

•  
  • Click Assign, and the column of products to be assigned will appear on the right. 
    
     

•  
  • Select the product(s) as required and click Assign to link the template with the product. Additionally, you can assign the template to all products in the store with one click.
    
    
     

• Assign the template in the admin product management page:
  • When creating a new product and planning to assign a specific template, you can select the template from the admin product management page. 
    • In the product management detail page, scroll to the lower right and select the template you just created. (Note: Only templates created in the current release theme are shown here).
      
       

• After selecting the template, click Update in the upper right corner.

Other Issues Possibly of Your Concern

The relationship between the theme and template 

Theme: Refers to the overall style of the store. Currently, SHOPLINE offers 20 themes tailored for different industries, enabling you to create a store that reflects your brand's style. For more details, refer to the Beginner's Guide to Store Design.

Template: Involves creating different layouts for the same type of page. For example, templates A and B can be created for the product detail page, each with its own unique style. All products have the option to choose between templates A or B, resulting in different page styles.

• Template creation is tied to the theme, allowing for a maximum of 1000 templates to be created per theme. Templates created under Theme A cannot be transferred to Theme B. Thus, when you switch and publish Store Theme B, the links between products and templates from the original Theme A will automatically disappear.
  • Upon returning to Theme A, if no new templates have been assigned to products in Theme B, the original template links will remain intact.
  • However, if new templates have been assigned to products in Theme B, the links between the products and the original templates will be nullified, reverting to the default template.
• Preview features are available for upcoming themes, but assignment features are not supported.
• Preview functionalities for products and blogs only apply to those that are already listed or published. Products and blogs that are not listed or published are not supported.
• When copying a product or product category, the system automatically duplicates the selected template options for that product. This applies when copying products in the Products > Product Management page or the Products > Collections page.