Pop up banner - JavaScript

Ferrix
New Member
3 0 0

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

0 Likes

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.

⚡️ Get our [Shopify Themes]: Lightning-fast, Eye-catching, Highly converting, SEO-optimized, Minimal.
⚡️ Struggling with CODE? Need a developer to help you with your theme modifications? [Get a free quote]
0 Likes
Ferrix
New Member
3 0 0

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

0 Likes

Online store > Themes > Actions > Edit code

Screenshot 2021-03-08 at 20.55.44.png

Screenshot 2021-03-08 at 20.56.01.png

⚡️ Get our [Shopify Themes]: Lightning-fast, Eye-catching, Highly converting, SEO-optimized, Minimal.
⚡️ Struggling with CODE? Need a developer to help you with your theme modifications? [Get a free quote]
0 Likes
Ferrix
New Member
3 0 0

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.

 

0 Likes

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.

⚡️ Get our [Shopify Themes]: Lightning-fast, Eye-catching, Highly converting, SEO-optimized, Minimal.
⚡️ Struggling with CODE? Need a developer to help you with your theme modifications? [Get a free quote]
0 Likes