Shopify themes, liquid, logos, and UX
Trying to code a custom liquid section on shopify where it displays messages that scroll every 7 seconds and the user can click < > to go left and right on the messages. The desktop version works nicely. The mobile version doesn't
IMAGE1: Desktop version, scrolls every 7 seconds and arrows work
IMAGE2: Mobile version, arrows don't let me click them and the message is stuck and doesn't scroll
The mobile version doesnt scroll at all and the < > buttons don't work.
Anyone know why from this code?
Mobile Code Version:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Announcement Bar</title> <style> /* Basic Styles for Announcement Bar */ .announcement-bar-container { width: 50%; /* Adjust the width to make the box smaller */ background-color: #000000; color: white; text-align: center; padding: 10px 0; position: relative; overflow: hidden; margin: 0 auto; /* Center the container */ } .announcement-bar-wrapper { display: flex; justify-content: center; align-items: center; font-size: 16px; /* Default font size */ } .announcement-text { display: flex; white-space: nowrap; transition: transform 0.5s ease-in-out; flex-direction: column; /* Allow the text to stack vertically */ } .announcement-text-item { display: none; /* Hide all items by default */ padding: 0 15px; min-width: 100%; text-align: center; } .announcement-arrows { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0; /* Remove extra padding */ left: 0; /* Ensure arrows touch the ends */ } .prev-arrow, .next-arrow { font-size: 20px; cursor: pointer; } /* Show the first item */ .announcement-text-item:first-child { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .mobile-announcement-bar-container { width: 90% !important; /* Adjust width to 90% on mobile */ } .mobile-announcement-bar-wrapper { font-size: 12px !important; /* Set font size to be larger on mobile */ } .mobile-announcement-text { flex-direction: column; /* Ensure text is stacked vertically */ } .mobile-announcement-text-item { padding: 5px 0; /* Reduce padding to fit better on mobile */ font-size: 14px; /* Increase the font size of text items on mobile */ display: block; /* Ensure the items are block-level for stacking */ } } </style> </head> <body> <div class="announcement-bar-container mobile-announcement-bar-container"> <div class="announcement-bar-wrapper mobile-announcement-bar-wrapper"> <div class="announcement-text mobile-announcement-text"> <span class="announcement-text-item mobile-announcement-text-item"> <strong>Shop Deals <span style="color: red;">50% OFF</span> Today! - <a href="https://extremekool.com/collections/deals">Shop Now</a> </strong> </span> <span class="announcement-text-item mobile-announcement-text-item"> <strong>Shop Gift Cards today! 🎁❤️😀 - <a href="https://extremekool.com/collections/gift-cards">Shop Now</a> </strong> </span> <span class="announcement-text-item mobile-announcement-text-item"> <strong>Sports & Outdoors! 🎣⛳🏞️ - <a href="https://extremekool.com/collections/sports-outdoors">Shop Now</a> </strong> </span> <span class="announcement-text-item mobile-announcement-text-item"> <strong>Find Your Inner Cool. 😎 - <a href="https://extremekool.com/collections/cool">Shop Now</a> </strong> </span> </div> </div> <div class="announcement-arrows"> <span class="prev-arrow"><</span> <span class="next-arrow">></span> </div> </div> <script> let currentIndex = 0; const items = document.querySelectorAll('.announcement-text-item'); const totalItems = items.length; function showNextItem() { items[currentIndex].style.display = 'none'; // Hide the current item currentIndex = (currentIndex + 1) % totalItems; // Move to next item items[currentIndex].style.display = 'block'; // Show the new item } function showPrevItem() { items[currentIndex].style.display = 'none'; // Hide the current item currentIndex = (currentIndex - 1 + totalItems) % totalItems; // Move to previous item items[currentIndex].style.display = 'block'; // Show the new item } // Automatically scroll every 7 seconds setInterval(showNextItem, 7000); // Handle manual scrolling with arrows document.querySelector('.next-arrow').addEventListener('click', showNextItem); document.querySelector('.prev-arrow').addEventListener('click', showPrevItem); </script> </body> </html>
Desktop Code: (works - scrolls every 7 seconds and arrows go left and right)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Announcement Bar</title> <style> /* Basic Styles for Announcement Bar */ .announcement-bar-container { width: 50%; /* Adjust the width to make the box smaller */ background-color: #000000; color: white; text-align: center; padding: 10px 0; position: relative; overflow: hidden; margin: 0 auto; /* Center the container */ } .announcement-bar-wrapper { display: flex; justify-content: center; align-items: center; font-size: 16px; /* Default font size */ } .announcement-text { display: flex; white-space: nowrap; transition: transform 0.5s ease-in-out; flex-direction: column; /* Allow the text to stack vertically */ } .announcement-text-item { display: inline-block; padding: 0 15px; min-width: 100%; text-align: center; } .announcement-arrows { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0; /* Remove extra padding */ left: 0; /* Ensure arrows touch the ends */ } .prev-arrow, .next-arrow { font-size: 20px; cursor: pointer; } /* Hide all items except the first one */ .announcement-text-item:not(:first-child) { display: none; } /* Custom Section Padding */ .section-sections--23794238390554__custom_liquid_ngFqp9-padding { padding-top: 0px; padding-bottom: 0px; background-color: black; } /* Make all Shop Now links white and underlined, and ensure they are clickable */ .announcement-text-item a { color: white !important; text-decoration: underline !important; cursor: pointer; /* Make sure the cursor is a pointer */ z-index: 1; /* Ensure link is on top of any overlapping elements */ position: relative; /* Allow z-index to work properly */ } /* Mobile Styles */ @media (max-width: 768px) { .announcement-bar-container { width: 90% !important; /* Adjust width to 90% on mobile */ } .announcement-bar-wrapper { font-size: 12px !important; /* Set font size to be larger on mobile */ } .announcement-text { flex-direction: column; /* Ensure text is stacked vertically */ } .announcement-text-item { padding: 5px 0; /* Reduce padding to fit better on mobile */ font-size: 14px; /* Increase the font size of text items on mobile */ } } </style> </head> <body> <div class="announcement-bar-container"> <div class="announcement-bar-wrapper"> <div class="announcement-text"> <span class="announcement-text-item"> <strong>Discover unbeatable deals and exclusive offers, <span style="color: red;">Up to 50% OFF!</span> - <a href="https://extremekool.com/collections/deals">Shop Now</a> </strong> </span> <span class="announcement-text-item"> <strong>Give the gift of choice — Shop Gift Cards today! 🎁❤️😀 - <a href="https://extremekool.com/collections/gift-cards">Shop Now</a> </strong> </span> <span class="announcement-text-item"> <strong>Explore Sports & Outdoors! 🎣⛳🏞️ Fishing, Golf, Snowboarding & More! - <a href="https://extremekool.com/collections/sports-outdoors">Shop Now</a> </strong> </span> <span class="announcement-text-item"> <strong>Find Your Inner Cool. 😎 - <a href="https://extremekool.com/collections/cool">Shop Now</a> </strong> </span> </div> </div> <div class="announcement-arrows"> <span class="prev-arrow"><</span> <span class="next-arrow">></span> </div> </div> <script> let currentIndex = 0; const items = document.querySelectorAll('.announcement-text-item'); const totalItems = items.length; function showNextItem() { items[currentIndex].style.display = 'none'; // Hide the current item currentIndex = (currentIndex + 1) % totalItems; // Move to next item items[currentIndex].style.display = 'inline-block'; // Show the new item } function showPrevItem() { items[currentIndex].style.display = 'none'; // Hide the current item currentIndex = (currentIndex - 1 + totalItems) % totalItems; // Move to previous item items[currentIndex].style.display = 'inline-block'; // Show the new item } // Automatically scroll every 7 seconds setInterval(showNextItem, 7000); // Handle manual scrolling with arrows document.querySelector('.next-arrow').addEventListener('click', showNextItem); document.querySelector('.prev-arrow').addEventListener('click', showPrevItem); </script> </body> </html>
Solved! Go to the solution
This is an accepted solution.
@Brian-A - check this error selected, (3rd from last), it says currentIndex already declared, that can be an issue.. I recommend chagne this variable name in mobile version to some other unique name , say currentIndex_mobile , clear cache and check
@Brian-A - can you share this page link where you have this bar?
thanks for reply.
if you want to look i can give you Collab code.
Theres two different liquids.
One for mobile & one on desktop view.
@Brian-A need to check if it is a javascript issue, need browser link for it
This is an accepted solution.
@Brian-A - check this error selected, (3rd from last), it says currentIndex already declared, that can be an issue.. I recommend chagne this variable name in mobile version to some other unique name , say currentIndex_mobile , clear cache and check
beautiful works!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025