Site banner isn’t showing while visiting through instagram and TikTok

Store Design
,
1

Can I get a little hand please, website is Elixirdiuomo.com no password.

thanks in advance

IMG_9304.png
IMG_9304.png1320×2868 233 KB

2

Hey @Joev383 ,

The issue with your site banner not showing when visiting via Instagram or TikTok is likely due to how their in-app browsers handle scripts and storage. These browsers often restrict localStorage and certain JavaScript functionalities, which can prevent banners from displaying properly.

To resolve this, I recommend using cookies instead of localStorage to manage banner visibility, or explicitly showing the banner based on the user-agent like this:

{% assign ua = request.headers['user-agent'] | downcase %}
{% if ua contains 'instagram' or ua contains 'tiktok' %}
  {% render 'your-banner-snippet' %}
{% endif %}

If you’d like me to take a closer look and help implement this, please feel free to connect with me using the contact details in my signature below.

Thanks,

Rajat

Shopify Expert

3

This issue is not specific to your case — it’s a widespread problem occurring across the Instagram browser.

After thorough investigation and effort, I discovered an effective solution. I recently resolved the same issue for another client, and I’d be happy to share the code I used to fix it.

{% style %}  
.video-wrapper {  
  position: relative;  
  overflow: hidden;  
  width: 100%;  
}  
.video-wrapper video {
    width: 70%;
    height: 100vh;
    display: block;
    object-fit: cover;
  background: #000;
}  
video::-webkit-media-controls {  
  display: none !important;  
}  
.main-wrapper {
    position: relative;
    background: #000;
}
.content_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0 60px;
    flex-direction: column;
    justify-content: center;
    max-width: 800px;
    margin-left: auto;
    text-align: center;
}
h3.content_wrapper_sub_heading {
    color: #564e44;
    font-size: 24px;
    font-weight: 400 !important;
    margin: 0;
    font-family: 'Rajdhani';
}
h2.content_wrapper_heading {
    font-size: 46px;
    color: #fff;
    margin: 25px 0 0;
}
  .heading_content {
    margin-bottom: 30px;
}
.button_block a {
    background: #A0825F;
    font-size: 18px !important;
    color: #fff;
    padding: 10px 10px;
    text-transform: uppercase;
    display: block;
    max-width: 100px;
    margin: auto;
  transition:all 0.2s ease;
}
  .button_block a:hover {
    background: #232323;
     transform: translateY(-8px);
}
  @media (max-width:600px){
    .video-wrapper video {
    width: 100%;
    height: 95vh;
    padding-top: 100px;
  }
    h2.content_wrapper_heading {
    font-size: 24px;
    padding: 15px 0 0;
    margin: 0;
  }
  .content_wrapper {
    height: 70%;
    padding: 0 20px;
    justify-content: space-between;
    margin: auto;
    margin-top: 155px;
  }
    .button_block a {
    font-size: 12px !important;
  }
}
{% endstyle %}  

  
  
    {% if section.settings.shopify_video != blank %}  
      {{  
        section.settings.shopify_video  
        | video_tag: image_size: '1100x', autoplay: true, loop: true, controls: false, muted: true, playsinline: true, preload: 'auto'  
      }}  
    {% endif %}  
  
  
  
    

      ### {{ section.settings.subheading }}
      ## {{ section.settings.heading }}
    

    {{ section.settings.button-label }}

  

  
{% schema %}  
{  
  "name": "Custom Video",  
  "settings": [  
    {  
      "type": "video",  
      "id": "shopify_video",  
      "label": "Upload Shopify Hosted Video",  
      "info": "Shopify hosted video will take priority."  
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub Heading",
      "default":"Mor Nov Jewelry"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default":"CRAFTED TO STAND APART"
    },
    {
      "type": "text",
      "id": "button-label",
      "label": "Button Label",
      "default":"Shop"
    },
    {
      "type": "url",
      "id": "button-link",
      "label": "Button URL"
    }
  ],  
  "presets": [  
    {  
      "name": "Custom Video"  
    }  
  ]  
}  
{% endschema %}

Basically I use JS to handle to video play event on IG browser. If you are familiar with coding then you will be able to find which attributes I used to resolve it.

By the way the same coding you can use for the purpose of video autoplay on IG Browser and TikTok Browser.

If this was helpful Mark as Solution and Like it.

4

Hi @Joev383

I believe this is an issue with your internet or device because I was able to access your store on Instagram using my iPhone, and it worked well.

5

Hi thanks for the reply, where should I place this code? Thanks