Using Custom Product Fields

A big advantage of developing your website on Shopit is the ability to create custom fields for both products and orders.

These product custom fields are an extension of our standard Shopit database, and can be used to customise the look and feel of your product pages .

Product Custom Fields: An Example

Field	Type	Data
Brand	Standard	Berkeley
Price	Standard	£19.99
Description	Standard	"...abc123..."
Variation: Size	Standard	14"
Material	Custom	Cotton
Gender	Custom	Male

Standard Page Layout

Our Hub Template would output the standard fields as follows:

Page Layout with Custom Fields

To create a product custom field:

1. Go to Settings - Products - Custom Fields
   
2. Add a custom field e.g. Material
   
3. Note the Shortname created - you will need this later (see below)
   
4. Choose whether the database should expect a single line entry, multiline entry, dropdown, full WYSIWYG content, or checkbox. For more detail see Custom Product Fields - Guide to Types
   
5. Save
   

​​​​

Adding Custom Information to a Product

1. Go to a product (.e.g green check shirt)
   
2. Enter the Material information in the custom product field (see below)
   
3. Save
   

Adding the custom information to the page template

If you have knowledge of HTML and CSS, then you can edit the default product page template to pull these fields in.

We recommend this is completed by an expert. You can also contact Shopit for further help

1. Go to Sales Channel - Design - Edit Template (grey right hand dropdown under Edit)
   
2. Click to edit the product/detail.html.twig file
   
3. Find the position in the code where you want the information to appear
   
4. Insert the following code to pull that custom product information into the page template, where XXX is the shortname you have given the field
   

{{ product.customFieldValue('XXX') }}

1. You can also customise the look and feel of these custom data by adding a custom CSS class. In the example below we have styled the Brand, Material and Gender data in a smaller and grey, uppercase font
   

A template with custom fields added to the page template would therefore look like this:

• Related Articles

• Import products using a CSV template

  In Shopit, you can choose from 3 ways to enter your products: Manual add (there are 2 examples you can edit) Import a csv using our template Import from another platform e.g. Shopify It is important to remember that whilst Shopit has a default ...

• Manually Adding Products

  In Shopit, you can choose from 3 ways to enter your products: Manual add (there are 2 examples you can edit) Import a csv using our template Import from another platform e.g. Shopify It is important to remember that whilst Shopit has a default ...

• Importing products from another ecommerce platform

  In Shopit, you can choose from 3 ways to enter your products: Manual add (there are 2 examples you can edit) Import a csv using our template Import from another platform e.g. Shopify It is important to remember that whilst Shopit has a default ...

• Improving your product descriptions layout (when importing from a CSV)

  Using a CSV to import products Importing via a CSV is the most efficient method for creating lots of products in Shopit. Once you understand the CSV format, and the required information rules and parameters, you can create thousands of products very ...

• What are EAN, MPN, ASIN, ISBN and UPC numbers?

  Products use GTINs (Global Trade Item Number) in order to universally associate and differentiate item information. Marketplaces like Amazon use them to combine individual seller listings into one page offering the same item, for the benefit of ...