# Size Comparison ## Introduction Size Comparison extension helps your customers visualize the dimensions of your products. When customers see that the size is right for them, it is easy to feel reassured. You can use this assurance to sell more. Also, it helps you reduce your returns. When customers use size compare feature on PDP, a panel appears that allows them to compare and even purchase more items from your website. ## Steps to use Size Comparison Extension 1. Go to **Extensions** in Fynd Platform. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/1.png) Figure 1: Extensions Section - Fynd Platform 2. Click **Size Comparison** extension. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/2.png) Figure 2: Size Comparison Extension Once you have installed this extension, it will be available in the list here. 3. Select desired sales channel. Here, we have selected 'testk'. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/3.png) Figure 3: Selecting Desired Sales Channel 4. Click **Bulk Upload**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/4-new.png) Figure 4: Clicking Bulk Upload Button 5. Go to **Template**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/5.png) Figure 5: Selecting Template Option If you wish to update the existing object comparison group, then please choose 'Existing Group' option. 6. Click **Download File** to download the sample file. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/6-new.png) Figure 6: Clicking Download File Button 7. Open the sample file. 8. Fill details of the products to which you want to add size comparison feature. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/8b.png) Figure 7a: Details of Multiple Products * **Item UID** - This can be found in exported catalogue of products in Fynd Platform. It is present under column name 'UID' in exported catalogue file (Refer Figure 7b). [Click here](/commerce/docs/products/catalogue/exporting-catalogue) to learn how to export a catalogue in Fynd Platform. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/8c.png) Figure 7b: Item UID in Catalogue * **Item Dimensions** - Fill in the product dimensions like height, width, and depth in the file correctly. These dimensions are the actual dimensions of the product and not the ones which you entered in the catalogue. * **Product Image URL** - Enter the image link for the products. The supported file format is PNG or JPEG. Also, product images should have transparent background with edge-to-edge cropping. You can use our free image hosting source PixelBin.io to upload your product images with transparent background. * **Enable for Comparison** - Keep only those products to which you want to enable size comparison and mark 'TRUE'. In future, if you want to disable size comparison, make sure you mark 'FALSE' for that product in the file. All fields in the file are mandatory. 9. Save the file. 10. Click **Select a file** to upload the saved file. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/7.png) Figure 8: Clicking Select a File Option 11. Click **Proceed**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9-new.png) Figure 9: Clicking Proceed Button 12. Enter suitable name to your object comparison group in **Group Name** field. For e.g., Bags. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9b.png) Figure 10: Providing Suitable Group Name 13. Click **Create Group**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9g.png) Figure 11: Clicking Create Group Button You will see that 'Bags' group has been created successfully. Its status is **INACTIVE** initially. 14. Open the object comparison group that you have created. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9c.png) Figure 12: Object Comparison Group (Inactive) 15. Turn ON the toggle button for objects/models that you wish to add in your object comparison group. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9d.png) Figure 13: Adding Objects/Models 16. Turn ON the toggle button to activate 'Bags' group on PDPs (Refer Figure 14a). 17. Click **Save**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9e.png) Figure 14a: Clicking Save Button In this way, your object comparison group is activated successfully. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/9f-new.png) Figure 14b: Object Comparison Group (Active) ## Manage Products in Object Comparison Group 1. Open the object comparison group in which you want to update the details of products. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/21-new.png) Figure 15: Opening the Object Comparison Group 2. Click **Manage Product**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/22-new.png) Figure 16: Clicking Manage Product Option 3. Click **Edit**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/23-new.png) Figure 17: Clicking Edit Option 4. Enter the new **Width** and **Height** values (Refer Figure 18a). 5. Click **Save**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/24-new.png) Figure 18a: Clicking Save Button In this way, product details in your object comparison group have been updated successfully. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/25-new.png) Figure 18b: Updated Product Details 6. Close the **Manage Products** window. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/26-new.png) Figure 19: Closing Manage Products Window ## Delete Object Comparison Group Deleting the object comparison group will result in the removal of the size comparison feature for all products within it. 1. Go to kebab menu `⋮` of the object comparison group which you wish to delete. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/27-new.png) Figure 20: Opening Kebab Menu 2. Click **Delete**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/28-new.png) Figure 21: Clicking Delete Option In this way, your object comparison group has been deleted successfully. ## Update the Existing Object Comparison Group Go to **Existing Group** if you want to update the existing object comparison group for any of the following reasons: ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/29.png) center em Figure 22: Selecting Existing Group Option br 1. Enabling size comparison feature for products that have size comparison disabled. 2. Disabling size comparison feature for products that have size comparison enabled. 3. Updating image URLs. ## Add Size Comparison Extension in Theme 1. Click **Themes** in **Appearance** section of sales channel on Fynd Platform. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/12.png) Figure 23: Themes - Sales Channel 2. Click **Edit**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/13.png) Figure 24: Clicking Edit Button 3. Select 'Product Description' option from **SYSTEM PAGES** dropdown. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/14.png) Figure 25: System Pages 4. Choose a random product from the dropdown list (Refer Figure 26). 5. Click **Ok**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/15.png) Figure 26: Clicking Ok Button 6. Go to **Page** tab (Refer Figure 27). 7. Click **+** sign of desired position in **Extension Positions** section. Here, we have selected **Below Size Component** position. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/16.png) Figure 27: Clicking '+' Option 8. Click **Add Extension** dropdown. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/17.png) Figure 28: Add Extension Dropdown 9. Select **Size Comparison** extension from dropdown list. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/18.png) Figure 29: Choose Size Comparison Extension 10. Click **Save**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/19.png) Figure 30: Clicking Save Button In this way, Size Comparison extension is added in your website's theme. 11. Close the theme window. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/20.png) Figure 31: Closing Theme Window It might take up to 10 minutes to view Size Comparison feature. Since these configurations aren't used regularly, the caching duration is active and new changes might take some time to reflect on your website. ## Final Output Now, visit the sales channel and you will see that Size Comparison feature visible on PDP. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/10.png) center em Figure 32a: Your Website br ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/size-comparison/11.png) center em Figure 32b: Size Comparison Panel br