How to add an Iframe in the product gallery

Store Design
1

Hi,

I want to add an iframe into a product gallery, I tried to add it in but it duplicates it when I do.

Here is the code and preview:https://apm-staging.myshopify.com/products/dainty-pave-ring

{%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT GALLERY
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- assign initial_media_id = product.featured_media.id -%}
    {%- assign initial_media_index = 0 -%}
    {%- assign media_count = 0 -%}

    {%- capture slideshow_media -%}
      {%- for media in product.media -%}
        {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
          {%- continue -%}
        {%- endif -%}
        
        {%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
          {%- assign initial_media_index = media_count -%}
          {%- assign initial_media_id = media.id -%}
        {%- endif -%}

        {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}
        {%- case media.media_type -%}
          {%- when 'image' -%}
            
              

                {% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                
                

                
              

            

          {%- when 'external_video' -%}
            
              

                

                  {{- media | external_video_tag: image_size: '1024x' -}}
                

              

            

          {%- when 'video' -%}
            
              

                

                {% if media_count > 1 -%}
                  
                  {{- media | video_tag: image_size: '1024x', controls: true, autoplay: true -}}
                  
                  {% else %}
                  
                    {{- media | video_tag: image_size: '1024x', controls: true -}}
                  
                  {% endif %}
                

              

            

          {%- when 'model' -%}
            
              

                

                  {{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
                

              

            

        {%- endcase -%}
             <iframe title="Test-1" frameborder="0" allowfullscreen="" mozallowfullscreen="true" width="100%" height="800px" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking="" execution-while-out-of-viewport="" execution-while-not-rendered="" web-share="" src="https://sketchfab.com/models/bff30afe583d456d961859b9a243096e/embed"> </iframe> 

        {%- assign media_count = media_count | plus: 1 -%}
      {%- endfor -%}
    {%- endcapture -%}

    {%- if product.media.size > 0 -%}
      
        

        {%- if action_list_items != blank -%}
          

            {{ action_list_items }}
          

        {%- endif -%}

        {%- capture slideshow_nav -%}
          {%- if media_count > 1 -%}
            {%- if section.settings.show_thumbnails -%}
              
                

                  {%- for media in product.media -%}
                    {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
                      {%- continue -%}
                    {%- endif -%}

                    {%- capture nav_item_badge -%}
                      {%- case media.media_type -%}
                        {%- when 'model' -%}
                          {% render 'icon', icon: 'media-model-badge' %}

                        {%- when 'video' or 'external_video' -%}
                          {% render 'icon', icon: 'media-video-badge' %}
                      {%- endcase -%}
                    {%- endcapture -%}

                    {%- if section.settings.stack_images -%}
                      
                        
                        {{- nav_item_badge -}}
                      
                    {%- else -%}
                      
                        
                        {{- nav_item_badge -}}
                      
                    {%- endif -%}
                  {%- endfor -%}
                

              

            {%- endif -%}

            {%- if section.settings.stack_images -%}
              
                

                  {%- for media in product.media -%}
                    {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
                      {%- continue -%}
                    {%- endif -%}

                    
                  {%- endfor -%}
                

              

            {%- endif -%}
          {%- endif -%}
        {%- endcapture -%}

        {%- if section.settings.stack_images -%}
          {{- slideshow_nav -}}
        {%- endif -%}

        {%- capture flickity_options -%}
        {
          "prevNextButtons": false,
          "pageDots": false,
          "adaptiveHeight": true,
          "watchCSS": true,
          "dragThreshold": 8,
          "initialIndex": {{ initial_media_index }},
          "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
        }
        {%- endcapture -%}

        
          {{ slideshow_media }}
        

        {%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
        {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

        {%- if first_3d_model -%}
          
        
        {%- endif -%}

        {%- if media_count > 1 -%}
          {%- comment -%}
            IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
            since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
            achievable easily using Flickity options only, so we have to run our own
          {%- endcomment -%}

          

            

            

              {%- for i in (1..media_count) -%}
                
              {%- endfor -%}
            

            
          

        {%- endif -%}

        {%- unless section.settings.stack_images -%}
          {{- slideshow_nav -}}
        {%- endunless -%}
      

    {%- endif -%}

    {%- capture product_aside -%}
      {%- comment -%}

Thanks

2

Hello @JKIRK ,

Based on the code you provided, it looks like you added an

3

Hi @irene-vintage , thanks for the reply.

I copied over the code you sent and I still have the same problem.

Thanks