Installation


To use this extension, you will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/extensions/magedelight-base-extension.zip and unzip the package file into the root folder of your Magento 2 installation.


Before installing the extension, please make sure to Backup your web directory and store database

  • Unzip the extension package file into the root folder of your Magento 2 installation.
  • Connect to SSH console of your server:
    • Navigate to the root folder of your Magento 2 setup
    • Run command as per below sequence,

      php -f bin/magento setup:upgrade

      php -f bin/magento module:enable Magedelight_Sizechart

      php -f bin/magento setup:static-content:deploy

  • Flush store cache
  • log out from the backend and log in again

Backend Configuration (Admin side)


  • Enable Size Chart: Enable-Disable Size Chart Extension.
  • Choose Criteria to Show Size Chart: Select the criteria based on which the Size Chart will be displayed on the product page.          
    • Category: Select the product categories where the Size Chart should be displayed.
    • Attribute Set: Choose the attribute sets for products that will show the Size Chart.
    • Dynamic Condition: Define dynamic conditions to display the Size Chart based on specific product attributes or other criteria.
  • Title: Provide custom label text to display on the Size Chart button on the front end.
  • Header for 1st Column: Enter the header text for the first column of the Size Chart. This will typically represent the main measurement of any category (e.g., "Size", "Dimensions").
  • Header subtext for 1st Column: Enter the subtext for the header of the first column. This can be additional information or a secondary label related to the main header.
  • Text for 2nd Column: Enter the text that will be displayed in the second column of the Size Chart. This column will often contain corresponding values or measurements.
  • Size Chart Countries: Enter the countries where the Size Chart should be applied. This helps tailor the chart according to regional sizing standards.

Backend Functionality


You will have full control over the Size Chart. You can manage the Size chart from Admin > MageDelight > Size Chart > Manage Size Charts

  • As shown in the above image you can find all size chart lists with all basic information. I.e. name, status, display, priority, etc.
  • To add a new size chart click on the "Add New Sizechart" button.

Dynamic Size Charts


  • When considering the implementation of a size chart, there are two main options to consider: Dynamic Size Charts and Non-dynamic Size Charts. For the Dynamic Chart, please refer to the following functionality.
  • Name: Provide the name of the size chart rule for admin reference.
  • Do you want to create a dynamic size chart?: Choose Yes to create a dynamic size chart. Dynamic size charts automatically adjust based on selected attributes.
  • Do you want to create based on attributes?: Choose Yes to create an attributes-based size chart. 
  • Product Attribute: Select if you want to choose the size chart on product attributes such as size,dimensions  etc.
  • Chart Header Label: Define header labels for different regions (e.g., UK, US, FR) where sizes may vary.


  • Name: Provide the name of the size chart rule for admin reference.
  • Attribute Set: If you choose the attribute set in the general configurations, it shows the attribute set and you can select the attribute from the list.
  • Status: Enable this size chart rule to activate it for your store
  • Display: Select display options from the given choice. You can select either "on Page" or "Popup" options as per your need. "On-Page" will display the size chart on the product details page section below the add to cart button and "Popup" will open the size chart in the popup.
  • Priority: Provide priority to display the size chart on the product page. The highest priority size chart rule will be displayed on the storefront.
  • Description Header: Enter a concise description with the design you want to show for the header of the size chart
  • Description Footer: Include a brief description of the design of the footer of the size chart.
  • Size Chart: Select size chart column labels i.e. XS, XL, L, You can create as many columns as you want by clicking on the Add Data button. Just click on the "Add New Row" button and then select
    the name of the new column you can also delete the the row from the action. Manually enter sizes corresponding to product attributes and countries.

Non-Dynamic Size Charts


  • Name: Provide the name of the size chart rule for admin reference.
  • Do you want to create a dynamic size chart?: Select  No, if you don't need a dynamic size chart.


  • Name: Provide the name of the size chart rule for admin reference.
  • Categories If you choose the category in the general configurations, then it shows the categories and you can select the categories from the list.
  • Status: Enable this size chart rule to activate it for your store
  • Display: Select display options from the given choice. You can select either "on Page" or "Popup" options as per your need. "On-Page" will display the size chart on the product details page section below the add to cart button and "Popup" will open the size chart in the popup.
  • Priority: Provide priority to display the size chart on the product page. The highest priority size chart rule will be displayed on the storefront.
  • Description Header: Enter a concise description with the design you want to render for the header of the size chart.
  • Description Footer:  Enter a concise description with the design you want to render for the footer of the size chart.

Dynamic Condition Criteria to Show Size Chart


  • Conditions: Create rules using product-based conditions to display size charts on them.

    Please select the particular Category and click the button " Click Here For Filter Products" After that at the downside product list will appear of products and you have to select the list of products in which you want to show the size chart. Then "Save the Item" button shows the size chart on a particular product of a selected category.

Frontend Functionality


Dynamic Size Charts



  •  To compare sizes, click on "Tap to compare size". The measurements will dynamically adjust based on the selected country shown in the screenshots above, while the product size remains constant. This feature provides precise measurements according to the chosen country, ensuring accurate size comparisons.

Non-Dynamic Size Charts


  • The size chart will display the measurements uploaded at the time of creation. No dynamic values will be shown. The image above illustrates an example of a non-dynamic size chart. The size chart will render the content that you have added in the descriptions of the header and the footer from the admin.

Demo


Click here to visit frontend.

Click here to visit backend admin panel.

FAQs


Click here to visit FAQs.

Support


Click here to raise a support ticket using your MageDelight account.

Additional Services


Click here to get the customized solution for this extension.



Thank you for choosing MageDelight!




  • No labels