Personalized checkout and custom promotions with Shopify Scripts
I currently have this cool marquee banner as the announcement bar for my store. However it has a couple of issues.
The first one is that on mobile it has a weird glitch where it will display properly on the initial load, but then after a couple of seconds or so it randomly increases the size of the text and renders incorrectly as you can see in the example below.
(Displaying correctly) 👇
1 second later (displaying incorrectly)
I've tried looking at the code, but I don't really know what I'm looking at here.
<style>
.custom-marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 35px;
overflow-x: hidden;
z-index: 100;
background:{{section.settings.colorBackground}};
color:{{section.settings.colorText}};
}
.custom-marquee a {
color:{{section.settings.colorText}};
}
.custom-marquee .track {
position: absolute;
bottom: 5px;
white-space: nowrap;
will-change: transform;
animation: marquee 11s linear infinite;
font-size: 1.3rem;
}
.custom-marquee .content {
margin-left: 40px;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-20%);
}
}
</style>
<div class="custom-marquee " role="region" {{ block.shopify_attributes }}>
{%- if section.settings.text != blank -%}
{%- if section.settings.link != blank -%}
<a href="{{ section.settings.link }}" class="">
{%- endif -%}
<div class="track ">
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
<span class="content marquee-text">{{ section.settings.text | escape }}</span>
{%- if section.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</div>
{%- if section.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
// console.log(marquees.item(i));
let str = marquees.item(i).innerHTML;
let improvedText = str.replaceAll("|", " ")
console.log(improvedText)
marquees.item(i).innerHTML = improvedText
}
</script>
{% schema %}
{
"name": "Marquee Announcement",
"settings": [
{
"type": "text",
"id": "text",
"default": "Black Friday Sale | Save up to 75% off storewide",
"label": "Add text to display"
},
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#B2FCE4"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#000"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
{% endschema %}
Thank you in advance for any help.
Hi Project_ATLAS, Can you provide your shop url? so I can inspect the elements and see the code that is responsible for the issue.
magicbrushco.com
Thank you.
I tried the website on different mobile screens, and the text is consistent, doesn't seem to have any issue.
Sorry, that was not the marquee banner, I have had to replace it with the standard one. But I have reactivated it now, please recheck it for me now.
(Also, if it doesn't happen right away, it can be intermittent, you might need to refresh sort of thing).
The text for it actually reads 'Black Friday Sale | Save up to 75% off' (as one line) but it is being broken up with the line removed as well.
I looked into it, it seems the reason why the text is broken is because this part of code
let improvedText = str.replaceAll("|", " ")
the code replaces (|) character with white space, that is why you don't see the character instead there are white space.
So there are alot of solutions here depending on what you need, do you need to display (|) character?
Yes I do. I think this is a line of code added by someone I hired to fix the other issue I mentioned, which worked for a while, but has since started breaking again.
I don't have the context of the whole code, but If the "|" characters are not causing any problems you can remove this line of code, and send me the result.
Okay thank you. I'm not sure what you mean by you don't have the context for the whole code though. I described the main issue above with images, and provided the entire code.
I mean there are many moving part of the whole website, you provided a snippet of code, there is maybe another snippet of code affect this one, or javascript function somewhere in a file affecting other files, that what I mean by context.
No, that's literally everything. That code is sitting in a .liquid file inside of the sections folder. There is no other code.
Also I remove the code you mentioned and that did fix that issue thank you.
There's just this problem with the banner randomly changing size for some reason, maybe it's the font size changing or? As you can see in the photos, it loads normally for a moment, and then breaks for some reason. I'm guessing it has something to do with the track and some kind of sizing issue, or, I don't really know.
Hi Project_ATLAS, are you still facing the text size problem, I looked into the website and it seems to work normally.
Hi Abdosamer, yes, it is still broken. Are you viewing the site on mobile? (The problem only occurs here)
Follow this latest code:
Create a new section marquee and paste below code.
You can add marquee section to any page.
<style>
.section-{{ section.id }}.custom-marquee {
display: flex;
align-items: center;
height: {{section.settings.marquee_height}}px;
width: 100vw;
max-width: 100%;
overflow-x: hidden;
background:{{section.settings.colorBackground}};
color:{{section.settings.colorText}};
}
.section-{{ section.id }}.custom-marquee a {
color:{{section.settings.colorText}};
text-decoration: none;
}
.section-{{ section.id }}.custom-marquee .track {
display: flex;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: marquee 12s linear infinite;
}
.section-{{ section.id }}.custom-marquee .content {
margin-left: 40px;
font-size: {{section.settings.font_size}}px;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-20%);
}
}
</style>
<div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
{%- if section.settings.link != blank -%}
<a href="{{ section.settings.link }}" class="">
{%- endif -%}
<div class="track ">
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- if section.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</div>
{%- if section.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{% schema %}
{
"name": "Marquee Text",
"settings": [
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#000"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#fff"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "range",
"id": "marquee_height",
"min": 24,
"max": 200,
"step": 2,
"default": 46,
"label": "Marquee height"
},
{
"type": "range",
"id": "font_size",
"min": 8,
"max": 100,
"step": 2,
"default": 24,
"label": "Font size"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"limit": 20,
"settings": [
{
"type": "text",
"id": "new_text",
"default": "Welcome to store",
"label": "Text"
}
]
}
],
"presets": [
{
"name": "Marquee",
"blocks": [
{
"type": "text"
},
{
"type": "text"
},
{
"type": "text"
}
]
}
]
}
{% endschema %}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024