Sign Customiser

Navigation

Dark mode

Last updated:

Use this guide to test how accurate the measurements of a font are. Make a sample SVG of any text in any font. Measure the width, height and material length in Adobe Illustrator. Then compare these values with the customiser.

What you need

  • Adobe Illustrator (Free trial available)

  • An Advanced Letter customiser (priced by material length) on your Store, with fonts added

  • A test pricing (Step 1)

  • Centimetres as the measurement unit in the Sign Customiser admin, in the customiser and in Adobe Illustrator

1. Create a pricing for testing

This pricing makes $1 equal 1 cm of material length. For example, a price of $678 means 678 cm of material.

Set the measurement unit

  1. Open Store Settings.

    • In the Universal admin, go to Your Store > Store Settings.

    • In the Shopify admin, go to Settings > Apps. Select the menu icon for Sign Customiser, then select Open app. On Home, in the Menu card, select Tools & Settings. Then select Store Settings.

  2. In Admin Settings, check Measurement Unit. If it shows Centimetres, go to step 3. If not, set it to Centimetres, select Review changes, then select Change units in the Change the Store units window. Read what the window says the change converts before you confirm.

    Store Settings page, Admin Settings card with Measurement Unit set to Centimetres

  3. Go to Customisers and select your Advanced Letter customiser.

  4. Go to Settings > General Settings.

  5. In General Style Settings, set Measurement Unit to Centimeters. The image shows the value before the change: Both Centimeters and Inches.

  6. Save your changes.

    General Settings page with the Measurement Unit select in General Style Settings

Create the pricing

  1. In your customiser, go to Core Setup > Pricing.

  2. Select Add Pricing. If the customiser has no pricing, select New Advanced Letter Pricing.

  3. In Label, enter a name, for example “Measurement test”. Customers do not see this name.

  4. In Letter Pricing, select Letter Material Cost. The default is Fixed Cost Per Letter.

    The Add Pricing form with the Label field and Letter Pricing set to Letter Material Cost

  5. Keep Flat parcel selected in Sign Dimension Pricing - (Shipping Unit Pricing).

  6. Under Size Boundaries, select Size Boundary 1. A new pricing has one size boundary. Its default maximum width is 100 cm and its default maximum height is 80 cm.

    The Size Boundary 1 dialog with Letter Material Cost, Sign Start Price at 0 and Parcel Cost at 0

    The image shows the default value of Letter Material Cost, which is 0.5.

  7. Set Letter Material Cost to 1. The field must show per cm. If it shows per in, change Measurement Unit in Admin Settings.

  8. Make sure Sign Start Price - (Optional) is 0.

  9. Make sure Parcel Cost is 0. If the admin does not show Parcel Cost, go to the next step.

  10. Select Done, then select Save.

2. Generate a sample SVG

  1. Go to Core Setup > Fonts and open the font to test. If you have no font, follow the guide to add a font.

  2. In Assign a pricing, make sure Pricing shows the test pricing. If you change it, select Save.

    This image is from an older version. The field is now named Pricing.

  3. Go to the Test the accuracy of your font using Adobe Illustrator box. Enter your sample text in Enter your sample text. The default text is “Sample Text”. Write down the text, because you use it again in Step 4.

    If the box says Must upload font to create SVGs for testing, upload the font file first.

    This image is from an older version. The box now has the heading Test the accuracy of your font using Adobe Illustrator and the Enter your sample text field.

  4. Select Generate SVG. Your browser downloads a file named Sample SVG.

3. Adobe Illustrator setup

  1. Install Illustrator. Then create a new document.

  2. On macOS, open the Illustrator menu at the top, then choose Preferences > Units. On Windows, open the Edit menu, then choose Preferences > Units. The image shows macOS.

  3. Change General to Centimeters. Then select OK.

  4. In the Window menu at the top, choose Document Info. Make sure the Document Info window is open.

The Document Info window shows the total path length of the objects in the document.

4. Ready to test

  1. Go to the customiser page on your storefront.

  2. Choose the same font. Enter the same text that you used for the SVG file.

  3. Choose a size. Write down the width, height and price. On the test sign, the price equals the material length only when no other option, shipping charge, multiplier or discount applies.

    The next steps use one example: width 32.32cm, height 16.75cm and price $335.70. Your numbers are different. The image below is from a different sign, so its numbers are different too. Its price also includes a discount.

    The customer customiser showing the sign text, the width and height labels and the price

  4. In Illustrator, choose File > Place and select the downloaded Sample SVG file.

  5. Click once on the artboard to place the SVG.

  6. Select the SVG. A box shows around the image (see Note 1). Go to Properties in the right panel. Match the width of the SVG to the customiser text width.

  7. In Document Info, the line that starts with Paths shows the total path length. Divide this length by 2 to get the approximate midline length (see Note 3).

    671.3898 / 2 = 335.6949

  8. Compare the Illustrator values with the customiser values. This example has these values:

    Illustrator values

    Width = 32.32cm, Height = 16.749cm

    Customiser values

    Width = 32.32cm, Height = 16.75cm

  9. Compare the material length with the price. On a test sign with no other charges or discount, the material length sets the price.

    1. Illustrator path value

    Path = 335.6949cm

    2. Price from your customiser (step 3)

    $335.70

    In this example, the difference between the price and the measured length is a fraction of a cent. This font works well with Letter Material Cost pricing.

    If the difference is larger, remember that the customiser uses its own length calculation for each font. Illustrator can show a different value.

  10. Repeat this process with any font.

Notes

  1. If the SVG is not selected, choose the Selection tool on the left. It selects entire objects. Then select the image.

  2. If the width does not change, look at the icon beside it. It must be a linked chain, as in the image below. To change the icon, click it.

  3. The SVG path follows the edges of the shapes. You need only the middle line, which is about half of that length, so you divide the length by 2.

Type a question and press Enter. Use the arrow keys to move between the results.