A guide for makers of garden buildings

Adding View in your garden AR to your product pages

How shoppers can stand a sauna, cabin, greenhouse or hot tub in their own garden at full size from your product page, what that takes on iPhone and Android, the three ways to add it, and what to check before it goes live.

By Ben Huss, founder of ar.garden · Updated 26 October 2026

What is a View in your garden button?

It's a button on a product page that opens the phone's camera and places a true-size 3D model of the product on the ground in front of the shopper. They can walk round it, look in through the door and see how much of the lawn it takes up. It uses the augmented reality (AR) built into iPhone and Android phones, so there's no app to install.

Why garden buildings need it more than most products

For most garden buildings, the buying question is size. Will a 2.3 m barrel sauna fit between the shed and the fence? Will an 8×10 greenhouse crowd the vegetable beds? Where should it go? The dimensions on the product page answer that on paper, but few people can picture 2.3 metres on their own lawn.

Seeing the building at full size, from where they'll actually stand, answers it in a few seconds. It also does some of the work of a show site: most shoppers never get to walk round the real thing before it arrives as a kit.

How it works on iPhone and Android

Each phone has its own AR viewer, and each needs its own file.

iPhone and iPadAndroid
Opens inAR Quick Look, built into iOS and opened from SafariGoogle's Scene Viewer, opened through the Google app
FileUSDZGLB (glTF 2.0)
NeedsiOS 12 or laterAn ARCore-supported phone on Android 7.0 or later, with Google Play Services for AR

On a web page, both are usually opened by Google's open-source <model-viewer> component. It shows the 3D model in the page, then hands it to the phone's own AR viewer when the shopper taps. On a computer there's no camera to use, so a good button shows a QR code that opens the same product on the shopper's phone.

model-viewer can also use the browser's own AR mode (WebXR), and moves on to the next mode if one can't open. We open Scene Viewer first on Android, and switch to the browser's own AR if Scene Viewer can't open on that phone.

Three ways to add it

All three end with the same button on your page. They differ in who makes the models, who keeps them up to date, and how much your own team has to do.

1. Your own 3D files on your shop's platform

Shopify accepts 3D models as product media and serves them as GLB for the web and USDZ for iPhone AR. Shopify's free Dawn theme, for example, shows a 3D view and a "View in your space" AR button alongside the product photos. The viewer comes with Shopify, so the cost is the models.

Those models have to be right. Shopify's checklist for 3D modellers asks for the exact size of the real product, a total file size of about 4 MB, and textures no larger than 2048 × 2048 pixels for mobile. Someone has to make them, either a 3D artist working from your drawings or your own CAD files exported and simplified, and remake them when the range changes. Each size and finish you want to show is usually its own file.

This suits a small range on Shopify, with someone on your team who is happy managing 3D files.

2. A 3D and AR platform

Several companies sell a hosted 3D viewer, AR or a full product configurator by subscription, and some will build the models for you. This suits makers who want a configurator across many products and have a team to run it. Ask who builds the models, whether they're built from your drawings at true size, what each model costs, and what you keep if you stop.

3. Built and looked after for you

This is what ar.garden does. We build true-scale models of every size, finish and option from your drawings, and your team signs off a dimension sheet for each size. Your web developer adds two lines of code, and we host the viewer and keep it up to date as your range changes. This suits makers with several sizes and options who would rather not manage 3D files.

Your own filesA 3D and AR platformBuilt for you
Who makes the modelsYou, or a 3D artist you hireVaries: you upload them, or their team builds themWe do, from your drawings
The viewerYour shop's, such as Shopify'sThe platform'sOurs, hosted and maintained by us
Sizes and optionsUsually a file for each one you showVariesEvery size, finish and option, and only those sold with each size
When your range changesYou remake the filesVariesWe update every size together
Your team's partCommissioning and managing the filesRunning the platformSigning off the dimensions; your web developer adds two lines
CostThe modelsA subscription, often plus the modelsA fee to build, then a yearly fee, quoted after a short call

What to check before it goes live

  1. True size, and fixed at it. The model should be built in metres at the product's real size, and shoppers shouldn't be able to pinch it bigger or smaller, or "true size" stops meaning anything. model-viewer's ar-scale="fixed" and Scene Viewer's resizable=false do this. To check it, stand the model next to something you've measured: we use a 2 m test square and a tape measure.
  2. Matches your drawings. Ask for each model's overall sizes against your published figures, size by size, and have your own team sign them off. Ours aim for within 20 mm of every published figure.
  3. Only what you sell. If a window, a heater or a colour only comes with some sizes, the viewer should only offer it with those.
  4. Small files. Shoppers are often standing in the garden on mobile data. Google recommends keeping Scene Viewer models under 10 MB, with textures no larger than 2048 × 2048, and Shopify's checklist aims for about 4 MB. Ours are under 3 MB.
  5. Both phones, on the real page. iPhone uses a different file from Android, so a model that works on one can fail on the other. Test the live product page on a real iPhone and a real Android phone before launch, and again after theme changes.
  6. Your retailers. If retailers sell your buildings, decide whether they can show the same button. Some can paste a code snippet. Larger retailers often take 3D only as files, through their own systems.
  7. Page speed and privacy. The viewer should load only when it's about to be seen, and shouldn't set cookies. Ask what it loads, from where, and what it counts. Our notes for web developers list ours.
  8. Who owns the files. Ask what happens to the models if you stop.

See it on a phone

Open ar.garden on your phone and tap View in your garden to stand a barrel sauna in front of you. There are demos of hot tubs, a garden office, a log cabin and a greenhouse too.

If you'd like to see one of your own products in a customer's garden, tell us what you sell.

Talk to us

A barrel sauna standing on grass in AR, filmed on a phone
A barrel sauna model on a lawn, seen through a phone: a real recording.

Sources