AR Viewer icon generator
Pick an icon, fine-tune the color, size and opacity — the generator writes the CSS for you, ready to paste into your Shoptet. No designer, no coding.
The icon shows up for the customer on the product page next to the product name, together with the “View in AR” label. It is black by default — in a more colorful template it easily looks like a foreign element.
The preview shows you right away how the icon looks in practice, including a sample product with the button. You can click through several variants and pick the one that matches your store design — whether you use a minimalist black and white palette or vivid brand colors.
Settings
Preview in the store
Generated CSS
Copy it and paste it in your Shoptet into Appearance and content → Template designer → HTML editor → Footer <BODY>.
<style>
.ar-product-viewer-container .ar-product-viewer-button:before {
content: '';
display: inline-block;
width: 38px;
height: 38px;
background-color: #000000;
mask: url('https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/plugin-ar-icons/augmented-reality-1.svg');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask: url('https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/plugin-ar-icons/augmented-reality-1.svg');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
opacity: 1;
}
</style>How to paste the generated code into Shoptet
- In the generator above, pick an icon and fine-tune the color, size and opacity.
- Click Copy CSS — the code is saved to your clipboard.
- In your Shoptet administration open Appearance and content → Template designer → HTML editor → Footer <BODY>, paste the code there and save the change.
- Open a product with a 3D model and check that the icon looks the way you want. If it doesn't, come back here, adjust the settings and replace the code with the new one.
A detailed walkthrough of how to get to the template HTML editor is in the guide How to insert CSS code into Shoptet.