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

Carlos87
New Member
5 0 0

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

Replies 7 (7)

Rishihuptech
Shopify Partner
489 83 94

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.

Screenshot_28.png

 

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.

Screenshot_30.png

 

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Carlos87
New Member
5 0 0

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
New Member
5 0 0

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.

SAN_MSWEB
Shopify Expert
1105 131 137

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:

SAN_MSWEB_0-1712837161148.png

 

 

SAN_MSWEB_1-1712837161206.png

If you have any concerns feel free to ask.

Regards,
San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Carlos87
New Member
5 0 0

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": [

SAN_MSWEB
Shopify Expert
1105 131 137

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Carlos87
New Member
5 0 0

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.