Skip to main content

Position & Area Adjustment of an element with Live Preview

Adjusting Position & Orientation

We use percentage values to position the fields. For instance, if you set X = 50, Y = 49.75, W = 30, and H = 15, all values will be expressed as percentages relative to the background image in the customization. This feature allows for precise adjustments and relieves you from remembering the pixel’s value for different background images.

For example, if your background image is 11 inches, equal to 3300 pixels (11 inches x 300 DPI = 3300 pixels), then a value of 100 for width and height means 3300 x 3300 px. Meaning the box will cover the entire background image area.

Adjusting Position & Orientation

The starting points for X and Y differ: Y represents the top horizontal line(Purple Arrow), while X is consistently at the center of the blue rectangle(Green Arrow).

Customized product option set up on shopify store

Converting the pixel value into percentage:

Here is an example of calculating the values for the preview area. 

If the background image size is 948px[W] * 471px[H].

Assume we want to take a width of 300px. We divide 100 by the total width 100/948 and multiply it by the width required * 300(px).

=> (100/948) * 300  = 31.64[W]

So, in percentage, 31.64 means the width will be 300 px for the background image, which has a width of 948 px.

Similarly, for the height (100/471) * 300(px)  = 63.69[H]