E-commerce Online Store - Design - Product Layout Design

The Product Layout Design area allows flexibility in the appearance of the product display pages. A merchant can choose from one of six predefined templates, customize a predefined template, or create one from scratch. The Product Layout Design template showcases your products and includes things like product name, description, pricing, images, add-to-cart and much more. This article will explain how to choose and configure a layout.

In this article, we will discuss:

• How to Access Product Layout Design
• Predefined Product Layouts
• Clone and Customize Product Layouts

How to Access Product Layout Design

The Product Layout Design area is accessible through the E-commerce control panel.

1. Log in to the E-commerce control panel.
2. Navigate to the Design tab.
3. Next, select Product Layout Design.
   
   
    
4. From there, you will see this page:
   
   

Predefined Product Layouts

Each online store comes with 6 predefined layouts. These can be used as-is, which includes the most important elements of a product page. This section allows you to preview, control, and copy each layout.

• Click each thumbnail to see a generic preview.
• The Preview button under each will allow you to see how the layout works with a product on your site.
• Clone will copy the predefined layout and allow you to edit it to your own specifications. See Clone and Customize Product Layouts.
• Clicking Activate will turn on that layout and make it the default template for all products. Customization options are available in the Inventory > Products > Advanced (tab) area.

The current layout is indicated by the word current in parentheses. When you are finished on this screen, click Return to go back to the Inventory page.

Clone and Customize Product Layouts

The Custom Product Layouts area holds any cloned layouts. You an also create a new product layout design. This will allow you to modify the HTML of the layout and customize the layout for their site.

After cloning a Product Layout, you are presented with a few options:

• Edit will allow you to modify the HTML and scripts used to create the layout.
• Clone will copy the layout again. This is useful if you have made customizations to the layout already and want to be able to go back to that version if something unknown breaks in a future edit.
• Activate will make that Product Layout Template the default layout for all products.
• Delete will remove the custom layout option. There is a 10 layout limit.

Below are the Custom Product Layouts. A merchant can create a new product layout design by entering a name and hitting the Create & Edit button.

Learn more about Advanced Product Layout.