How can I disable the lightbox video pop up in Archetype Impulse 7.3.3. theme?

[Carlos87]

My Archetype Impulse 7.3.3. theme loads all the product videos in a <iframe> lightbox that takes over the whole screen if you click to watch a video. We want all videos to play within the embed when clicked, not in a lightbox.

I've contacted my theme developer - they can't help and said to get external coding help here in the forums.

Can anyone guide me as to what code I need to write into the theme files to achieve this and where to locate this?

I can attach a loom video below to a developer friend I know and I describe the issue there if it's more helpful but Shopify doesn't let me I think:

https://www.loom.com/share/55961c0fa9714e27aef1715a6e85737c?sid=9d046525-c6bd-45c0-9579-6e717869508f

[Huptech-Web]

Hello @Carlos87 , The reason your video opens in Popup is because there is a YouTube link added to the play button. So it is opening the YouTube video in Popup. I have only checked it from the storefront so can't figure out the exact code.

To fix this you need to track the Product gallery section code for the Product page and use a video tag instead of a link. Look for the "main-product.liquid" file in the Sections. In the "main-product.liquid" Check if there is any Snippet rendered for the product gallery section. The code could be added as below screenshot. Also, the file name may be different than "product-media-gallery" in your theme.

If you are not familiar with the coding you should hire a developer to fix this issue.

[Carlos87]

Hey, thank you so much for the help. I think I've found it. I'll attach a video and the code below. This is the only section that has the word "render" in it. Let me know what kind of code I'd need to add - thank you so much!!!

Video: https://www.loom.com/share/5da709e3599049f79f9243bf5c328ae9?sid=ece7e675-4f54-4667-a255-2ddd8e3d7296

{%- liquid
assign isModal = false
if template == 'product.modal'
assign isModal = true
endif
-%}

{%- render 'product-template',
product: product,
section_id: section.id,
blocks: section.blocks,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
product_zoom_enable: section.settings.product_zoom_enable,
sku_enable: section.settings.sku_enable,
isModal: isModal,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_height: section.settings.thumbnail_height,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style,
context: 'main-product',
-%}

<div class="yotpo-widget-instance" data-yotpo-instance-id="671584" data-yotpo-product-id="{{product.id}}" data-yotpo-name="{{ product.title | escape }}" data-yotpo-url="{{ shop.url }}{{ product.url }}" data-yotpo-image-url="{{ product.featured_image | product_img_url: "large" | prepend: "https:" | replace: '?', '%3F' | replace: '&','%26'}}" data-yotpo-price="{{ product.price | divided_by: 100.00 }}" data-yotpo-currency="{{ shop.currency }}" data-yotpo-description="{{ product.description | escape }}"></div>

<!-- <div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}"
data-price="{{ variant.price | money_without_currency }}"
data-currency="{{ shop.currency }}"
data-description="{{ product.description | escape }}">
</div> -->
{% schema %}
{
"name": "t:sections.main-product.name",
"settings": [

[Carlos87]

Rishi, what is your email. Let's sit down on a Zoom call to figure this out. I'll compensate for your time to solve this.

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

As per our observations, before clicking on the video button, the VideoModal ID and CSS appeared normal. However, after clicking on the video button, external CSS was added. If you wish to disable this CSS, you can do so where your product gallery JS is implemented.

Screenshot has been attached for your reference:

If you have any concerns feel free to ask.

Regards,
San

[Carlos87]

Hey. thank you so much for the help. I think I've found it. I'll attach a video and the code below. This is the only section that has the word "render" in it. Let me know what kind of code I'd need to add - thank you so much!!!

Video: https://www.loom.com/share/5da709e3599049f79f9243bf5c328ae9?sid=ece7e675-4f54-4667-a255-2ddd8e3d7296

{%- liquid
assign isModal = false
if template == 'product.modal'
assign isModal = true
endif
-%}

{%- render 'product-template',
product: product,
section_id: section.id,
blocks: section.blocks,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
product_zoom_enable: section.settings.product_zoom_enable,
sku_enable: section.settings.sku_enable,
isModal: isModal,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_height: section.settings.thumbnail_height,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style,
context: 'main-product',
-%}

<div class="yotpo-widget-instance" data-yotpo-instance-id="671584" data-yotpo-product-id="{{product.id}}" data-yotpo-name="{{ product.title | escape }}" data-yotpo-url="{{ shop.url }}{{ product.url }}" data-yotpo-image-url="{{ product.featured_image | product_img_url: "large" | prepend: "https:" | replace: '?', '%3F' | replace: '&','%26'}}" data-yotpo-price="{{ product.price | divided_by: 100.00 }}" data-yotpo-currency="{{ shop.currency }}" data-yotpo-description="{{ product.description | escape }}"></div>

<!-- <div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}"
data-price="{{ variant.price | money_without_currency }}"
data-currency="{{ shop.currency }}"
data-description="{{ product.description | escape }}">
</div> -->
{% schema %}
{
"name": "t:sections.main-product.name",
"settings": [

[INA_MSWEB]

Hello,

Thank you for reaching out to us again.

You are required to turn off the product zoom option within the theme customization settings.

Set isModel to false and then locate where JavaScript is applied to the element "isModel". This can be found in either the theme.js or vendor.js file.

Hope this helps.

Regards,

San

[Carlos87]

San, what is your email. Let's sit down on a Zoom call to figure this out. I'll compensate for your time to solve this.