evening,
my theme doesn’t support a marquee animated announcement bar. i’ve also had a look at numerous other discussion posts and attempted to add, delete or replace code in the announcement-bar.liquid file. none of them have worked, and work to avail.
my shopify url: https://lux-supply.com.au/
the theme is called uneox.
an example of what i want to exactly replicate 1:1 - https://goodhoodstore.com/
if possible, would i also able to incorporate more than one sentence/phrase in the announcement bar?
e.g. free shipping sale on now authenticity guarantee
regards,
luxsupply
Hi there,
The below code snippet might come in handy:
section#topbar .text-sm-center {
animation: leMove 5s infinite linear;
}
@keyframes leMove {
0% {
transform: translate(700px, 0)
}
50% {
transform: translate(0px, 0)
}
100% {
transform: translate(-700px, 0)
}
}
Adding it at the end of your theme.scss file would achieve the infinite loop.
Of course, further improvements such as adding multiple sentences/elements is doable, however, if you don’t have coding experience, I’d suggest to hire a developer.
Cheers!
Gabriel
Hii I have a solution for it. Will implement the same. If you want to will give you coding if you know how to implement it if not will implement it for you! Contact me if you want help Thank you!
@luxsupplyau
yes here Multi option marquee
Hi @Luxsupplyau
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
you can delete or leave the old code in {% comment%} {% endcomment %}
new code :
.hd-AnnouncementBar{max-height:40px;width:100vw;background-color:#000;overflow:hidden;transition:max-height .3s ease}.hd-Banner-fixed .hd-AnnouncementBar{max-height:0}.hd-AnnouncementBar_Ticker{display:flex;padding-top:6px;padding-bottom:7px;font-size:10px;font-weight:400;letter-spacing:.3px;line-height:12px;text-transform:uppercase;background-color:#000;color:#fff}@media only screen and (min-width: 768px){.hd-AnnouncementBar_Ticker{width:200vw}}.hd-AnnouncementBar_Items{flex:1 1 100%;display:flex;animation:Ticker var(--Animation_Duration, 15s) infinite linear}.hd-AnnouncementBar:hover .hd-AnnouncementBar_Items{animation-play-state:paused}.hd-AnnouncementBar_Item{align-items:center;flex:1 1 10%;display:flex;padding-right:50px;text-align:center}@media only screen and (min-width: 768px){.hd-AnnouncementBar_Item{padding-right:0}}.hd-AnnouncementBar_Text{white-space:nowrap;overflow:hidden}@keyframes Ticker{to{transform:translate(-100%)}}
Hope my solution works perfectly for you!
Best Regards;
PageFly
dear ketan,
thank you. i will have a look at the website!
dear pagefly,
thank you for your reply. it works great on after implementing it onto the website.
however, would it be possible to display the three bar items closer together? instead of the announcment text ticking or flashing, would it be possible to have just be an infinite scroll that goes off screen and back on screen?
hi neha, thanks for your response.
it would be greatly appreciaited if you could provide the code and the instructions on what to do with it.
kindest regards,
luxsupply
hey ketan,
the website link you sent that provided the coding for different marquee styles were not functioning properly on the website. would it be possible if you could provide the code and the instructions on what to do with it.
i implemented pagefly’s code, which displayed on the website. however, i would like to:
-
reduce the gapping in between the 3 announcement texts
-
disable the announcment text tickering - i would like it be an infinite scroll where it moves off screen and back on screen
keen to hear back.
luxsupply
Hey, was wondering if you could share the code to me too. Thank you
Follow this latest video:
Create a new section marquee and paste below code.
You can add marquee section to any page.
{%- if section.settings.link != blank -%}
{%- endif -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- for block in section.blocks -%}
{{ block.settings.new_text | escape }}
{%- endfor -%}
{%- if section.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
{%- if section.settings.link != blank -%}
{%- endif -%}
{% 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 %}
Thank you very very much it works. Thanks
