1. Introduction

Sometimes, the customer becomes confused about the size of product which he wants to purchase. Because every brand/manufacturer design his product according to own size specification and it may result in the different size of the same thing as per brand/manufacturer. Due to this type of confusion, customer avoids his purchasing and go away from the store.

To overcome this type of barriers, Knowband’s Magento Product Size chart extension will provide facility to store owner to set chart on products according to the category as well as prepare specific chart for products. This chart will show the exact size of given measurement unit. So that, the customer can get clear about the size and buy the item.

Magento size guide extension just provides an easy way to store owner to prepare size charts for his products as per need. Size chart provides ease as well as give clear specification about the product in terms of size, area etc.

Features:

• The Magento Product Size chart module is very easy to install and configure.
• The store admin can display size charts just by entering values.
• This Magento size guide module allows the admin to show size charts on a category of products or a single product.
• N number of rows and columns can be added easily in the size chart easily.
• Magento size guide offers preview option for checking the implementation.
• There is an option to add images, guidelines or any HTML content to the size chart pop-up.
• Magento product size table is multi-lingual compatible.
• The store admin can easily enable/disable the Magento product size table plugin.
• Magento Size Chart link Module is highly customizable
• No technical knowledge required for implementation of this functionality.
• The admin can easily implement this functionality without changing a single line of code.
• The Magento size chart link module has a mobile responsive layout.

Admin Benefits:

1. Magento size catalog extension provides a simple and easy way of creating size charts for specific products.
2. The eCommerce store admin can assign size charts with single products as well as with multiple product categories.
3. Magento Size Chart extension is highly customizable. The admin can also add images and necessary content to size charts.
4. Multiple rows and columns can be added easily without any restriction.
5. Magento Product Size chart extension allows the store owners to preview the size charts before implementation.
6. Size catalog module offers multi-lingual support.
7. Magento Product Size chart extension reduces website’s bounce rate which results in increased revenue of the store.
8. There will be reduced product return requests when the customers will purchase the product after viewing the size chart.

Customer Benefits:

1. Magento product size catalog module provides an attractive and user-friendly interface to users.
2. The customers can easily view the size chart just by clicking the size chart link.
3. Magento Product Size chart extension reduces confusion of customers regarding product size and also increases their decision making while purchasing.
4. This Magento size chart popup extension provides a better shopping experience to the online.

2. Installation

After purchasing the extension, you will get following files as shown in below screen:

1. Sizechart.zip (contain source code of the extension)
2. User Manual

Follow the following steps to install the extension:

• Unzip the sizechart.zip folder
• Copy all the files and folder of unzipped folder into your store root directory
• After coping all the files and folders, clear the cache.
• Just open any page of your store. Magento will install the module at the time of loading of any page.
• After installing, please login to your admin panel. And go to the below menu: (System > Configuration > Advanced)

Here you will see that the size chart module is listed.

3. Extension Interfaces

There are two ends from where the user will interact with size chart functionality. They are following:

• Admin Interface (Only be accessible by admin)
• Customer Interface (anyone can see and only accessible on Product Page)

Each interface has been explained in next section.

Admin Interface

This interface will only be accessible in the admin panel. After installing the extension, size chart menus will be visible under catalog menu as shown in below screen:

There will be 4 submenus from where you can create and manage charts for your products.

4.1 Chart Attribute Sets

This is the section where you can prepare chart attributes and measure unit for the chart. Chart attributes mean Rows and Columns of your chart.

4.1.1 Chart Attributes Set Listing

On clicking the “Chart Attribute Sets” menu, you will be redirected to the page where all the previously created attributes sets will be displayed. If there is no set created yet, the system will the list as empty list as shown in below screen:

List Columns

1. ID: Unique id of the attribute set.
2. Created At: This column will show you the date and time at which the corresponding attribute set is created.
3. Attribute Set Identifier: This is nothing except just a label or name to the corresponding attribute set.
4. Value Unit: Measurement unit like cms, mtr, mm etc.
5. Status: Status (Enable/disable) of the corresponding attribute set.
6. Actions:

• Preview: On clicking this action, system will show you the preview/snapshot of the chart with dummy values as shown in below screen:

• Edit: By clicking this link, the system will redirect to you attributes set edit page where you will get the form with already filled values.
• Delete: With this action, you can delete the corresponding attribute set at any time.

Add New

There will be a button on the top right corner of listing page. From here, you can add a new attribute set at any time. Adding and updating attribute set has been described in next section.

4.1.2 Add New or Update Attributes Set

On clicking “Add New”button or clicking “Edit” link on any attribute set, system will redirect you to the attribute set configuration form as shown in below screen:

Fields

1. Status: This is a drop-down list of status. This will be a required field and by default will be disabled.
2. Set Identifer: Required field. This field is just used for labeling/naming your attributes set. This field will not be visible to customers.
3. Value/Measurement Unit: Optional field. This will be drop down list with some predefined measurement units. If you want to more unit, please contact our support.
4. Help Guide: This will be a just help text to guide admin to how to create attribute sets for the chart.
5. X/Y Label: Optional field. This field will be visible to you with each store view as the website can have many languages. So you have to provide label/text for each store view. This label will be shown for the common x-y axis in the chart.
6. Row Labels: Required field and initially will be blank. This will be the label used for labeling rows of your chart. You can add or delete rows as per your need. Each row label will be shown to you for each store view and you have provided label for each store view.
7. Column Labels: Required field and initially will be blank. This will be the label used for labeling columns of your chart. You can add or delete columns as per your need. Each column label will be shown to you for each store view and you have provided label for each store view.

Actions

• Back: This action will redirect you to listing page.
• Preview:  On clicking this button, the system will show you the snapshot of the chart as per current attributes set as shown in below screen:

• Save: By clicking this button, the system will save your attributes set configurations and redirect to you on attributes set listing page.
• Save and Continue Edit: By clicking this button, the system will save your attributes set configurations and redirected back to form again.
• Delete (In case of Editing/Updating): This action will delete the corresponding attributes set from the system.

4.1.3 Deleting Attributes Set

We have given delete options to you to delete attributes set record at a time. You can delete attributes set either from listing page or edit page.

Note: If you want to delete attributes sets and you have created some charts by using this attributes set then the system will also delete that chart from system to prevent data inconsistency.

4.2 Size Charts

Here you can create and manage your size chart by using any attributes set created in the last section.

4.2.1 Size Charts List

On clicking “Size Chart” menu, the system will redirect you to page where all the created size charts will be shown as shown in below screen:

List Columns

1.  ID: Unique id of the size chart.
2. Size Chart Identifier: This is just a label or name to the corresponding size chart.
3. Attribute Set Identifier: Name/Label of the attributes set by which you have created the corresponding size chart.
4. Status: Status (Enable/disable) of the corresponding size chart.
5. Created At: This column will show you the date and time at which the corresponding size chart is created.
6. Actions:

• Preview: On clicking this action, the system will show you the preview/snapshot of size chart with values set by you as shown in below screen:

• Edit: By clicking this link, the system will redirect to your size chart edit page where you will get the form with already filled values.
• Delete: With this action, you can delete corresponding size chart at any time.

Add New

There will be a button on the top right corner of listing page. From here, you can add new size chart at any time. Adding and updating size chart has been described in next section.

4.2.2 Adding New or Updating Size Chart

On clicking “Add New” button or clicking “Edit” link on any size chart in list, system will redirect you to the size chart form as shown in below screen:

Fields

• Status: This is the dropdown list of status. This will be a required field and by default will be disabled.
• Set Identifier: Required field. This field is just used for labeling/naming your size chart. This field will not be visible to customers.
• Attribute Set: Required field and initially will be nothing selected. Here you will select attributes set to create size chart.
• Chart Values: Required. Initially, there will be nothing to show you at the time adding new size chart. To create the chart, you have to select attribute select from point c. After selecting attributes set from the drop-down, the system will render the chart values form in matrix form as shown in below screen:

The system will create the matrix with the number of rows and columns created by you for selected attributes set. There is also a store view drop-down the list. At a time only one matrix form will be visible to you to fill chart values. You have to fill values of another store view then you have to change the store view from displayed stores drop down list.

• Instruction/Guidance: Required field and size chart will be displayed under the content you will write into this field. Here you can also provide some extra guidance as well as pictorial help about size chart to customers. This field will also be store view specific and you have to provide content for each field.
• Note: There will be a variable “{{size_chart}}”in the instruction field. This variable will be replaced by the system with corresponding size chart on the front end. So, Please do not remove this variable from instructions field. But you can change the position of this variable into instruction as per your need.
• Actions:

1. Back:  This action will redirect you to listing page.
2. Save: By clicking this button, the system will save your size chart data and redirect to you on size chart listing page.
3. Save and Continue Edit: By clicking this button, the system will save your size chart data and redirected back to form again.
4. Delete (In case of Editing/Updating): This action will delete the corresponding size chart from the system.

4.2.3 Deleting Size Chart

We have given delete options to you to delete size chart at any time. You can delete size chart either from listing page or edit page.

Note: If you want to delete size chart and you have created assign this size chart to product or categories then system will also delete that mapping with products or categories from system to prevent data inconsistency.

4.3 Category Charts

Here you can create and update the mapping of your size charts with categories.

4.3.1 Category Chart List

On clicking “Category Chart” menu, system will redirect you to page where all the mapping of size charts with categories (if any) will be shown as shown in below screen:

List Columns

1. ID: Unique id of the category and size chart mapping.
2. Category Name: Name of the category
3. Size Chart Identifier: Name/Label of the size chart mapped with the corresponding category.
4. Status: Status (Enable/disable) of the corresponding mapping.
5. Created At: This column will show you the date and time at which the size chart mapped or assign to the corresponding category.
6. Actions:

• Preview:  On clicking this action, the system will show you the preview with instructions set on size chart as shown in below screen:

• Edit: By clicking this link, the system will redirect to your page where you can assigned other chart to category or change status.
• Delete: With this action, you can delete the corresponding mapping at any time.

Add New Category Chart or Assign Chart to New Category

There will be an “Add New” button on the top right corner of listing page. From here, you can add assign size chart to the new category at any time. Adding and updating mapping has been described in next section.

4.3.2 Assign Chart to New Category/Update Mapping

On clicking “Add New” button or clicking “Edit” link on any category chart in list, system will redirect you to the mapping page from where you can assign charts to the new category or change on the category as shown in below screen:

Fields

• Status: This is a dropdown list of status. This will be a required field and by default will be disabled.
• Category: Required field and a dropdown list of categories. Initially, no category will be selected.
• Size Chart: Required field and the drop-down list of active size charts created by you in section 4.2.
• Back: This action will redirect you to listing page.
• Preview: On clicking this button, the system will show you the preview of the selected chart with instruction as shown in below screen:

• Save: By clicking this button, the system will save mapping into the database and redirect to you on category chart listing page.
• Delete (In case of Editing/Updating): This action will delete the corresponding mapping from the system.

4.3.3 Deleting Category Size Chart

We have given delete options to you to delete size chart from the category at any time. You can delete mapping either from listing page or edit page.

4.4 Product Charts

Here you can create and update the mapping of your size charts with products.

4.4.1 Product Chart List

On clicking “Product Chart” menu, the system will redirect you to page where all the mapping of size charts with products (if any) will be shown as shown in below screen:

List Columns

1. ID: Unique id of the product and size chart mapping.
2. Product Name: Name of the product.
3. Product SKU: Sku of the corresponding product.
4. Size Chart Identifier: Name/Label of the size chart mapped with corresponding product.
5. Status: (Enable/disable) of the corresponding mapping.
6. Created At:  This column will show you the date and time at which the size chart mapped or assign to the corresponding product.
7. Actions:

• Preview: By clicking this action, the system will show you the preview with instructions set on size chart as shown in below screen:

• Edit: By clicking this link, system will redirect to you page where you can assigned other chart to product or change status.
• Delete: With this action, you can delete the corresponding mapping at any time.

Add New Product Chart or Assign Chart to New Product

There will be an “Add New” button on the top right corner of listing page. From here, you can add assign size chart to a new product at any time. Adding and updating mapping has been described in next section.

4.4.2 Assign Chart to New Product/Update Mapping

On clicking “Add New” button or clicking “Edit” link on any product chart in list, system will redirect you to the mapping page from where you can assign charts to new product or change on the product as shown in below screen:

Fields

1. Status: This is the dropdown list of status. This will be a required field and by default will be disabled.
2. Product: Required field and dropdown list of products. Initially, no product will be selected.
3. Size Chart: Required field and the drop-down list of active size charts created by you in section 4.2.
4. Actions:

• Back: This action will redirect you to listing page.
• Preview: On clicking this button, the system will show you the preview of the selected chart with instruction as shown in below screen:

• Save: By clicking this button, the system will save mapping into the database and redirect to you on product chart listing page.
• Delete (In case of Editing/Updating): This action will delete the corresponding mapping from the system.

4.4.3 Deleting Product Size Chart

We have given delete options to you to delete size chart from the product at any time. You can delete mapping either from listing page or edit page.

4.4.4 Size Chart Mapping on Product Page

You can also map size chart with the product on product edit page. Whenever you will edit your product then there will be a tab “Size Chart” will be shown to you as shown in below screen:

Clicking on the above-highlighted tab, the system will show you form as shown in below screen:

From here you can map any enabled size chart with the corresponding product. Here these fields are not required. If you don’t to want to assign chart to this product then you can leave it without changing any value in this section.

5. Customer Interface

On the front end, size chart will only be accessible on the product page.

5.1 Size Chart on Product Page

If the product has any enabled size chart, then the system will show the “view size chart” link just below the product name as shown in below screen:

If the product has no enabled size chart then the system will try to find a chart from his associated categories. If size chart found on any associated category then the system will show that chart for this product.

On clicking the above-highlighted link, the system will open the size chart in popup box as shown in below screen:

For more details:

Module Link: https://www.knowband.com/magento-product-size-chart

Admin Demo Link:
https://mademo3.knowband.com/index.php/admin/dashboard/index/key/6ba922a54b236ebdefdef2d56e0a8211/

Front Demo Link:
https://mademo3.knowband.com/women/dresses-skirts.html

YouTube Video Link:
https://www.youtube.com/watch?v=ehu8nj_BsM8&feature=youtu.be

Please contact us at support@knowband.com for any query or custom change request as per your business requirement.