Search...
Add Imersian Visualiser & AR Buttons to Your Shopify Store
Learn how to add Imersian Visualiser and Augmented Reality (AR) buttons to your Shopify product pages. Step-by-step guide for theme editor integration, custom Liquid code, and advanced section setup.
Enhance your product experience by integrating Imersian Visualiser and AR (Augmented Reality) buttons into your product pages. Follow the steps below to seamlessly add and customize these features using Shopify’s Theme Editor.
Option 1: Add Visualiser and/or AR Button Block
Access Theme Editor
Go to Shopify Admin → Online Store → Themes → Customize.
Open Product Page Template
Navigate to the product page template where you want the buttons to appear.
Add Button Block
Inside the editor, insert either the Imersian Visualiser and/or AR button block from the App Blocks.
Position
Place the block where desired . We recommend placing it beneath the Buy button blocks
Use Custom Liquid for Theme Inheritance
To match your store's theme, you can add the following custom Liquid code just below the app blocks:
<script> document.addEventListener('DOMContentLoaded', () => { const selectors = ['.imersian-view-in-room', '.imersian_inhome']; function waitForElements(selectors, timeout = 5000) { return new Promise((resolve) => { const found = selectors.map(sel => document.querySelector(sel)).filter(Boolean); if (found.length > 0) { resolve(found); return; } const observer = new MutationObserver(() => { const matched = selectors.map(sel => document.querySelector(sel)).filter(Boolean); if (matched.length > 0) { observer.disconnect(); resolve(matched); } }); observer.observe(document.body, { childList: true, subtree: true, }); // Fallback in case the elements never appear setTimeout(() => { observer.disconnect(); console.warn('Imersian buttons not found within timeout'); resolve([]); }, timeout); }); } waitForElements(selectors).then((buttons) => { if (buttons.length === 0) return; // Remove inline styles and color buttons.forEach(btn => { btn.removeAttribute('style'); const span = btn.querySelector('span'); if (span) span.style.color = ''; }); // Apply theme button styles if (buttons[0]) buttons[0].classList.add('button', 'button--primary'); if (buttons[1]) buttons[1].classList.add('button', 'button--secondary'); // Wrap buttons in a horizontal flex container const wrapper = document.createElement('div'); wrapper.classList.add('imersian-button-wrapper'); const firstBlock = buttons[0].closest('.shopify-app-block'); if (!firstBlock) return; firstBlock.parentNode.insertBefore(wrapper, firstBlock); buttons.forEach(btn => { const block = btn.closest('.shopify-app-block'); if (block) wrapper.appendChild(block); }); }); }); </script> <style> .imersian-button-wrapper { display: flex; flex-wrap: wrap; gap: 0.75rem; width: auto; max-width: inherit; box-sizing: inherit; align-items: center; } .imersian-button-wrapper .shopify-app-block { flex: 1 1 0; box-sizing: inherit; .imersian-button-wrapper button { width: 100%; box-sizing: inherit; max-width: 100%; height: auto; } /* Mobile: stack vertically */ @media (max-width: 749px) { .imersian-button-wrapper { flex-direction: column; gap: 0.75rem; } } <
Save and Preview
Click Save, then preview your product page.
⚠️ Note: These buttons will only appear on products that are enabled for visualisation in the Imersian app settings.
Option 2: Add a Custom Section Block
If you prefer more customization options such as custom videos, titles, descriptions, and placement, use a section block instead.
Insert Section Block in Code
Add the provided
imersian-inhome-section.liquidcode to your theme’ssectionsfolder.{% schema %} { "name": "Imersian In-Room Section", "tag": "section", "class": "section", "settings": [ { "type": "header", "content": "Media" }, { "type": "text", "id": "video_url", "label": "Video URL", "info": "Upload video to files and paste URL here" }, { "type": "header", "content": "Content" }, { "type": "text", "id": "headline", "label": "Headline", "default": "See it in your space" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h0", "label": "X-Large" }, { "value": "h1", "label": "Large" }, { "value": "h2", "label": "Medium" }, { "value": "h3", "label": "Small" }, { "value": "h4", "label": "X-Small" } ], "default": "h2", "label": "Heading size" }, { "type": "inline_richtext", "id": "description", "label": "Description", "default": "Picking the perfect product has never been easier! Visualise this item in your own space before making a decision." }, { "type": "header", "content": "Primary Button" }, { "type": "text", "id": "button_text_1", "label": "Button text", "default": "View in Your Room" }, { "type": "select", "id": "button_style_1", "label": "Button style", "options": [ { "value": "button--primary", "label": "Primary" }, { "value": "button--secondary", "label": "Secondary" }, { "value": "button--tertiary", "label": "Tertiary" } ], "default": "button--primary" }, { "type": "select", "id": "button_size_1", "label": "Button size", "options": [ { "value": "", "label": "Regular" }, { "value": "button--small", "label": "Small" }, { "value": "button--large", "label": "Large" } ], "default": "" }, { "type": "url", "id": "button_url_1", "label": "Button URL" }, { "type": "header", "content": "Secondary Button" }, { "type": "text", "id": "button_text_2", "label": "Button text", "default": "View in AR" }, { "type": "select", "id": "button_style_2", "label": "Button style", "options": [ { "value": "button--primary", "label": "Primary" }, { "value": "button--secondary", "label": "Secondary" }, { "value": "button--tertiary", "label": "Tertiary" } ], "default": "button--secondary" }, { "type": "select", "id": "button_size_2", "label": "Button size", "options": [ { "value": "", "label": "Regular" }, { "value": "button--small", "label": "Small" }, { "value": "button--large", "label": "Large" } ], "default": "" }, { "type": "url", "id": "button_url_2", "label": "Button URL" }, { "type": "header", "content": "Layout" }, { "type": "select", "id": "desktop_content_position", "label": "Desktop content position", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "center" }, { "type": "select", "id": "content_alignment", "label": "Content alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "center" }, { "type": "select", "id": "desktop_layout", "label": "Desktop layout", "options": [ { "value": "image_first", "label": "Media first" }, { "value": "text_first", "label": "Text first" } ], "default": "image_first" }, { "type": "select", "id": "button_layout", "label": "Button layout", "options": [ { "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" } ], "default": "horizontal" }, { "type": "image_picker", "id": "button_icon_1", "label": "Primary button icon" }, { "type": "image_picker", "id": "button_icon_2", "label": "Secondary button icon" }, { "type": "header", "content": "Colors" }, { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "background-1" }, { "type": "header", "content": "Section padding" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 } ], "presets": [ { "name": "Imersian Section" } ] } {% endschema %} {{ 'section-rich-text.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.6 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.6 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } .room-gallery-{{ section.id }} { max-width: 1440px; margin-inline: auto; padding-left: var(--page-width-margin); padding-right: var(--page-width-margin); } .room-gallery-{{ section.id }} .room-grid { overflow: hidden; display: flex; align-items: center; flex-direction: {% if section.settings.desktop_layout == 'text_first' %}row-reverse{% else %}row{% endif %}; } .room-gallery-{{ section.id }} .room-content { flex: 1; text-align: {{ section.settings.content_alignment }}; padding: 4rem 2rem; order: {% if section.settings.desktop_layout == 'text_first' %}1{% else %}2{% endif %}; } .room-gallery-{{ section.id }} .room-media { background: rgb(var(--color-background)); overflow: hidden; display: flex; align-items: center; width: 55%; order: {% if section.settings.desktop_layout == 'text_first' %}2{% else %}1{% endif %}; } .room-gallery-{{ section.id }} .room-headline { margin-bottom: 1.5rem; line-height: 1.4; } .room-gallery-{{ section.id }} .room-desc { line-height: 1.65; max-width: 50rem; {% if section.settings.content_alignment == 'center' %} margin-inline: auto; {% endif %} margin-bottom: 0.8rem; } .imersian-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; flex-direction: {% if section.settings.button_layout == 'vertical' %}column{% else %}row{% endif %}; align-items: {% if section.settings.button_layout == 'vertical' %} {{ section.settings.content_alignment }} {% else %} unset {% endif %}; justify-content: {% case section.settings.content_alignment %} {% when 'left' %}flex-start {% when 'right' %}flex-end {% else %}center {% endcase %}; } .room-button .icon-wrapper { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; margin-right: 0.5rem; flex-shrink: 0; } .room-button .icon { width: 100%; } .imersian_inhome { width: auto; } @media screen and (min-width: 1000px) { .room-gallery-{{ section.id }} .room-headline.hide-pc { display: none; } } @media screen and (max-width: 1000px) { .room-gallery-{{ section.id }} .room-media { width: 100%; } .room-gallery-{{ section.id }} .room-headline.hide-mb { display: none; } .room-gallery-{{ section.id }} .room-grid { display: block; } .room-gallery-{{ section.id }} .room-content { order: 2; padding: 2.5rem 2rem 0; } .imersian-buttons { justify-content: center; } .imersian-buttons .button { flex: 1; min-width: auto; } } @media screen and (max-width: 768px) { .room-gallery-{{ section.id }} { padding-left: 0; padding-right: 0; } .room-gallery-{{ section.id }} .room-headline, .room-gallery-{{ section.id }} .room-content { padding-left: 2rem; padding-right: 2rem; } } {%- endstyle -%} <input type="hidden" class="imersian-variant-sku" value="{{current_variant.id | default: product.variants.first.id}}"> <div id="imersian-section-wrapper" class="imersian-visualiser-section room-gallery-{{ section.id }} color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding" > {% if section.settings.headline != blank %} <{{ section.settings.heading_size }} class="room-headline hide-pc {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"> {{ section.settings.headline | escape }} </{{ section.settings.heading_size }}> {% endif %} <div class="room-grid"> {% if section.settings.video_url != blank %} <div class="room-media"> <div class="room-video"> <video muted autoplay loop webkit-playsinline playsinline {% if settings.animations_reveal_on_scroll %} class="scroll-trigger animate--slide-in" {% endif %} > <source src="{{ section.settings.video_url }}" type="video/mp4"> </video> </div> </div> {% endif %} <div class="room-content"> {% if section.settings.headline != blank %} <{{ section.settings.heading_size }} class="room-headline hide-mb {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"> {{ section.settings.headline | escape }} </{{ section.settings.heading_size }}> {% endif %} {% if section.settings.description != blank %} <div class="room-desc rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"> {{ section.settings.description }} </div> {% endif %} <div class="imersian-buttons{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"> {% if section.settings.button_text_1 != blank %} {% assign image_url = product.featured_image | image_url: '800x' %} <button class="imersian-view-in-room button room-button {{ section.settings.button_style_1 }}{% if section.settings.button_size_1 != blank %} {{ section.settings.button_size_1 }}{% endif %}" id="imersian-view-in-room-{{ section.id }}" data-product-id="{{ product.id }}" data-image-url="{{ image_url }}" > <span class="icon-wrapper"> {% if section.settings.button_icon_1 %} <img class="icon" src="{{ section.settings.button_icon_1 | image_url: width: 40 }}" alt="icon"> {% else %} <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <path d="M5.45 3.494a41 41 0 0 1 7.1 0l1.132.098a2.354 2.354 0 0 1 2.124 1.995c.34 2.263.34 4.563 0 6.826q-.045.298-.16.565c-.049.118-.203.136-.289.041l-3.316-3.647a.56.56 0 0 0-.594-.156L9.55 9.85 6.795 6.751a.56.56 0 0 0-.818-.024l-3.685 3.686a.185.185 0 0 1-.316-.12 23 23 0 0 1 .218-4.706 2.354 2.354 0 0 1 2.124-1.995zM10.5 6.75a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0" clip-rule="evenodd"/><path fill="#fff" d="M2.221 12.075a.19.19 0 0 0-.053.158l.026.18a2.354 2.354 0 0 0 2.124 1.995l1.133.098c2.361.205 4.737.205 7.098 0l1.133-.098c.319-.028.62-.119.89-.26.102-.054.119-.19.041-.275l-3.076-3.383a.19.19 0 0 0-.198-.052l-1.786.596a.56.56 0 0 1-.598-.16l-2.472-2.78a.187.187 0 0 0-.273-.009z"M2.22099 12.0745C2.17947 12.116 2.15975 12.1746 2.16802 12.2327C2.17657 12.2928 2.18535 12.3529 2.19438 12.4129C2.35616 13.4887 3.23416 14.3134 4.31796 14.4076L5.45063 14.5061C7.81242 14.7114 10.1876 14.7114 12.5494 14.5061L13.682 14.4076C14.0005 14.38 14.3012 14.2892 14.5712 14.1475C14.6735 14.0938 14.6907 13.9586 14.613 13.8731L11.5374 10.4899C11.4875 10.435 11.4098 10.4147 11.3394 10.4382L9.55286 11.0337C9.33939 11.1048 9.10406 11.0419 8.95456 10.8737L6.48301 8.09324C6.41133 8.0126 6.28657 8.00894 6.21029 8.08522L2.22099 12.0745Z" /> </svg> {% endif %} </span> {{ section.settings.button_text_1 | escape }} </button> {% endif %} {% if section.settings.button_text_2 != blank %} <button class="imersian_inhome button room-button {{ section.settings.button_style_2 }}{% if section.settings.button_size_2 != blank %} {{ section.settings.button_size_2 }}{% endif %}" id="imersian-view-in-ar-{{ section.id }}" > <span class="icon-wrapper"> {% if section.settings.button_icon_2 %} <img class="icon" src="{{ section.settings.button_icon_2 | image_url: width: 40 }}" alt="icon"> {% else %} <!-- Default icon --> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg" > <path d="M18.715 32.423q.012.037.065.07.053.032.14.054a1.2 1.2 0 0 0 .3.038l.104-.002a46 46 0 0 0 2.591-.194c.866-.09 1.73-.207 2.57-.35.84-.142 1.656-.31 2.428-.504a24 24 0 0 0 2.168-.647 15 15 0 0 0 1.802-.766c.53-.27.986-.555 1.362-.846.752-.581 1.183-1.188 1.324-1.768l.002-.01.012-.05v-.005q.093-.436-.02-.878a2.5 2.5 0 0 0-.438-.877 4.6 4.6 0 0 0-.845-.842 7 7 0 0 0-.564-.398 9 9 0 0 0-.649-.379l-.03-.015-.034-.013a1.27 1.27 0 0 0-.28-.053 1.5 1.5 0 0 0-.414.027.7.7 0 0 0-.14.047.2.2 0 0 0-.085.066.1.1 0 0 0-.012.037q0 .018.01.035a.1.1 0 0 0 .03.033q.008.008.02.015l.025.015a11 11 0 0 1 .612.358q.287.184.531.377.244.194.444.393.199.2.349.405.3.411.402.83.101.42.004.831l-.003.012-.001.007c-.132.543-.533 1.11-1.235 1.653a8 8 0 0 1-1.273.791c-.495.253-1.06.494-1.683.716s-1.305.426-2.027.606a30 30 0 0 1-2.273.473c-.786.133-1.594.242-2.404.326a42 42 0 0 1-2.424.183l-.044.003a1 1 0 0 0-.286.057.3.3 0 0 0-.1.057q-.034.03-.034.06v.012zM12.392 1.875a.634.634 0 0 0-.094 1.04.634.634 0 0 0 .708.064l.087-.048.087-.049.175-.097.174-.097.175-.096v1.9a1 1 0 0 0 .01.116.64.64 0 0 0 .39.472.62.62 0 0 0 .464 0 .65.65 0 0 0 .297-.241.64.64 0 0 0 .102-.347v-2.2l.487.098.486.1.486.098.243.05.243.05.06.009a.65.65 0 0 0 .306-.044.6.6 0 0 0 .284-.231.63.63 0 0 0-.074-.798.65.65 0 0 0-.322-.174l-.17-.035-.17-.035-.337-.069-.676-.137-.675-.138L14.8.967l-.17-.034-.17-.035-.025-.005a1 1 0 0 0-.083-.007.64.64 0 0 0-.314.075c-.085.045-.148.08-.214.118l-.204.113-.41.228zM16.837 23.764l.675.138.676.137.675.138.338.07q.085.015.17.034l.17.034a.6.6 0 0 0 .422-.062c.085-.046.148-.082.214-.119l.204-.113.41-.228.614-.34.102-.058c.033-.018.063-.034.106-.06a1 1 0 0 0 .091-.061.634.634 0 0 0 .15-.795.62.62 0 0 0-.378-.3.64.64 0 0 0-.481.055l-.087.048-.087.049-.175.097-.174.097-.175.097V20.72a1 1 0 0 0-.01-.116.64.64 0 0 0-.389-.472.62.62 0 0 0-.465 0 .65.65 0 0 0-.296.242.64.64 0 0 0-.103.346v2.201l-.487-.1-.486-.098-.486-.1-.243-.049-.243-.049a1 1 0 0 0-.122-.013.62.62 0 0 0-.353.104.65.65 0 0 0-.27.402.65.65 0 0 0 .09.474.64.64 0 0 0 .402.271ZM5.52 20.942a.63.63 0 0 0 .457.607l.048.011q.087.019.17.035l.507.104.675.137.338.07.338.068.338.069.169.034.17.034a1 1 0 0 0 .113.013.64.64 0 0 0 .36-.104.619.619 0 0 0 .274-.638.634.634 0 0 0-.496-.509q-.061-.014-.129-.026l-.128-.026-.257-.053-.257-.052-.257-.052.072-.04.035-.02q.018-.008.036-.02a.7.7 0 0 0 .188-.159.64.64 0 0 0 .133-.465.64.64 0 0 0-.235-.423.63.63 0 0 0-.7-.057q-.044.023-.087.048l-.262.146-.349.194v-1.901a1 1 0 0 0-.01-.116.64.64 0 0 0-.39-.472.62.62 0 0 0-.465 0 .65.65 0 0 0-.296.241.64.64 0 0 0-.102.347v2.975ZM26.52 20.61l.408-.227.41-.228.409-.227.307-.17.107-.06.03-.018a.6.6 0 0 0 .241-.288.6.6 0 0 0 .049-.244v-2.975a1 1 0 0 0-.01-.115.64.64 0 0 0-.39-.473.62.62 0 0 0-.465 0 .65.65 0 0 0-.296.242.64.64 0 0 0-.103.347v2.2l-.486-.098-.486-.1-.243-.05-.608-.123-.12-.024a1 1 0 0 0-.116-.013.64.64 0 0 0-.54.286.62.62 0 0 0-.094.456.634.634 0 0 0 .496.509l.129.026.128.026.257.052.257.053.257.052-.071.04-.036.02-.034.018a.64.64 0 0 0-.302.38.64.64 0 0 0 .12.576.7.7 0 0 0 .193.157.63.63 0 0 0 .601-.007ZM5.52 9.04a.633.633 0 1 0 1.264 0V6.838l.486.099.486.099.243.05.243.049.243.05.122.024.12.024a1 1 0 0 0 .116.013.64.64 0 0 0 .541-.286.62.62 0 0 0 .093-.456.635.635 0 0 0-.496-.509l-.129-.026-.128-.026-.257-.052-.257-.053-.257-.052.071-.04.036-.02.036-.019a.7.7 0 0 0 .188-.16.63.63 0 0 0 .057-.7.633.633 0 0 0-.854-.247l-.107.059-.102.057-.205.113-.41.228-.409.227-.205.114-.102.057-.107.06a.7.7 0 0 0-.127.094.64.64 0 0 0-.193.455V9.04ZM12.392 16.751a.634.634 0 0 0-.094 1.041.637.637 0 0 0 .709.063q.087-.047.178-.099l.179-.099.18-.1.178-.099.358-.199.358-.199.619.126.618.126.619.126.309.063.154.032.155.031.03.006a.5.5 0 0 0 .092.007.62.62 0 0 0 .353-.105.64.64 0 0 0 .27-.4.63.63 0 0 0-.493-.746l-.274-.056-.275-.056-.549-.112-.55-.112-.548-.112V13.42a1 1 0 0 0-.01-.116.64.64 0 0 0-.39-.473.62.62 0 0 0-.465 0 .65.65 0 0 0-.296.242.64.64 0 0 0-.103.347v2.602zM26.52 5.733l.697-.388v1.901a1 1 0 0 0 .01.116.64.64 0 0 0 .39.472.62.62 0 0 0 .465 0 .65.65 0 0 0 .296-.241.64.64 0 0 0 .103-.347V4.272a1 1 0 0 0-.008-.103.64.64 0 0 0-.213-.378.63.63 0 0 0-.284-.138q-.087-.019-.17-.035l-.169-.035-.338-.069-.675-.137-.338-.07-.338-.068-.338-.069-.168-.034-.17-.034a1 1 0 0 0-.114-.013.64.64 0 0 0-.36.104.7.7 0 0 0-.18.182.62.62 0 0 0-.094.456.635.635 0 0 0 .496.509q.062.014.129.026l.128.026.257.052.257.053.257.052-.071.04-.036.02-.034.018a.64.64 0 0 0-.302.38.64.64 0 0 0 .12.576.65.65 0 0 0 .314.206.64.64 0 0 0 .48-.056ZM.382 27.21c.05.585.386 1.202 1.052 1.8.333.298.748.592 1.24.873a13 13 0 0 0 1.699.8c.635.25 1.337.48 2.087.688s1.549.39 2.374.547c1.651.313 3.41.52 5.118.626l-.057.218-.028.109-.014.055c-.005.02-.012.042-.014.054-.003.013-.003.014-.001.018l.006.018.014.016.02.016q.024.015.06.028a1 1 0 0 0 .082.022c.129.024.264.022.392-.006l1.17-.273.591-.139.619-.145a.4.4 0 0 0 .094-.043l.014-.013a.1.1 0 0 0 .016-.026.04.04 0 0 0-.002-.028l-.008-.013a.1.1 0 0 0-.027-.025.2.2 0 0 0-.043-.023l-.06-.02-.475-.16-.507-.168-.507-.17-.476-.159a1 1 0 0 0-.115-.031 1 1 0 0 0-.198-.015 1 1 0 0 0-.194.024.5.5 0 0 0-.101.038l-.022.016-.016.017c-.003.004-.005.005-.008.017l-.014.054-.014.053-.027.107-.056.214a39 39 0 0 1-4.753-.593 28 28 0 0 1-2.202-.512 20 20 0 0 1-1.934-.643 12 12 0 0 1-1.573-.745 6.7 6.7 0 0 1-1.15-.814c-.616-.556-.928-1.13-.974-1.675v-.007a1.84 1.84 0 0 1 .13-.832 2.8 2.8 0 0 1 .53-.826q.183-.202.414-.4.23-.196.505-.386a8 8 0 0 1 .919-.545q.17-.088.343-.171l.028-.014a.2.2 0 0 0 .057-.047.1.1 0 0 0 .015-.035.06.06 0 0 0-.005-.037.17.17 0 0 0-.074-.067.6.6 0 0 0-.134-.05 1.4 1.4 0 0 0-.696.013 1 1 0 0 0-.07.027 11 11 0 0 0-.718.373q-.338.193-.633.394-.591.406-.983.84-.39.435-.567.883a2 2 0 0 0-.139.899ZM16.837 8.887l2.197.448v2.305l.002.21a.6.6 0 0 0 .042.177.64.64 0 0 0 .355.355.62.62 0 0 0 .465 0 .65.65 0 0 0 .296-.242.64.64 0 0 0 .103-.347V9.19l.328-.182.328-.182.328-.182.164-.091.163-.091a1 1 0 0 0 .096-.065.64.64 0 0 0 .206-.314.7.7 0 0 0 .019-.256.62.62 0 0 0-.226-.406.634.634 0 0 0-.709-.063q-.087.047-.178.098l-.179.1-.179.1-.179.099-.358.199-.358.199-.619-.126-.618-.126-.619-.126-.309-.063-.154-.032-.155-.031-.03-.006a1 1 0 0 0-.092-.007.63.63 0 0 0-.528.278.63.63 0 0 0-.097.474.64.64 0 0 0 .494.499Z"/> </svg> {% endif %} </span> {{ section.settings.button_text_2 | escape }} </button> {% endif %} </div> </div> </div> </div> <script> const section = document.querySelector('.imersian-visualiser-section'); function isVisible(elem) { return !!(elem && elem.offsetParent !== null); } function checkAndRemoveSection() { const btn1 = document.querySelector('.imersian-view-in-room'); const btn2 = document.querySelector('.imersian_inhome'); console.log('Checking buttons visibility:', { btn1Visible: isVisible(btn1), btn2Visible: isVisible(btn2), sectionExists: !!section, }); if (!isVisible(btn1) && !isVisible(btn2) && section) { section.remove(); observer.disconnect(); } } const observer = new MutationObserver(() => { checkAndRemoveSection(); }); if (section) { observer.observe(section, { childList: true, subtree: true }); } else { observer.observe(document.body, { childList: true, subtree: true }); } checkAndRemoveSection(); </script>
Refresh Theme Editor
Once the section is added, refresh the theme editor.
Add Section to Template
The new Imersian Section will now be available in your editor.
Drag it into your desired location on the product page template.
Customize the Section
Use the settings to:
Upload a custom video (or reach out to us to help create one for you)
Edit the display title
Edit the description
Adjust the placement and layout of the buttons
Edit the button icons and display text
Final Notes
Ensure the product is enabled for visualisation in the Imersian app for the buttons to display.
Both methods are compatible with Shopify’s Online Store 2.0.
Need Help?
If you run into any issues, please reach out to Imersian Support.