All things Shopify and commerce
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.
Solved! Go to the solution
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.
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:
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.
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.
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.
Is it also possible to make the button fade out instead of just disappearing after scrolling?
Also I only want it to appear on the home page.
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.
I like how it is now. But instead of it just disappearing instantly a fade-out animation would look nicer.
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.
how to set it just to repeat once?
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
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024