Magento 2 Size Chart

Home > Magento Extension User Guides > 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 Contents

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

 

  1. Extension Installation
  • For Magento Marketplace Customers
    • Find the Composer name and version of the extension in the extension’s composer.json file.
    • Login to your SSH and run:
      • composer require meetanshi/magento-2-size-chart
    • Enter your authentication keys. Your public key is your username; your private key is your password.
    • Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
    • To verify that the extension installed properly, run the command:
      • php bin/magento module:status Meetanshi_SizeChart
    • By default, the extension is probably disabled.
    • Enable the extension and clear static view files:
      • php bin/magento module:enable Meetanshi_SizeChart --clear-static-content
      • 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
  • For Meetanshi Customers
    • 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

 

  1. Configuration
    To configure the extension, log in to Magento 2, move to Size Chart à Configuration where you can find various settings to configure the extension.
  • Size Chart: Enable or disable 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 text to be displayed on the size chart button.
  • Text Color: Select the color of size chart button text.
  • Background Color: Select background color of size chart button text.
  • Border Color: Select the border color of size chart.
  • Icon: Choose the icon you want to display on the size chart button in the front end.

 

  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 Display: Select the location where you want to display the size chart on the product page.
    • Size Chart Content: Add the size chart content in any HTML format or use WYSIWYG editor to add size chart content to show in the popup.

​​​​​​​

 

  • Display Rules
     
    • Size Chart Display Conditions
      Set conditions for the size chart display on the product page. You can make use of various attributes to set the display condition, for e.g., Category. Also, the admin can choose to show the size chart only when all or any one of the conditions are satisfied by the products.
    • Override Catalog and Product Settings: Set YES to override existing inherited size charts on catalog or product level.
    • Rules 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.

​​​​​​​

 
  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.

​​​​​​​

 

 

​​​​​​​

Updated:

Other Articles

and 228 more ...