If you need to add product properties or variations such as size, colour, style, shape etc. you need to use options. With ViArt Shop the options can be set up for a whole product type as well as for an individual product. Please see section 4.7 on setting up product type options.

Individual product options can be set by going Products > Products & Categories and clicking on Options & Components link under the product name.

All the options fields are divided into several sections:

• Main option settings
• Option values
• Option appearance
• Javascript settings

Main option settings

Option Order - This determines the position of the option among other options. For example, if you enter '1' in this field, then this option will be displayed as the first.

Option Name - This is the title of the option, for example it could be Size, Colour, Type, Shape etc.

Before proceeding to option control selection please note, there is a setting in Products > Products Settings > Appearance tab - Display components and options list which has two choices as list or as table and this accordingly effects the outlook of options, for example as in the screenshot below.

Option Control - There are a few standard option controls available. The display format for these could be seen in the screenshots below.

Parent Option - With the help of this setting you can set up dependent options. First you need to select the dependent option from the drop down box and then you may even select specific value for which to display the current option. For example, if you sell shirts and offer custom engraving you may create an option 'Custom Engraving' with two values 'yes' and 'no' and then create another option 'Engraving Text' which will have parent option 'Custom Engraving' with the value 'yes'.

Price - Here you can set up the list price and/or trade price for the option. The price could be set as:

• Single total price - a single price for all selected values.
• For specified control type - a price for every value selected, meaning if there are two values selected the price would double.
• For specified letter - price for every symbol typed in by user (note, this setting is used for Textarea or Textbox controls).
• For specified non-space letter - price for every symbol typed in by user except spaces.

Discount - You can set up a discount for options price. There are a few discount type choices:

• Summary Discount - it is a discount on a fixed amount. For example, if all selected options cost $100 and Summary Discount is $20 then you will pay $80 in total.
• Free of charge control types - you can type in the box nearby how many option values you would like to make free. Note if you don't type anything then the value will be '0' by default.
• Free of charge letters - when using "Price - For specified letter" you can arrange a number of symbols to be for free.
• Free of charge non-space letters - similarly you can specify a number of free non-space symbols.

Maximum Limit - when using text option controls you can set up a limit on allowed number of symbols.

• Maximum number of letters for all control types - this is a total number of characters allowed to type in all option fields (usually used for Text Box List control type).
• Maximum number of letters per each control type - this is a limit of characters per one option field.
• Maximum number of non-space letters for all control types - this is a limit on total amount of characters without spaces in all option fields.
• Maximum number of non-space letters per each control type - this is a limit of characters without spaces per one option field.

Note: when using price, discount or limit settings, there appear a special footnote on the website informing about these settings. In case you would like to change these default messeges (e.g. '$1 per non-space letter' etc.) you can edit them in System > System Static Messages (see section 12.6).

Option Text - This a default value for Label, Textbox and Textarea controls.

Option Style - By putting here CSS styles you can change the option's appearance. For example, if you type in 'border: 1px solid red;' there will appear a red border outside the option, if you type in 'text-transform: uppercase;' the option's name and its values will appear in uppercase letters and so on. Please note the tags entered here will be applied to the whole option. If you want to customize only the appearance of option values you should use the 'Control Style' in the 'Options Appearance' section.

Show Property - You can select the pages on which this option will be visible. In addition to product listing and product details page there are available such pages:

• On table view list -this is actually the product listing page but with Default View Type: table view (specified in CMS > Product Listing Page > Product Listing Page block).
• On grid view list - this is a new display of product listing page which is planned to implement soon.
• On separate page - this setting transfers customers who didn't select the option on product listing page but clicked 'Add to Cart', to the separate options page where they have to select product options. The blocks for product_options.php page can be selected in CMS > Product Options.
• On checkout process - this means the option will be available to select on order_info.php page (first step of checkout).

Option Required - If this option is checked, then customers must choose one of the option values in order to proceed with the purchase of this product.

Option values

This section is required if the option control is Checkboxes List, Listbox, Radio Buttons or Text Boxes List.

Description & Code fields provide additional information about the product such as the option selection fields, their order and codes.

Note: in case product has a value in Code and/or Manufacturer Code fields in Products > Edit Product then option's Code and/or Manufacturer Code will be added to them. For example, the Code on Edit Product page is '123' and option's Code is '555' then the code displayed on checkout will be '123555'. Whether to show Product Code/Manufacturer Code on checkout and basket can be set in Products > Products Settings > Appearance tab. Whether to show these values in invoice/packing slip is set in Orders > Printable Page Settings.

• Value - This is the value or selection choice for the particular option. For example it could be: Red, Green, 15", 27" etc.
• Sort order - This is the position of this value among others on the website. If not filled, system displays option values by order of their creation.
• Code - This can be the internal stock code or part number.
• Manufacturer Code - This can be the OEM or Manufacturer code.

Prices fields determine extra charges for option values that will be added to the total product cost.

• Selling - This is the list price of the option.
• Trade Price - This price is shown to those users who have Trade Price activated in their User Type.
• Percentage - This is a percentage from the original product price.
• Buying - This is the original cost of the product option and is only for internal use i.e. this price is only used for product reports and margin calculations and will not be displayed on the website.

Stock Level & Weight fields help to set stock levels on particular option value.

• Qty - This is the quantity of this type of product in your stock.
• Use / Hide - This option either activates or disables stock level for this option value.
• Weight - This a weight of this particluar option selection.

Downloadable Files - This setting works only for downloadable products which means if there are some files uploaded in Products > Edit Product > Downloadable tab then you can select one of these uploaded files here.

By ticking Default checkbox you can set some value/values to be automatically selected.

By ticking Hide checkbox you can temporarily hide this product's value.

Ticking Delete checkbox will delete the value after you update the page.

To add more option values click on the Add button.

In case you would like to delete the whole option with all its settings click on the Delete button.

Option appearance

This section tells the system how the option should look. In order to customize its view you need to use HTML tags.

Control Style - it is the same as the 'Option Style', except that its value is applied only to the option values.

Before Title HTML and After Title HTML - these boxes contain HTML tags applied to the option name.

Before Control HTML and After Control HTML - these boxes contain HTML tags applied to the option values.

End HTML - here you can put HTML tags that will be applied at the end of the option block. This can be used for example, if you want to put some text after the option.

Javascript settings

This section allows setting up various Java scripts for different purposes. You can specify actions for OnChange and OnClick events as well as for the control type itself.

Here is an example of how you can make the product image change on selecting the option value. For this you'll need to make the following steps:

Note: for this example you can use image of any format (gif, png, jpeg etc.) but don't forget to specify it in the code correctly (value + '.FILE EXTENSION').

• 1. Create the 'Colour' option with Listbox control type.
  Note: the feature we're describing works only with this control type.
• 2. Put in the Javascript Settings 'OnChange Event' field the following script:
  document.image_{form_id}.src='images/big/[your large image name]' + this.form.property_{property_id}.options[this.form.property_{property_id}.selectedIndex].value + '.jpg';
• NOTE! for v.4.0.7+ use a different code, namely:
  document.image_{form_id}.src='images/big/image' + this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].value + '.jpg';

   

• 3. Upload the option images into the 'images/big' folder. Please note, it is important to name these images as this product's large image plus the ID of the options value.

When this is done, click on the option value and product image will change to the corresponding option image.

To return the main product image back it is enough to click on 'Select Colour' or refresh the page.