Skip to main content

Magento Extension: Installation and Configuration Guide

Introduction​

Our Magento extension serves as a free toolkit for our customers, offering a convenient way to integrate sizeez into their online shops. Upon successful installation and configuration, this extension adds size recommendation features directly onto the product pages. Behind the scenes, the extension handles the task of communicating with the sizeez APIs, enabling a straightforward non-code integration.

The size recommendation result will look like below in your online shop:

img alt

This documentation is designed to guide you through the initial steps within Magento Administration to get started with our extension.

info

This guide is written based on Magento 2.4

Prerequisites​

Before you begin with the installation and configuration, make sure you have the following:

  • Shell access to the server hosting your Magento instance.
  • Access to the Magento Administration interface.
  • The unique Shop ID provided by sizeez.
  • Access to sizeez Admin Portal to create and manage Size Charts.

Installation of the Extension​

  • Unzip the compressed plugin file you received from us

    unzip VRQRSolution-Magento2.zip

  • Connect to the root of your Magento 2 installation via SSH.

  • Upload the unzipped folder to src/app/code/. The file structure under src/app/code/ should look like this:

    img alt

  • Enable the extension and run necessary commands in the following order:

    bin/magento module:enable VirtualRetail_VRQRSolution
    bin/magento setup:upgrade
    bin/magento setup:di:compile
    bin/magento cache:clean

Update Extension​

If you have an older version of the extension installed on your Magento 2, update the module manually following the steps below.

  • Unzip the compressed plugin file you received from us

    unzip VRQRSolution-Magento2.zip

  • Connect to the root of your Magento 2 installation via SSH.

  • Remove the old module folder src/app/code/VirtualRetail

  • Upload the unzipped folder to src/app/code/. The file structure under src/app/code/ should look like this:

    img alt

  • Upgrade the extension and run necessary commands in the following order:

    bin/magento setup:upgrade
    bin/magento setup:di:compile
    bin/magento cache:clean

Configuration of the Extension​

In Magento Administration, go to Stores > Configuration.

  • Locate VRQRSOLUTION and click on Configurations. In the first input field, enter the shop ID you received from us. img alt

  • Flush cache under System > Cache Management img alt

Please Note

Without a valid shop ID, the extension will not be activated in shopfront

Configuration of the Products​

The size recommendation function is not automatically enabled for all products in the shopfront. To activate it for a specific product page, kindly follow these configuration steps within the Magento Administration for that particular product.

  • Navigate to the products overview page by selecting Catalog -> Products from the navigation sidebar. Click on Filters. Select Catalog, Serach under Visibility and apply filters. img alt img alt

  • Choose a product and edit its details. Navigate to the bottom of the page to locate the section titled VRQRSolution. img alt

  • Input the size chart ID, and optionally, the country code specific to this product. You can easily copy this information from the sizeez Admin Portal.

Please Note

If you do not fill in a size chart ID, the Get Size Recommendation button will not be displayed for this product on the shopfront.

Optional: Positioning of the "Get Size Recommendation" button​

After completing all the steps mentioned above, you will see a Get Size Recommendation button towards the end of the page. Here is an example:

img alt

The positioning of the Get Size Recommendation button on the product page is customizable. To achieve this, navigate to the VRQRSolution extension configuration and specify:

  • a QuerySelector of the DOM element that should contain the button
  • an index to place the button in that container element.

The following example shows how to position the Get Size Recommendation button before the size options. Using the browser developer tools, identify that the container element for the button should be div.product-add-form and to place the button at the top, the index should be 0. img alt

Input these two values on the configuration page, as illustrated: img alt

As a result, the button will appear at the specified location: img alt

Optional: Customize the look and feel of the "Get Size Recommendation" button​

The visual style of the Get Size Recommendation button is customizable. To personalize its appearance, navigate to the VRQRSolution extension configuration and assign a custom class or style to the Get Size Recommendation button.

In the example below, a text-decoration:underline; background:transparent; border:none; padding:0px; custom style is assigned in the extension configuration.

img alt

As a result, the button on the product page now resembles a hyperlink:

img alt

Congratulations! You have successfully integrated sizeez into your Magento store.