How to Customize the View in AR Button (Pro)

The launcher sits over your product photography, so this is a design decision more than a settings one. There are three kinds of launcher and five places to put it.

Go to DevDiggers Plugins → Product View in AR → Configuration → AR Button.

Step 1: Choose a button style

Button Style picks which of three launchers is drawn.

Preset badge is the safe default. Twelve ready-made badges, all sized for the job.
Custom image (upload) uses your own artwork, for a store with a strong brand.
Custom button is a coloured button with your own words and an icon. Pick it when “View in AR” is not the phrase your customers would use.

Read this before choosing Custom button. On iPhone and iPad the launcher is always an image, whatever you set here. Apple’s AR Quick Look only opens from a link containing an image. The plugin falls back to your selected preset badge on those devices by itself. So pick a preset you are happy with even if you never use it on Android.

Step 2a: Pick a preset badge

With Preset badge selected, choose one of the twelve.

Click a badge to select it. The selected one gains a highlight. These are the fallback on iOS too, so this choice matters even under the other two styles.

Step 2b: Upload your own image

With Custom image selected, upload artwork in the Custom Image field.

A wide PNG or SVG around 200 by 56 pixels matches the shape the layout expects. Hover the preview to replace or remove it. With nothing uploaded the plugin uses its own default badge rather than rendering an empty space.

Step 2c: Build a custom button

With Custom button selected, four fields become relevant.

First the label.

Keep it short. The button sits over a photograph, and “See it in your room” is about as long as works at mobile widths.

Then the icon before it.

Four choices: 3D Cube, AR Frame, Eye and No icon.

Then the two colours.

Background Color defaults to #0256ff and Text Color to #ffffff. Judge these against your product photography rather than against your brand palette. A pale fill over a pale studio shot disappears completely, and the button only works if it is seen.

Step 3: Choose a position

Button Position decides where the launcher sits on the gallery.

Five choices: Bottom Center, Bottom Left, Bottom Right, Top Center and Below Gallery. The first four overlay the image. Below Gallery puts the launcher underneath as an ordinary block, which is the one to pick when your photography fills the frame edge to edge.

The launcher always stays inside the gallery column whichever you pick. It will never end up beside the price or the Add to cart button.

Watch for a collision with the Photos / 3D toggle. If both are set to the same corner, move one.

Step 4: Save and check a product page

Press Save Changes, then open a product that has a model.

Check it at mobile width too. That is where the launcher is a real AR link rather than a QR popup, and where the space around it is tightest.