How to calculate the Ratio

Ratio calculation is an important part in Product designer. It is used to specify the compatibility between the real size of the product and the product size on the screen. The correct size of an image which you will get for printing depends on your correct ratio calculation.   

You need to calculate a ratio for every product with enabled Product designer tool. Ratio field is located on editing product page -> "Product designer" tab -> 'Settings" button.

In general, Ratio shows the amount of pixels in the unit of length for a current product.

Unit of length can be inch or millimetre. Specify a unit of length which is the most comfortable for you in the General options of Product designer (Administration -> Add-ons -> Product designer add-on -> Edit).


To calculate a Ratio you should know:

1. The real dimensions of your product - width and height in inches or millimetres.

2. Digital dimensions of your product image - width and height in pixels (As a rule, you can view these dimensions in any photo editor).

Please note! For correct ratio calculation your real product and the image of this product should resemble each other. It means that the image should be a smaller copy (photo) of a real product.


Formulas for ratio calculation:

Real product width (inch or mm) divided by (/) digital product width (px) equals (=) "width" Ratio


Real product height (inch or mm) divided by (/) digital product height (px) equals (=) "height" Ratio

Compare "width" and "height" Ratio and take a bigger number, it will be the final Ratio.

In abbreviated form:

inch or mm / px = Ratio

Note! It is possible to use only five digits after the decimal point for Ratio in Product designer that is why all final calculations which you will see after adding a canvas will have a little inaccurancy.

Real t-shirt measuring


Let's see an example:

For example, you sell custom t-shirts.

Take a real t-shirt where you will print design and measure it. See the pictute on the right how to take measures. 

Our example t-shirt has the following real sizes:

T-shirt width = 470 mm (18.5 inch)

T-shirt height = 660 mm (26 inch)


Note! Since t-shirts have different sizes "S", "M", "L", etc., and if you have one product for personalization with the "Size" option to choose, you should take the biggest T-shirt as an etalon to measure the real dimensions. In this case, it will be easy to adjust a printable image for smaller t-shirts. Or you can make separate products for every t-shirt size.  


Digital t-shirt measuring

We've made a t-shirt image in Adobe Photoshop, select the necessary zone with a rectangular tool and got the necessary dimensions (they are shown automatically in a photo editor). 

Our example t-shirt digital dimensions are

T-shirt width = 252 px

T-shirt height = 460 px



Now, let's calculate the Ratio. Our default unit of length is millimetre.

470 mm / 252 px  = 1.86507 ("width" Ratio)

660 mm/ 460 px = 1.43478 ("height" Ratio)

We see that "width" Ratio and "height" Ratio are a little different, it's a normal thing and it's always better to use a bigger number. Thus, the Ratio for our T-shirt is 1.86507. 


Note! In Product designer settings (editing product page -> "Product designer" tab -> 'Settings" button), there are such parametres as "Product side width (px)" and "Product side height (px)". These parametres can be bigger or smaller than real digital dimensions of  a product. "Product side width (px)" and "Product side height (px)" define the width and height of the Product area in Product designer. Please, don't confuse them with real digital dimensions of a product. See below:

T-shirt product area


This article is written to show a formula for Ratio calculation and to demonstrate how it works for a T-shirt. The same formula applies for other products. It is possible to calculate the exact Ratio for such products which digital dimensions and real dimensions coincide (small products like mugs, mobile phone cases, etc.).