Dimension Calculator Installation

Dimension Calculator will automatically install a calculator on your stores product page provided it has a Quantity field. The app does not install any code into your theme, so any calculators will automatically be removed if you uninstall the app.

Install App Screen

Select Install App

Install App Screen

Approve Charges

We offer a free 14 day trial on our app, so select "Start Free Trial".

Approve Charges

Splash Screen

Once the app has installed you will see a splash screen with Quick Start Instructions -

Splash Screen

Select "Area Calculator" to see our admin screen -

Area Calculator

Admin

Navigage Admin > Apps > Dimension Calculator > Area Calculator

Admin

Set the field names and units you want to use - ft/in or m/cm

Add an Overage or Wastage Percentage if required. This can help increase sales. Leave the "Overage Name" field blank if not required

Select "Save"

Configuring Product Variants

Navigate to the product you wish to add a calculator to, then create variants.

Product

The calculator works of the variant so the variant needs names like -

Format Example
Length x Width 30x30cm or 12x12in
Any text(Length x Width) One Tile(30x30cm) or Grey Tile(12x12in)
Quantity x Length x Width 24x30x30cm or 24x12x12in
Any Text(Quantity x Length x Width) Box(24x30x30cm) or Box of Tiles(24x12x12in)

The only restriction is that the units used her must match the units selected in the admin menu - so cm must have units m/cm, and in must have ft/in

Variant

Test

You are now ready to test the application on a product -

Test Calculator

Manually Configure product-template.liquid(Not Recommend)

This is not the recommended approach as it requires store owners to main

Navigate Themes > Edit Code

Navigate to themes

You then have 2 options -

  • Edit product-template.liquid directly
  • Clone product-template.liquid to a name of your choosing - eg product-template-area.liquid

The advantage of the Option 2 is that you can select which products the calculator appears for

You then need to add the following div code to your page -

<div id="dc_area_calc"></div>

It is up to you to select the location you are positioning the calculator

Add code