Embedding lightbox code to a shopify site is not working correctly

  • Profile Image
    inspiredwraps
    Asked on April 17, 2019 at 07:26 PM

    So, if I have an image on the form I need to customize it? Where do I put this code once I copy it??



    This is a re-post of a comment on How to Create a Lightbox Form

  • Profile Image
    roneet
    Answered on April 17, 2019 at 10:43 PM

    If you have any website then you can embed this Lightbox code in the body section of your website.

    Let us know which website(Squarespace, Wix, etc) do you have?

    Thanks.

  • Profile Image
    inspiredwraps
    Answered on May 12, 2019 at 12:43 PM
    Hi,
    Would you walk me through how to not have my pop up come up on every page of my website? Is there a way to customize the timing of the pop up? Or maybe just have it pop up at the beginning and the end of a visit?
    Thanks!
    Jennifer
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    Welvin
    Answered on May 12, 2019 at 02:32 PM

    You have to remove the current lightbox script from your website. You seem to have put that on your footer scripts, so that is why the window opens up on every page of your website.

    Next, edit the page where you'd like to have the pop up to open. Click on the Edit HTML icon as shown in the image below and paste the lightbox script there.

    15576859102019-05-13-001.png

    Don't forget to save, and that's it. 

    Here's an example with 5 seconds delay: https://jotformwelvin.myshopify.com/pages/contact-us

    To delay the lightbox, you need to add a custom script as detailed in this guide:

    https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form 

  • Profile Image
    inspiredwraps
    Answered on May 12, 2019 at 07:43 PM
    Thanks for the directions! I erased the script from the website but, unfortunately, I didn’t think to copy the script before I erased it. Where can I find it?
    Thanks!
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    ashwin_d
    Answered on May 13, 2019 at 01:21 AM

    Please note that you can copy your form's lightbox embed code from the "PUBLISH" >> "EMBED" >> "LIGHTBOX" section of form builder. Please check the screenshot below:

    1557724823lightbox.gif

    Hope this helps.

    Do try it out and get back to us if you have any questions.

  • Profile Image
    inspiredwraps
    Answered on May 13, 2019 at 10:43 AM
    I still cannot figure out where to place the script to have it pop up on the home page and upon exiting. There is no way to edit the html under the home page. If I put it under ‘contact us’ would that mean it would only pop up if someone went to the ‘contact us’ page?
    sincerely,
    confused
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    ashwin_d
    Answered on May 13, 2019 at 12:04 PM

    Yes that is correct. If you add the the lightbox code in contact us page, the linghtbox form will be displayed only when user go to contact us page of your website.

    https://inspiredwraps.com/ Is this the website where you want to load the lightbox form in home page? This seems to be a shopify site.

    You may like to take a look at the following guide on how to edit the homepage of Shopify website: https://www.plobalapps.com/knowledge-base/edit-homepage-of-your-shopify-store/ 

    Do try to edit your homepage, add the lightbox code and get back to us if you have any questions.

  • Profile Image
    inspiredwraps
    Answered on May 24, 2019 at 09:43 AM
    Hello,
    I finally figured out how to place my pop up on my site but now, it is interfering with the slideshow on my homepage. How do I work around that?
    Thank you
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    roneet
    Answered on May 24, 2019 at 10:14 AM

    Are you referring to this website?

    https://inspiredwraps.com/

    The Form seems to be displayed correctly, there is no slideshow on your website. Have you removed it?

    15587072191.PNG

    If you are referring to some other page, please let us know.

    Thanks.

  • Profile Image
    inspiredwraps
    Answered on May 24, 2019 at 06:43 PM
    There is SUPPOSED to be a slideshow on my website but when the pop up is placed on the homepage the slideshow disappears. Like I said, Do you Jott form pop-up is interfering with the slideshow.
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    ashwin_d
    Answered on May 25, 2019 at 12:10 AM

    Please note that Lightbox embed code includes script and sometime it can cause code conflict with other scripts of your webpage. 

    I did check your webpage and it seems you have removed the lightbox code and added a hyperlink in the header section. Please check the screenshot below:

    1558757284popup.png

    I would request you to please add the form's lightbox embed code in your website again and we will take a look. 

    We will wait for your response.

  • Profile Image
    inspiredwraps
    Answered on May 25, 2019 at 10:43 AM

    Thank you. I’ve put the pop-up back.
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    Kiran
    Answered on May 25, 2019 at 03:56 PM

    I see that the slideshow on the web page is displaying only the controls. We assume that the slideshow is working normally when the JotForm embed code is removed from the home page. If so, please try removing the embed code from the home page and then follow the guide below to add with the lightbox code to the Contact Us page.

    https://www.jotform.com/help/217-Adding-a-form-to-Shopify-Store-Frontpage

    Let us know how it goes. 

  • Profile Image
    inspiredwraps
    Answered on May 26, 2019 at 03:43 PM
    I would rather the lightbox pop-up come up on the homepage. I do not want it to only come up when someone goes to the contact us page. That seems useless.
    Thanks,
    Jennifer
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    Kiran
    Answered on May 26, 2019 at 11:28 PM

    You may use the lightbox embed code instead of the default embed code as provided in the guide. 

    Please give it a try and let us know if you need any further assistance. 

  • Profile Image
    inspiredwraps
    Answered on June 03, 2019 at 10:43 AM
    Hello,
    I’ve had a lot of trouble with the Jott form I’m using as a light box, or pop up, on my website. The slideshow on my website does not work when the pop-up is enabled. I had someone look at it and this was their response:
    I noticed that the slider is not functioning when the popup is enabled as it breaks the current implementation due to the code the form injects
    How can I correct this?
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    inspiredwraps
    Answered on June 03, 2019 at 10:43 AM
    Before you tell me to put the light box on the contact us page, That is a useless area to put a pop up. Hardly anyone goes to the contact us page. I would like the pop-up to come up on the homepage while simultaneously having my slideshow work.
    https://inspiredwraps.com/
    https://www.etsy.com/shop/InspiredWrapsCo?ref=ss_profile
    https://www.instagram.com/inspiredwraps/
    ...
  • Profile Image
    roneet
    Answered on June 03, 2019 at 01:13 PM

    We are sorry for the inconvenience this is causing.

    Is the Slider getting loaded without the Lightbox's code? As there are console errors on the browser saying that the Slider is not getting loaded.

    Could you please include this code in the head section of the page:

    <script src="https://cdn.shopify.com/s/files/1/0181/6536/6884/t/6/assets/theme.js" type="text/javascript"></script>

    15595818201.PNG

    If it still does not work then delete the above code when you have pasted the Opt-in-Form and include the lightbox code after the Slider div element.

    Please give it a try and let us know.

    Thanks.