Custom fields allows you to add anything (text fields, text area, pick-list, etc.) that you want to tell potential customers about your product.

To better understand, let's take an example;

Some good examples of custom fields would be:

Book Type

  • About the Book
  • Product Details
  • ISBN
  • Dimensions
  • Language
  • Publication Date

Other Product Types

  • Screenshots
  • Licenses
  • and many more...

Custom Fields for product page

Step 1 Creating a product custom fields

Navigate to any [Joobi product that you are using] in the Catalog >> Fields or Tools menu >> Models & Fields

fields-product
From the Fields page, click New to create a field.

fields-product-new
From the field creation page, fill in all required option according to your requirements

field-new-product

Name: Name of the field which will be displayed to the user.
Column: Optional, the name of the field in the database.
Description: A description to explain the field. The description will be showed to the user.
Type: Choose the type of field you want to create.

  • Text
  • Translated Text (This text will be translatable to other available language in your site)
  • Text-area
  • Translated Tex-area (This text-area will be translatable to other available language in your site)
  • Pick-list
  • Date
  • Date & Time
  • Yes/No
  • Link
  • Number
  • Percentage
  • Publish
  • Email
  • Password
  • Yes/No Reversed

View Access: Define the required access to view the field.
Edit Access: Define the required access to edit the field.
Searchable: Define if the field should be searchable.
Advance Search: Define if the field can be searchable with the advance search functionality.
Required: Define if the field should be required.
Publish: Enable to publish or unpublish the field from all views.

Step 2 Field type selection

Once you select the type of field you want to use, a new set of options will be available in the page. Note that the option available is based on the field type you selected.

field-edit-selection

Assignment section
All available page will display in this section and enable them if you want your field to display in the chosen location.

Reminder

In case this area is empty, this means you haven't visited any of the pages in the storefront. You need to browse in your storefront so the pages will be loaded.
This is not a bug but a feature in the system that install only the views that you need and visited to make the product size small as possible. If you do not visit the page, it means you don't need it.

Product page: This will be the storefront product page.
Container: These are the areas in the product page storefront where you can assign the field to display.

  • Fields (Area middlecenter) is the default area
  • Description (Area: middlecenter)
  • Above review (Area: abovereview)
  • Map (Area: map)

product-page-field


Product edit: This will be the page in the site admin or vendor area where you create the product.
Note: If you do not assign the field in "product edit", you can;t access the field to write about data about your product.

Container: These are the areas in the product edit page in the admin or vendor area where you can assign the field to display. (see below screenshot)

  • Fields
  • Attributes
  • General
  • Location
  • Delivery
  • Publishing

product-edit-page-field-view


Types section

You can assign your fields to a specific product type and they will only display to the page and type they are assigned.

type-selection-field

Form Parameters

Editor Type: If you want to insert html in your text-area field, you need to select a text editor that is available in your site.

Process CMS Content: Yes to process the content through the CMS content plugin like inserting Joomla plugins or modules.
Process Joobi tags: Yes to process any Joobi tags/widget in the content.

field-form-parameters

Step 3 Add information about your product on your newly created field

To add some data into your newly created fields, you need to edit/create a product and access the field section or to the place where you assigned the page edit container in step 2.

product-field-data

Product fields look like this in the product page storefront;

field-area-store