How can I install a JavaScript pop up banner on Shopify?

[Ferrix]

Hi all,

Hope someone can help..

I need to install a pre-determined splash pop up banner and I have been given a JavaScript folder with a code but I am not sure if this can be done on Shopify.  Has someone had the same issue?  

Any help would be highly appreciated.

Thanks

Andrea

[OpenThinking]

Hi there,
Jack from OpenThinking here!

1. You need to upload all the files that were given to you into the assets folder
2. After that you need to call these files into your layout/theme.liquid file (at the end just before the </body> tag), with the following code: 

{{ 'nameOfFile.js' | asset_url | script_tag }}
{{ 'nameOfFile2.js' | asset_url | script_tag }}

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

[Ferrix]

Hi Open Thinking,

Many thanks for taking the time to look at this.  Apologies for my ignorance but where can I find the assets folder?

Thanks again,

Andrea

[OpenThinking]

Online store > Themes > Actions > Edit code

 

[Ferrix]

Hi OpenThiking,

Many thanks again for taking the time to respond to me, I really appreciated.

Unfortunately, I can't get this to work it looks like I am required to actually transfer a folder rather than single files. Do you know if folders can be added to the Assets folder?

The below are the instructions that I was given by the MLM company I work for

Installation instructions

The popup has been created to require as little configuration as possible to be included

on your website, but still give you the flexibility to control how it is installed if you

need it.

Follow the steps below to get the pop-up working on your site:

1. Unzip the attached herbalife-popup.zip file. This will give you a folder called

'herbalife-popup'

2. Copy this folder and its contents to your webserver. If possible, you should copy

it to the top level of your hosting (where your index files are). If you are unsure 

of this, your web hosting partner or digital team will be able to help you.

3. If you leave the folder called 'herbalife-popup', and do not rename any of the files

in that folder, then you do not need to open these files. If you do need to edit

the name, or cannot put it in the top level of your hosting, then you will need to

make some file changes - see section below 'how to change the name or path of the

popup'.

4. Include the following code in the footer of your website, directly above the </body>

tag:

<div id="herbalifepopup"></div>

<script type='text/javascript' src='/herbalife-popup/js-include.js'></script>

5. That should then be installation complete.

How to change the name or path of the popup

If for any reason you cannot leave the folder name as herbalife-popup, or you have to 

put it in a location other than the top level of your hosting, then you will need to

amend the following sections of the pop-up files and include code:

6. In the code you include on your website:

<div id="herbalifepopup"></div>

<script type='text/javascript' src='/herbalife-popup/js-include.js'></script>

You need to update the '/herbalife-popup/' URL to the one matching your chosen

location.

[OpenThinking]

I understand but that is not possible. Shopify has a pre-defined directory structure and additional directories cannot be created. 

You've to upload those files in the assets folder and include them from there inside your theme.liquid file. You've to adapt the code to work with Shopify.

The "script" that was sent to you isn't made for Shopify, perhaps it was developed for some other system such as WordPress or other self-hosted alternatives.

[SimonL1]

Hi Ferrix,

I know it has been some years since this was asked, but I thought I would share my experience with this in case you still had issues or for anyone in the future.

You should have a file called "pop-up" within the original folder. You need to save this as a .txt file initially. Then you can open it up, change the [NAME OF MEMBER] and save the file as a .js.

You can then add this .js file to your "Assets" folders in shopify, then add the following snippet in your theme.liquid file just before the closing </body> tag:

<div id="herbalifepopup"></div>
{{ 'pop-up.js' | asset_url | script_tag }}

Hope this helps.

Regards,

Simon.