How to Change the Widget's Location – MySize

To change the widget location on your product page, click on Widget Settings on the top right corner of your dashboard to change the widget location.

Next, you will need to determine what your anchor element is. The anchor element is the reference element for the placement of the widget.

We recommend selecting the anchor element using one of the following common methods:

Class Selector – denoted with a dot before the name of the class

ID selector – denoted with a hash symbol before the name of the ID

To find your anchor elements ID or class, do the following:

Right-click the desired element where you would like to locate the widget and select Inspect (Chrome).

For example, in the screenshot below, you can see that the class of the selected element is ‘product-single__title’

To use this class as your anchor element, you will need to specify ‘.product-single__title’ (notice the leading dot).

We offer 4 different options for custom placements:

Above the anchor element – The widget will be placed in the same level of .html nesting, right above your anchor element:
Below the Anchor Element - The widget will be placed in the same level of .html nesting, right below your anchor element:
Last element inside the Anchor Element - The widget will be placed inside the anchor element, as the last nested child:
First element inside the Anchor Element - The widget will be placed inside the anchor element, as the first nested child:

For best engagement rate and performance, we highly recommend locating the widget either next to the sizing options or above the “add to cart” button.
Please choose the relevant Anchor element and add the class or ID selector in the filled marked below:

Related articles