Contents

Introduction

Predefined Product Layouts

Clone and Customize Product Layouts

Introduction

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.

Product Layout Design area is accessible through the ecommerce control panel.

1. Login to the ecommerce control panel (learn how to login).
2. Navigate to Design tab.
3. Next select Product Layout Design.

Figure A

From there you will see Figure B.

Figure B

Predefined Product Layouts

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

• Click the thumbnails of each 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 in this screen, click Return to go back to the Inventory page.

Figure C

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 (Figure D):

• Edit will allow you 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 the Custom Product Layouts a merchant can Create a new product layout design by entering a name and hitting the Create & Edit button.

Figure D

Learn more about Advanced Product Layout editing and options.