Page status: Up to date | Application version: From 1.3.5.2

Edit variant details

Use this area to view/change a product variant details.

Each variant has its own edit button.
You need to fill in details for each individual variant.
The variants are the containers for prices, stock, special prices and prices breakdown by quantity and variant code.

All fields in Basic details sections have the auto-save function (update). No save button to be clicked after you edit a field.
If all good, after you change and leave a field, the field will have a light green background;
If the field was not updated, it will have a light red background. This may be the case when you may write exact same text as before (is nothing to be updated) or your internet connection dropped. Either ways, refresh the page, re-open the edit section check if the correct information is in that particular field and try again if anything need to be changed.

After you write or change something in a field, leave the field to allow it to update itself. Click on another field to continue editing the product or anywhere outside of that field. Now you cans safety leave the page, knowing that everything is OK.

The Edit variant section includes:

  • Variant details
  • Prices
  • Special prices
  • Prices breakdown by quantity
  • Stock

Variant details

When you click on the edit icon from a variant, a new window will be open with the variant details page of that variant.

Name

The name refers to variant name. Because there are two ways to add a variant, the name has two ways of working:

(A) If the variant was created based on options, this field will not be editable. The variant name will be the options combination from which the variant resulted. The combinations are separate between them by a vertical line (|).
The name here has only informative function.
To change the name you need to change the options combination. (see Options)
If the Option name or Option value has a spelling mistake you will be able to correct it into Option area by editing the option. (see Options on left side menu)

(B)If the variant was created free style, this field is editable and you can change it at any time.
The editable field is text area where you can add plain text (no formatting accepted).

The name of variant appears in product details page (FRONTEND) in variants area, where customers will add the item into cart.


Enabled

Enabled, refers at variant status. If a variant is marked as enabled (Enable - Yes), that variant will be displayed in FRONTEND. If a variant is marked as disabled (Enable - No), that variant will not be displayed in FRONTEND.
You may disable a variant in case you did not finished setting it up or it is not available for sale for the moment.

The editable field is radio buttons controller.


Show order

Show order is a field based on which the variants can be ordered within product details page (FRONTEND) (the lower number is displayed first).
This field is optional, if empty chronological order is displayed (first added first displayed).

The editable field is a text area. Just write the variant order number in this box.

It is recommended to use sequences of 10s, 100s and so on, because in future you may need to insert a new variant between two existent ones. In this way, you do not need to reorder all variants, just assign to the new variant a number in between the two existent variants numbers where you need to be displayed.

For your convenience this ordering function can be manipulated without editing the variant, directly on variants listing.


Code

The Code should be unique to each variant to be used as unique identifier for Bulk updates proposes. If you do not assign a unique Code to each variant, you will not be able to use any of Bulk update facilities.

It is recommended to use same codes used in accounting program (for example MYOB) to be able to “link” data from website with data from accounting.
The variant Code will be display in frontend as well, in variant area.

This is an optional field.

If you do not use codes to identify your product variants, the admin interface can be setup do not display Code text box: in Shop configuration -> Settings & layout -> Products -> Use (enable) product code ( as a container of variants) choose NO (do not display) OR Yes (display).


Generate code

To make your job easier, the website can generate random Codes for you by clicking the Generate button.

This is an optional field.

This button Generate code can be accommodated to your business:

  • in Settings & layout -> Product details -> Admin - show [generate code] choose No (do not display) OR Yes (display the code generator)
  • in Settings & layout -> Product details -> Admin - generated code length (no prefix & suffix) write how many numbers to have your generated code (not considered the prefix and suffix which are coming on top of generated code)
  • in Settings & layout -> Product details -> Admin - generated code prefix write the prefix you want your code. Leave empty for none.
  • in Settings & layout -> Product details -> Admin - generated code suffix you want for your code. Leave empty for none.

Supplier code

Supplier code is optional field for you to fill in just with informative propose.
It will appear only in backend (your customers will not be able to see it).

If you do not use codes to identify your product variants, the website can be setup do not display Code text box: in Settings & layout -> Products -> Use (enable) product (variant) supplier code choose No (do not display) OR Yes (display).


Global item code (GTIN)

A Global Trade Item Number (GTIN) is used to identify trade items globally.
When you add a GTIN to your product listing, you are providing yet another way that your product can be identified.
Adding GTINs to your product data can also help you sell more effectively on other channels like Amazon, Google Shopping and eBay, just to name a few.

This is an optional field.

If you do not use GTIN codes for your product variants, the admin interface can be setup do not display Code text box: in Shop configuration -> Settings & layout -> Products -> Use (enable) product variant GTIN (Global Trade Item Number) choose NO (do not display) OR Yes (display).


Weight

The Weight field should be completed in KG.

The weight is used in postage computation.
This field can be left empty if you include the postage costs in variant price and you advertise Free postage for these items.


Length

The Length field should be completed in cm.

The length is used in postage computation.
This field can be left empty if you include the postage costs in variant price and you advertise Free postage for these items.


Width

The Width field should be completed in cm.

The width is used in postage computation.
This field can be left empty if you include the postage costs in variant price and you advertise Free postage for these items.


Height

The Height field should be completed in cm.

The height is used in postage computation.
This field can be left empty if you include the postage costs in variant price and you advertise Free postage for these items.


Add image

Every variant can have its own image.
Just one image is allowed for variant. Multiple images can be assigned to product to showcase its features.

To make thing easier for you (to not make compulsory to add the variant image at all time), Variant image can be setup what image to display when no image was assigned to that variant under Shop Configuration in Settings & layout -> Product details -> Variants image - if not set will show : 0 - product main image, 1 - [no image] image, 2 - nothing: Set 0 (zero) to display the main product image as variant image when variant image missing OR set 1 (one) to display no image icon when variant image missing OR set 2 (two) to not display variant image when the image variant is missing. Remember that when you set one of these rules, these rules will be applied for all products not just for some.

There are cases when the variants look different and the variant image is meant to illustrate this difference (different color, different configuration and so on). In case the product variants are looking different, you can Upload an image for the current variant or you may Browse for the image on the system. (Same as for product images)

At the left of no image icon, is a light blue Add image button. Click this button to add an image and replace the no image icon.

When you click on Add image button, a pop-up window will give you two options:

  • Upload image from your device
  • Browse images existing on server

Note:
The products which have only one variant (as container for product price) have no image to be assigned.


Upload image

Most likely that you need to upload the image of the variant from your device. The image manager prompt you this option.

You have two ways to upload the image from your device:

  • Click Upload from local device red button and choose the image you want to upload: an explorer will open to assist in find the image on you device. When you find the image on your device, click on it and then click open button from your explorer.
  • Drag and drop the image into this section: Find the image on your device and drag it over the upload rectangle (where the red Upload from your local device button and surrounding area marked with a rectangle)

The system will do following operations at once if there are no uploading errors:

  • upload the image
  • will close the image manager window
  • will assign the image uploaded to current variant

Uploading errors

There are some restrictions for images uploaded as mentioned under the Upload from your local device button

  • File extensions allowed: jpeg,jpg,png
  • File size allowed up to: 20Mb

This extensions file are cleaner and safer (website security concern). The file size will more than enough for big nice images and will protect you against wasting the space on your server.


Browse image

If you already uploaded the image of the current variant before, then you want to find it on server and assign it to this variant.

Click the Browse image tab in image manager.

In Browse image tab you will find following:

  • The page title appears on top left and includes the page title Add / change image for Variants: followed by the variant name and its ID.

  • Showing Images only (Files are not included, see File section for files).
    Top left on Browse image tab

  • The areas where the images was uploaded. Default is showing the Products variants images as your current area now. You can choose another area from dropdown menu.
    Top left second position on Browse image tab

  • The Search area where you can search the image based on its name.
    Top right on Browse image tab

  • The Images listing will be displayed under this tab, showing the first 10 images in chronological order (first image shown is the last image uploaded).

  • Show more button will display a bunch of 10 images each time you click it.
    Show more button appears on the bottom left. It appears only the Image listing has more than 10 images.

  • Show all button will display all images.
    In case you have many images (hundreds or thousands), the list may be too long and may take a while to be displayed. You may be happier with the results of Show more button.
    Show all button on the bottom left. It appears only the Image listing has more than 10 images.

  • Close button will close the image manager canceling the add image process.
    Close button is a cross on right top opposite to the page title.

Search image

Enter into the search box what you are looking for and press Enter key or click on green magnifier icon.
The system will look to match your search string in name of the images. It is an autocomplete search box, it means:
- once you start typing will be automatically shown in a drop down all available options
- you can select one of available options and click green button or press Enter key; The selected option only will be shown in listing as search result.
- or you can anytime press Enter key or click on green button and you will get in search results all images that match your search string.


Images listing

In Images listing you can sort the images by clicking one of the following headings:

  • File name alphabetical sort
  • Size ascending sort
  • Date chronological sort
  • # ascending sort

You can sort listings ascending and descending for all fields that has headers in blue with underlined text when click on it once and after that once again.


Edit file

If the thumbnail or the name of the image is not enough clear, you can edit the image to view it before deciding if it is the correct image to be assigned to the current variant.

If you click on image thumbnail, image name or the edit icon in image list you will Edit image (view) that particular image.
A new pop-up image will display you the image with all three images that the system create every time you upload an image to optimize the image display in FRONTEND (optimizing the time to load a page).
The light blue download icon button (at right side of the images) will open a new tab on your browser displaying the original image you uploaded on server. Here you can save the image on your device.
You can close the Edit file from one of the close buttons: a cross on top right of the window or the Close white button on the right bottom.


Assign image to variant from Browse images

At the right of each image row in Images list is an green + button> Click on it in chosen image row to assign that image to the current variant.

In case that image was already assigned to the current variant you will get on screen an error massage: Image is already assigned. Click the blue OK button or close the window from the cross top right. Choose another image by clicking the green plus symbol button.

After you click on the green plus symbol on Brows images tab, three things happen:

  • the Browse images tab closes
  • the image is assigned to the variant
  • the image thumbnail is replacing the no image icon

Change image button

If you need to change an existing image with a new one, click the light blue Change image button from the right of the image you want to change.

When you click on Add image button, a pop-up window will give you two options:

  • to Upload image from your device
  • to Browse images existing on server

After you uploaded the image or you click the plus symbol in browse images tab of an image, the following will happen:

  • upload the image if applicable
  • the image manager will close
  • the image will be assigned to current variant and will replace the changed image
  • the initial image will lose its assignment to the current variant

Delete image

Delete button from the image will have as effect unassigned that image from the variant, but will not delete the image from the server.
Click the Delete image button to delete the assigned image.


Variant thumbnail image

If you click on the variant thumbnail image a pop-up window will be displayed with the image view.
At the top of the window you will have the name of it.
From this window you can:

  • save the original size image on your device
  • Close the image view by clicking the close button on the bottom or the cross close button on the right top.

On this page

Snapshots / images

Edit variant details

Edit variant details

When edit an variant will open with basic details area.

Variant created free style

Variant created free style

When the variant was created free style, the name of the variant is an editable text area.
You can change the name of this variant at any time.

Product details (FRONTEND)

Product details (FRONTEND)

The variants area where customers are adding items to their cart.

Variant image

Variant image

Assigned image to a variant.
View or delete variant image.
When delete an image form variant, that image will NOT be deleted from your library.

Product with one variant

Product with one variant

The products which have only one variant (as container for product price) have no image to be assigned.

Upload variant image

Upload variant image

Click on Add image blue button. A pop-up window will appear to assist you with uploading the variant image from your device.

Browse images tab

Browse images tab

Look for the image already uploaded earlier.

View variant images

View variant images

When you click on variant image thumbnail, a pop-up window will appear with the image view.

Minimal variant details

Minimal variant details

Minimal configuration for variant details. The optional fields were taken off.

Headings