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
2 Likes
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!
1 Like
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
Hello,
It seems that you need more than one sentence or phrase, and none of the codes you have tried have worked well for this task. However, I have a solution for you. You can create a marquee similar to the one on https://goodhoodstore.com by using the Fab Infinite Marquee App. This app, available on Shopify’s app store https://apps.shopify.com/infinite-marquee, provides the necessary settings to create a marquee with the same style as the one in your example. You can choose a background color, adjust the size, set the distance between sentences, and even add icons if desired.
In the video you can check the result (marquee above the header):
I hope it is helpful to you,
Cheers!
Eugene
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
