Magento 2 Size Chart

Magento 2 Size Chart helps customers select the correct size for wearable products such as apparels, shoes, accessories, etc. using the size guide.


Table of Content

  1. Extension Installation
  2. Configuration
  3. Size Chart Button Settings
  4. Manage Size Charts
  5. Product Specific Size Chart
  6. Size Chart in Frontend


  1. Extension Installation
  • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
  • Login to your SSH and run below commands step by step:
    • php bin/magento setup:upgrade
    • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
    • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy–f
    • php bin/magento cache:flush
  • That's it.


  1. Configuration
    For configuring the extension, login to Magento 2, move to Catalog > Size Chart > Configuration where you can find various settings to enable the extension.
  • Size Chart: Enable the Size Chart extension.


  1. Size Chart Button Settings
    Configure the size chart button text, text color, background color and other settings to create an amazing look for the size chart button on the product page.
  • Text: Enter the size chart button text.
  • Text Color: Set the color for the text of the size chart button.
  • Background Color: Set the background color of the size chart button.
  • Border Color: Set the border color of the size chart button.
  • Upload Icon: upload the icon to show along with the text of the size chart button.


  1. Manage Size Charts
    Immediately after enabling the extension, move to Catalog > Size Chart > Manage Size Charts from where you can create new Size Charts as per your requirement.
  • Size Chart Grid
    Already created and saved Size Charts get enlisted here with the details such as name, store view in which it’s enabled, priority, status, and action to edit and delete. Click “Add New Size Chart” to create a new Size Chart.


  • Add New Size Chart
    On click of “Add New Size Chart” button, you can make Size Chart settings.
    • Name: Enter the name of the Size Chart to easily recognize it.
    • Status: Enable or disable the Size Chart from here.
    • Store View: Select the store view in which you want to show this Size Chart.
    • Size Chart Content: Add the size chart content in any HTML format or use WYSIWYG editor add size chart content to show in the popup.
    • Priority: Set priority of this Size Chart. It helps to show the Size Chart based on the priority when more than one Size Chart satisfies the conditions for the display on the product page.



  • Size Chart Display Conditions
    Set conditions for the size chart display on the product page. You can make use of various product attributes to set the display condition.


  1. Product Specific Size Chart
    To show different size chart specifically for a product, go to Catalog > Products > Select a product and under the “Size Chart” option you can find all the enabled size charts. Select one of the size charts to display under this product.


  1. Size Chart in Frontend
  • Size Chart Button on Product Page
    On the product page, the size chart button displayed with the icon, text and with the set colors. Users can click the button to open the size chart in a responsive popup.


  • Size Chart Popup
    Based on the display condition and priority, the Size Chart gets displayed on click of the button from the product page. As the Size Chart popup is responsive, it can be seen from the tablet and mobile devices as well.