Search...

3. Storefront & Design

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.

You've created amazing 3D assets, now it's time to show them off. This guide walks you through the Shopify Theme Editor (Online Store 2.0) to place the 'View in Room' button exactly where you want it on your product page. No coding required(Besides a simple copy and paste) .

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

  1. Access Theme Editor

    • Go to Shopify Admin → Online Store → Themes → Customize.

  2. Open Product Page Template

    • Navigate to the product page template where you want the buttons to appear.

  3. Add Button Block

    • Inside the editor, insert either the Imersian Visualiser and/or AR button block from the App Blocks.

  4. Position

    • Place the block where desired . We recommend placing it beneath the Buy button blocks

    Shopify UI Changes for Imersian

  5. 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:

        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;
  }
}
</style>

  6. 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.

  1. Insert Section Block in Code

    • Add the provided imersian-inhome-section.liquid code to your theme’s sections folder.

      {% schema %}
{
  "name": "Imersian In-Home",
  "tag": "section",
  "class": "imersian-universal-section",
  "settings": [
    /* --- 1. THEME SETUP --- */
    {
      "type": "header",
      "content": "Theme Configuration"
    },
    {
      "type": "paragraph",
      "content": "Select your theme to ensure buttons and layout match your store."
    },
    {
      "type": "select",
      "id": "theme_selector",
      "label": "Current Theme",
      "options": [
        { "value": "impulse", "label": "Archetype (Impulse, Motion, Streamline)" },
        { "value": "dawn", "label": "Standard (Dawn, Craft, Sense, Ride)" },
        { "value": "prestige", "label": "Maestrooo (Prestige, Impact, Focal)" },
        { "value": "generic", "label": "Generic / Other" }
      ],
      "default": "impulse"
    },

    /* --- 2. CONTENT --- */
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "headline",
      "label": "Headline",
      "default": "Want to see this product in your room?"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading Size",
      "options": [
        { "value": "h0", "label": "H0 (Huge)" },
        { "value": "h1", "label": "H1 (Large)" },
        { "value": "h2", "label": "H2 (Medium)" },
        { "value": "h3", "label": "H3 (Small)" }
      ],
      "default": "h2"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Picking the perfect piece has never been easier! Visualise it in your own space before making a decision.</p>"
    },
    {
      "type": "text",
      "id": "video_url",
      "label": "Video URL (MP4)",
      "info": "Leave blank to use default."
    },

    /* --- 3. PRIMARY BUTTON --- */
    {
      "type": "header",
      "content": "Primary Button"
    },
    {
      "type": "text",
      "id": "button_text_1",
      "label": "Button Text",
      "default": "See it in my room",
      "info": "Leave blank to hide."
    },
    {
      "type": "select",
      "id": "button_icon_style_1",
      "label": "Icon Style",
      "options": [
        { "value": "default", "label": "Default Icon" },
        { "value": "custom", "label": "Custom Image" },
        { "value": "none", "label": "No Icon" }
      ],
      "default": "default"
    },
    {
      "type": "image_picker",
      "id": "button_icon_1",
      "label": "Custom Icon Image"
    },

    /* --- 4. SECONDARY BUTTON --- */
    {
      "type": "header",
      "content": "Secondary Button"
    },
    {
      "type": "text",
      "id": "button_text_2",
      "label": "Button Text",
      "default": "View in AR",
      "info": "Leave blank to hide."
    },
    {
      "type": "select",
      "id": "button_icon_style_2",
      "label": "Icon Style",
      "options": [
        { "value": "default", "label": "Default Icon" },
        { "value": "custom", "label": "Custom Image" },
        { "value": "none", "label": "No Icon" }
      ],
      "default": "default"
    },
    {
      "type": "image_picker",
      "id": "button_icon_2",
      "label": "Custom Icon Image"
    },

    /* --- 5. COLOURS (Hybrid) --- */
    {
      "type": "header",
      "content": "Colours"
    },
    {
      "type": "color_scheme",
      "id": "scheme",
      "label": "Theme Colour Scheme",
      "default": "background-1",
      "info": "Works on Dawn, Craft, and modern themes."
    },
    {
      "type": "paragraph",
      "content": "--- OR ---"
    },
    {
      "type": "checkbox",
      "id": "enable_custom_colors",
      "label": "Enable Custom Section Colours",
      "default": false,
      "info": "Check this to override the theme scheme above."
    },
    {
      "type": "color",
      "id": "custom_bg_color",
      "label": "Custom Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_text_color",
      "label": "Custom Text",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Button Colour Overrides"
    },
    {
      "type": "checkbox",
      "id": "override_theme",
      "label": "Override Theme Button Colours",
      "default": false
    },
    {
      "type": "color",
      "id": "primary_button_bg",
      "label": "Primary Background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "primary_button_text",
      "label": "Primary Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "secondary_button_bg",
      "label": "Secondary Background",
      "default": "#f6f6f6"
    },
    {
      "type": "color",
      "id": "secondary_button_text",
      "label": "Secondary Text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "secondary_button_border",
      "label": "Secondary Border",
      "default": "#d9d9d9"
    },

    /* --- 6. LAYOUT --- */
    {
      "type": "header",
      "content": "Layout & Spacing"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "label": "Desktop Layout",
      "options": [
        { "value": "image_first", "label": "Media Left, Content Right" },
        { "value": "text_first", "label": "Content Left, Media Right" }
      ],
      "default": "image_first"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "button_layout",
      "label": "Button Layout",
      "options": [
        { "value": "horizontal", "label": "Side by Side" },
        { "value": "vertical", "label": "Stacked" }
      ],
      "default": "horizontal"
    },
    {
      "type": "checkbox",
      "id": "use_theme_padding",
      "label": "Use theme default padding",
      "default": true
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top Padding",
      "min": 0, "max": 100, "step": 4, "unit": "px", "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom Padding",
      "min": 0, "max": 100, "step": 4, "unit": "px", "default": 36
    },
    {
      "type": "checkbox",
      "id": "enable_auto_hide",
      "label": "Auto-hide if buttons hidden",
      "default": false
    }
  ],
  "presets": [{ "name": "Imersian Visualiser" }]
}
{% endschema %}

{% liquid
  # --- THEME MAPPING ---
  assign theme_container = 'page-width'
  assign theme_btn_prim = 'button button--primary'
  assign theme_btn_sec  = 'button button--secondary'
  assign theme_is_impulse = false

  case section.settings.theme_selector
    when 'impulse'
      assign theme_container = 'page-width' 
      assign theme_btn_prim  = 'btn btn--primary'
      assign theme_btn_sec   = 'btn btn--secondary'
      assign theme_is_impulse = true
    when 'dawn'
      assign theme_container = 'page-width'
      assign theme_btn_prim  = 'button button--primary'
      assign theme_btn_sec   = 'button button--secondary'
    when 'prestige'
      assign theme_container = 'Container'
      assign theme_btn_prim  = 'Button Button--primary'
      assign theme_btn_sec   = 'Button Button--secondary'
    when 'generic'
      assign theme_container = 'container'
      assign theme_btn_prim  = 'btn button'
      assign theme_btn_sec   = 'btn button'
  endcase

  # --- LOGIC ---
  assign text_has_content = false
  if section.settings.headline != blank or section.settings.description != blank
    assign text_has_content = true
  endif

  assign has_button_1 = false
  if section.settings.button_text_1 != blank
    assign has_button_1 = true
  endif

  assign has_button_2 = false
  if section.settings.button_text_2 != blank
    assign has_button_2 = true
  endif
  
  assign show_section = false
  if section.settings.video_url != blank or text_has_content or has_button_1 or has_button_2
    assign show_section = true
  endif

  if section.settings.desktop_layout == 'text_first'
    assign media_order_css = '2'
    assign content_order_css = '1'
  else
    assign media_order_css = '1'
    assign content_order_css = '2'
  endif
%}

{% style %}
  /* --- Layout & Spacing --- */
  .section-{{ section.id }} {
    padding-top: {% if section.settings.use_theme_padding %}var(--index-padding, 40px){% else %}{{ section.settings.padding_top }}px{% endif %};
    padding-bottom: {% if section.settings.use_theme_padding %}var(--index-padding, 40px){% else %}{{ section.settings.padding_bottom }}px{% endif %};
    
    /* CUSTOM COLOUR OVERRIDES (Only if checked) */
    {% if section.settings.enable_custom_colors %}
      background-color: {{ section.settings.custom_bg_color }};
      color: {{ section.settings.custom_text_color }};
    {% endif %}
  }

  /* Ensure text color inherits if custom color is active */
  {% if section.settings.enable_custom_colors %}
  .section-{{ section.id }} h0, .section-{{ section.id }} h1, .section-{{ section.id }} h2, 
  .section-{{ section.id }} h3, .section-{{ section.id }} h4, .section-{{ section.id }} p {
    color: {{ section.settings.custom_text_color }};
  }
  {% endif %}

  /* Custom Flex Layout */
  .imersian-flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -20px;
  }

  .imersian-flex-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .imersian-flex-item.full-width {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  @media only screen and (max-width: 768px) {
    .imersian-flex-item {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 20px;
    }
    .imersian-flex-container {
      flex-direction: column;
    }
    .imersian-media { order: 1; }
    .imersian-content { order: 2; }
  }

  /* --- Content --- */
  .imersian-content {
    text-align: {{ section.settings.content_alignment }};
  }

  .imersian-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    border-radius: 8px;
  }

  .imersian-video-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Buttons --- */
  .imersian-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex-direction: {% if section.settings.button_layout == 'vertical' %}column{% else %}row{% endif %};
    justify-content: {% case section.settings.content_alignment %}{% when 'left' %}flex-start{% when 'right' %}flex-end{% else %}center{% endcase %};
  }

  .room-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    vertical-align: middle;
    text-decoration: none;
    {% if section.settings.button_layout == 'vertical' %}width: 100%;{% endif %}
  }

  /* FIX: Impulse Centering */
  {% if theme_is_impulse %}
  .room-button::before,
  .room-button::after {
    display: none !important;
    content: none !important;
  }
  {% endif %}

  .icon-wrapper {
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .icon-wrapper svg, .icon-wrapper img {
    width: 100%; height: 100%; object-fit: contain;
  }

  /* --- Button Overrides --- */
  {% if section.settings.override_theme %}
    .imersian-view-in-room {
      background-color: {{ section.settings.primary_button_bg }} !important;
      color: {{ section.settings.primary_button_text }} !important;
      border: 1px solid {{ section.settings.primary_button_bg }} !important;
    }
    .imersian-view-in-ar {
      background-color: {{ section.settings.secondary_button_bg }} !important;
      color: {{ section.settings.secondary_button_text }} !important;
      border: 1px solid {{ section.settings.secondary_button_border }} !important;
    }
  {% endif %}
{% endstyle %}

{% if show_section %}
  <div class="section-{{ section.id }} color-{{ section.settings.scheme }} gradient">
    
    <div class="{{ theme_container }}">
      
      <div class="imersian-flex-container">
        
        {% if section.settings.video_url != blank %}
          <div class="imersian-flex-item imersian-media" style="order: {{ media_order_css }};">
            <div class="imersian-video-wrapper">
              {% liquid assign video_src = section.settings.video_url | default: 'https://cdn.shopify.com/videos/c/o/v/d6391015913e480fb0d542db9ebb8913.mp4' %}
              <video autoplay loop muted playsinline>
                <source src="{{ video_src }}" type="video/mp4">
              </video>
            </div>
          </div>
        {% endif %}

        <div class="imersian-flex-item imersian-content {% if section.settings.video_url == blank %}full-width{% endif %}" style="order: {{ content_order_css }};">
          
          {% if section.settings.headline != blank %}
            <{{ section.settings.heading_size }} class="section-header__title h2">
              {{ section.settings.headline | escape }}
            </{{ section.settings.heading_size }}>
          {% endif %}

          {% if section.settings.description != blank %}
            <div class="rte">
              {{ section.settings.description }}
            </div>
          {% endif %}

          {% if has_button_1 or has_button_2 %}
            <div class="imersian-buttons">
              
              {% if has_button_1 %}
                <a href="#" class="{{ theme_btn_prim }} room-button imersian-view-in-room" role="button" data-product-id="{{ product.id }}">
                  {% if section.settings.button_icon_style_1 != 'none' %}
                    <span class="icon-wrapper">
                      {% if section.settings.button_icon_style_1 == 'custom' and section.settings.button_icon_1 %}
                        <img src="{{ section.settings.button_icon_1 | image_url: width: 40 }}" alt="Icon">
                      {% else %}
                        <svg fill="currentColor" viewBox="0 0 20 20"><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="#currentColor" 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" /></svg>
                      {% endif %}
                    </span>
                  {% endif %}
                  <span>{{ section.settings.button_text_1 }}</span>
                </a>
              {% endif %}

              {% if has_button_2 %}
                <a href="#" class="{{ theme_btn_sec }} room-button imersian-view-in-ar" role="button">
                  {% if section.settings.button_icon_style_2 != 'none' %}
                    <span class="icon-wrapper">
                      {% if section.settings.button_icon_style_2 == 'custom' and section.settings.button_icon_2 %}
                        <img src="{{ section.settings.button_icon_2 | image_url: width: 40 }}" alt="Icon">
                      {% else %}
                        <svg fill="currentColor" viewBox="0 0 34 34"><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.65.65 0 0 0 .314.206.64.64 0 0 0 .48-.056ZM5.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>
                  {% endif %}
                  <span>{{ section.settings.button_text_2 }}</span>
                </a>
              {% endif %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% if section.settings.enable_auto_hide %}
  <script>
    (function () {
      const section = document.currentScript.closest('.section-{{ section.id }}');
      if(section) {
        const b1 = section.querySelector('.imersian-view-in-room');
        const b2 = section.querySelector('.imersian-view-in-ar');
        const isB1Hidden = !b1 || (b1.offsetParent === null);
        const isB2Hidden = !b2 || (b2.offsetParent === null);

        if (isB1Hidden && isB2Hidden) {
          section.remove();
        }
      }
    })();
  </script>

  2. Refresh Theme Editor

    • Once the section is added, refresh the theme editor.

  3. 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.

  4. Customize the Section

    • Use the settings to:

      • Select the appropriate setting based on your theme

      • 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.

Image Guidelines for 3D Visualisation in Shopify

This page is not optimised for mobile (yet)

Please visit this page on your desktop for the best experience.