How can I add a scroll down popup to my website?

Shopify Discussion
1

Hello, I would like to add a popup that appears maybe 2 seconds after the page is loaded. The popup just needs to be a small icon showing an arrow to scroll down. This is because when you load my website it doesn’t look loaded unless you scroll. I want something to tell people to scroll down.

2

Hi @MikeyAcr ,

Please add the below-provided code just before to your ‘theme.liquid’ template file.


	

	
		?

STEPS:

  1. Go to Online store > Themes > Edit code.

    DevDynamo_0-1708332500152.png
    DevDynamo_0-1708332500152.png307×314 11 KB

  2. Edit theme.liquid.

    DevDynamo_1-1708332531182.png
    DevDynamo_1-1708332531182.png278×340 10.7 KB

  3. Place the above-provided code just before .

    DevDynamo_2-1708332611184.png
    DevDynamo_2-1708332611184.png972×139 2.48 KB

FYI: I have just added the down arrow with a simple button design. Also, to make it more user-friendly, I have hidden the button once the user scrolls down 300px window height.

Please feel free to provide more details regarding your requirements so that I can recommend the best possible solution.

Thank You.

3

Hi! Could you please share a link to your site?

Maybe some apps could help you to solve the problem. For example, in this app: https://apps.shopify.com/elegant-preloader you can set the number of seconds the popup must be shown (1s, 2s, or 4s), add your icon and many other settings, such as background or opacity

4

I want the button placed just above the centre of the screen.How can I also make the button responsive so that on mobile its in the same position. Is it also possible to have the button pulse slightly.

5

Hey @MikeyAcr ,

Please add the below-provided code to place the button at the bottom-center of the screen with a slight pulse animation. This also works for responsive devices.


	

	
		?

Thank You.

6

Is it also possible to make the button fade out instead of just disappearing after scrolling?

7

Also I only want it to appear on the home page.

8

Hi @MikeyAcr ,

Here is the code below to make the scroll-down popup button appear only on the homepage:

{% if template == 'index' %}

	

	
		?
	

	

{% endif %}

Regarding the fadeout animation for the button, are you looking into making the button visible and hidden as per the scroll depth? Or, could you please clarify more on this?

Thank You.

9

I like how it is now. But instead of it just disappearing instantly a fade-out animation would look nicer.

10

Hey @MikeyAcr ,

Here is the final code including the fade-out button animation:

{% if template == 'index' %}

	

	
		?
	

	

{% endif %}

Thank You.

11

how to set it just to repeat once?

12

Hi Mikey,

Our app can be used for this. Popup for Conversions by Vector. Once you’ve designed the popup. Go to the next step for Popup Rules, and set Enable Timer to “2”. This means popup is going be displayed after 2 seconds.

image
image1173×439 10.4 KB

In the design phase of it, you can even add an image of your choice for ‘downward arrow’. Hope this helps!

Best
Ayesha
Popup for Conversions by Vector

13

Hi @MikeyAcr,

Please send the website link, I will check it for you