Website > Layouts > Editing Product Pages

In this Topic Show

Editing Product Pages

AbleCommerce provides three types of product display pages.  Each product display page is defined by a Layout and Theme.  They are assigned to products in your store.

To View or Change Product Page Assignments

  1. From the Manage Products page, or from the top-menu, go to Website > Product Pages.

  2. Click the linked number counter.

  3.  You should be viewing the Product Page usage report for the selected display page.  When a product page is directly assigned to any product in your store's catalog, it will be shown from the product page usage manager.

  4. From here, you can select any Product Page and the results (if any) will appear in the bottom grid as shown in the above example.

    The matching results that are shown include the product name linked to the editing page, the currently used product display page, and the visibility setting for the product.  

  5. If desired, you can check one or more boxes in the first column and apply a different product display page by selecting one from the Change Selected To box.

  6. Click the UPDATE button to apply the change.

  7. To return to the Manage Product Pages, click the CANCEL button.

 

Changing a Product Display Page

There are other ways you can change the Product Page assignment.  If you are logged in as an administrator, you can view and change the display page assigned to any product by previewing the storefront.  Simply, scroll down to the bottom of any product page (below the footer), and you should see an area to edit.

  1. Next to Edit, you can click the linked product name to go directly to the Edit Product page.

  2. Towards the bottom of the Edit Product page, in the Advanced Settings section, there is an option change the Display Page.

  3. When finished, click SAVE.

  4. Even easier, you can select a new Display Page directly from the storefront and click UPDATE.  It will be applied to this product only.  

  5. You can click the Manage Display Pages button to return to Manage Product Pages administration.

Editing a Product Page Display

  1. To modify a product page, go to Website > Product Pages.

  2. Click on the EDIT icon in the Actions column.

  3. In the last field, you will see the ConLib reference (circled in red).  Using the properties of the control, you can change how information will be displayed on the page.

  4. Use the examples below to see which properties are available on how they will be shown on the page.

  5. Change the Usage properties as needed.

    e.g. [[ConLib:ProductPage OptionsView="DROPDOWN" ShowVariantThumbnail="False" ShowAddAndUpdateButtons="False"]]

  6. Click the SAVE button when finished.

Sample Product Page Displays

TIP:

In the list below, the Control Name is listed with an example output in the store.  The controls will each have additional properties that allow for easy customization.  The controls are located in the \ConLib\ folder and can be changed as needed.

 

Basic Product

A product display page that shows the basic product details.  The page uses tabs.  This example is shown with the options in a drowdown list.

Summary: Control that implements the product detail page

Usage: [[ConLib:ProductPage OptionsView="DROPDOWN" ShowVariantThumbnail="False" ShowAddAndUpdateButtons="False"]]

Properties:

OptionsView
Indicates whether the product options will be displayed as dropdowns or you want to show variants in a grid. Possible values are 'DROPDOWN' and 'TABULAR'
ShowVariantThumbnail
If true thumbnails will be shown for variants. This setting only works for 'TABULAR' view.
ShowAddAndUpdateButtons
If true inventory is add button will be shown while editing basket items


 

 

Product Row

A page that displays information in rows.  Works well for items that have a lot of purchasing options.

Summary: Control that implements the product detail page. Instead of tabs, separate rows are used to display different sections of information.

Usage: [[ConLib:ProductRow OptionsView="DROPDOWN" ShowVariantThumbnail="False" ShowAddAndUpdateButtons="False"]]

Properties:

OptionsView
Indicates whether the product options will be displayed as dropdowns or you want to show variants in a grid. Possible values are 'DROPDOWN' and 'TABULAR'
ShowVariantThumbnail
If true thumbnails will be shown for variants. This setting only works for 'TABULAR' view.
ShowAddAndUpdateButtons
If true inventory is add button will be shown while editing basket items

 

 

Product with Options Grid

A product display page that shows all variants of a product in a grid layout.  This display page should not be used with products that have large numbers of options.

Summary: Control that implements the product detail page

Usage: [[ConLib:ProductPage OptionsView="TABULAR" ShowVariantThumbnail="False" ShowAddAndUpdateButtons="False"]]

Properties:

OptionsView
Indicates whether the product options will be displayed as dropdowns or you want to show variants in a grid. Possible values are 'DROPDOWN' and 'TABULAR'
ShowVariantThumbnail
If true thumbnails will be shown for variants. This setting only works for 'TABULAR' view.
ShowAddAndUpdateButtons
If true inventory is add button will be shown while editing basket items

 

 

 

 

Related Topics

Back to Top

Go to Site Map