Product custom fields are used to specify and optionally display additional product data.
This is useful when the product description field doesn't quite manage.
Product custom fields enable easier management of discreet product attributes across your whole product range.
If a product custom field is not populated for a product it won't be shown at all.

1. Create the tabs:

go to: Products >> Setup >> Custom Fields

A product custom field can either be a parent custom field (in which case it is a tab and it's name becomes the tab label) or a child custom field, which contains data. Create as many tab/parent custom fields as you require, and assign their names to be what you'd like displayed on the website.

2. Create the custom fields:

Choose a code, a name, the data type and set the options to public and product.

3. Adding data to your products:

Once you've created your custom fields, you can bulk-import the custom field data using the datamanagement tool to import an xls file, or you can just edit each product individually. For now I suggest editing the products individually, but I've included the bulk import process below: (Setup >> Other >> Data Management).

• Col A: Product ID
• Col B: custom field code (PCF_custom_field_code)
• Col C: custom field value

It's easiest to import one custom field across all products at a time.
remember to remove any column headers from the excel file before import.
The file is easiest generated by first running a product export and deleting all but the product name and product ID columns first.

4. Pulling in the product custom fields in to your product display pages:

You can either display all product custom fields together in a tabbed format using %TABS%, or you can display them individually using: %PCF_my-custom-field-code%

CSS styles for the %TABS% Widget

The Following CSS styles should get you started. Include them in your template's styless.css stylesheet file, which can be found here: Website >> Design & Layout >> Upload Template Stylesheets.

/* Option Tabs
-------------------*/
.space {
	margin-top: 40px;}

.ui-tabs-hide {
	display: none;}

.ui-tabs-nav {
	list-style: none;	padding: 0;	margin: 0;	height: 17px;}

.ui-tabs-nav li {
	float: left;}

.ui-tabs-nav a {
	float: left;	padding: 6px 12px;	margin: 0px 10px 0px 0px;	text-decoration: none;	color: #6b7d84;	outline: none;	background: #E9ECEF;	border-top: 1px solid #C7D3D8;	border-left: 1px solid #C7D3D8;	border-right: 1px solid #C7D3D8;}

.ui-tabs-nav a:hover {
	background-color: #d6dbde;}

.ui-tabs-nav .ui-tabs-selected a {
	background-color: #d6dbde;	border-top: 3px solid #6b7d84;	padding-top: 4px;	color: #6b7d84;}

.ui-tabs-disabled {
	
}

.ui-tabs-panel {
	padding: 1em 0px;	background: #fff;	/* declare background color for container to avoid distorted fonts in IE while fading */
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
	display: inline-block;
}

* :first-child+html .ui-tabs-nav {
	/* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
	display: inline-block;
}