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

Solved

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

MikeyAcr
Tourist
24 0 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.

Accepted Solution (1)
DevDynamo
Shopify Partner
42 11 5

This is an accepted solution.

Hey @MikeyAcr ,

 

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

{% if template == 'index' %}
<div class="scroll-down-block">
	<style>
		#scroll-down-popup {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			align-items: center;
			cursor: pointer;
			transition: opacity 0.7s linear;
			animation: pulse-animation 3s infinite;
			z-index: 999;
		}

		.scroll-down-text {
			font-size: 16px;
		}

		@keyframes pulse-animation {
			0% {
				box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
			}
			100% {
				box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
			}
		}
	</style>

	<div id="scroll-down-popup" style="display: none;">
		<span class="scroll-down-text">🡇</span>
	</div>

	<script>
		setTimeout(function () {
			var scrollDownPopup = document.getElementById('scroll-down-popup');
			scrollDownPopup.style.display = 'flex';

			window.addEventListener('scroll', function() {
				if (window.scrollY >= 300) {
					scrollDownPopup.style.opacity = '0';
				}
			});
		}, 2000);
	</script>
</div>
{% endif %}

 

Thank You.

 

- Helpful response? Please give it a Thumbs Up!
- Solved your query? Mark it as an Accepted Solution!
- Level up your Shopify game - Subscribe to 'Shopify Insight' for exclusive insights today!

View solution in original post

Replies 10 (10)

DevDynamo
Shopify Partner
42 11 5

Hi @MikeyAcr ,

 

Please add the below-provided code just before </body> to your 'theme.liquid' template file.

 

<div class="scroll-down-block">
	<style>
		#scroll-down-popup {
			position: fixed;
			bottom: 20px;
			right: 20px;
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			align-items: center;
			cursor: pointer;
			transition: opacity 0.5s ease;
			z-index: 999;
		}

		.scroll-down-text {
			font-size: 16px;
		}
	</style>

	<div id="scroll-down-popup" style="display: none;">
		<span class="scroll-down-text">🡇</span>
	</div>

	<script>
		setTimeout(function () {
			var scrollDownPopup = document.getElementById('scroll-down-popup');
			scrollDownPopup.style.display = 'flex';

			window.addEventListener('scroll', function() {
				if (window.scrollY >= 300) {
					scrollDownPopup.style.display = 'none';
				}
			});
		}, 2000);
	</script>
</div>

 

 

 

STEPS:

  1. Go to Online store > Themes > Edit code.
    DevDynamo_0-1708332500152.png

     

  2. Edit theme.liquid.
    DevDynamo_1-1708332531182.png

     

  3. Place the above-provided code just before </body>.
    DevDynamo_2-1708332611184.png

 

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.

- Helpful response? Please give it a Thumbs Up!
- Solved your query? Mark it as an Accepted Solution!
- Level up your Shopify game - Subscribe to 'Shopify Insight' for exclusive insights today!
MikeyAcr
Tourist
24 0 1

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.

DevDynamo
Shopify Partner
42 11 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.

<div class="scroll-down-block">
	<style>
		#scroll-down-popup {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			align-items: center;
			cursor: pointer;
			transition: opacity 0.5s ease;
			animation: pulse-animation 2s infinite;
			z-index: 999;
		}

		.scroll-down-text {
			font-size: 16px;
		}

		@keyframes pulse-animation {
			0% {
				box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
			}
			100% {
				box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
			}
		}
	</style>

	<div id="scroll-down-popup" style="display: none;">
		<span class="scroll-down-text">🡇</span>
	</div>

	<script>
		setTimeout(function () {
			var scrollDownPopup = document.getElementById('scroll-down-popup');
			scrollDownPopup.style.display = 'flex';

			window.addEventListener('scroll', function() {
				if (window.scrollY >= 300) {
					scrollDownPopup.style.display = 'none';
				}
			});
		}, 2000);
	</script>
</div>

 

Thank You.

- Helpful response? Please give it a Thumbs Up!
- Solved your query? Mark it as an Accepted Solution!
- Level up your Shopify game - Subscribe to 'Shopify Insight' for exclusive insights today!
MikeyAcr
Tourist
24 0 1

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

MikeyAcr
Tourist
24 0 1

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

DevDynamo
Shopify Partner
42 11 5

Hi @MikeyAcr ,

 

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

{% if template == 'index' %}
<div class="scroll-down-block">
	<style>
		#scroll-down-popup {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			align-items: center;
			cursor: pointer;
			transition: opacity 0.5s ease;
			animation: pulse-animation 2s infinite;
			z-index: 999;
		}

		.scroll-down-text {
			font-size: 16px;
		}

		@keyframes pulse-animation {
			0% {
				box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
			}
			100% {
				box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
			}
		}
	</style>

	<div id="scroll-down-popup" style="display: none;">
		<span class="scroll-down-text">🡇</span>
	</div>

	<script>
		setTimeout(function () {
			var scrollDownPopup = document.getElementById('scroll-down-popup');
			scrollDownPopup.style.display = 'flex';

			window.addEventListener('scroll', function() {
				if (window.scrollY >= 300) {
					scrollDownPopup.style.display = 'none';
				}
			});
		}, 2000);
	</script>
</div>
{% 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.

- Helpful response? Please give it a Thumbs Up!
- Solved your query? Mark it as an Accepted Solution!
- Level up your Shopify game - Subscribe to 'Shopify Insight' for exclusive insights today!
MikeyAcr
Tourist
24 0 1

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

DevDynamo
Shopify Partner
42 11 5

This is an accepted solution.

Hey @MikeyAcr ,

 

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

{% if template == 'index' %}
<div class="scroll-down-block">
	<style>
		#scroll-down-popup {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			align-items: center;
			cursor: pointer;
			transition: opacity 0.7s linear;
			animation: pulse-animation 3s infinite;
			z-index: 999;
		}

		.scroll-down-text {
			font-size: 16px;
		}

		@keyframes pulse-animation {
			0% {
				box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
			}
			100% {
				box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
			}
		}
	</style>

	<div id="scroll-down-popup" style="display: none;">
		<span class="scroll-down-text">🡇</span>
	</div>

	<script>
		setTimeout(function () {
			var scrollDownPopup = document.getElementById('scroll-down-popup');
			scrollDownPopup.style.display = 'flex';

			window.addEventListener('scroll', function() {
				if (window.scrollY >= 300) {
					scrollDownPopup.style.opacity = '0';
				}
			});
		}, 2000);
	</script>
</div>
{% endif %}

 

Thank You.

 

- Helpful response? Please give it a Thumbs Up!
- Solved your query? Mark it as an Accepted Solution!
- Level up your Shopify game - Subscribe to 'Shopify Insight' for exclusive insights today!
minton
Visitor
1 0 0

how to set it just to repeat once?

SofiiaAst
Shopify Partner
49 1 2

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

Sofiia Astanina, Shopify app developer
Try SA SEO JSON‑LD Schema markup from Shopify app store