Shopify themes, liquid, logos, and UX
So I added marquee text but now there is an odd space when the marquee text starts at the beginning again.
Also I want there to be a bigger space at the end and start of each separate message because it seems to be all squished.
And I want it to be slowed down a little bit.
Last thing can someone show me how to change what I have just said, on my own, just in case i don't like the results.
MY STORE IS: https://zephyrshop.org/
Here is the code which someone gave me for the marquee text.
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- if block.settings.message_one != blank -%}
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<div class="page-width marquee enable-animation marquee--hover-pause">
<ul style="list-style: none" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_three | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_four | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_five | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>
<ul style="list-style: none" aria-hidden="true" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_three| escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_four | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_five | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>
</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "message_one",
"default": "Message one",
"label": "Announcement one"
},
{
"type": "text",
"id": "message_two",
"default": "Message two",
"label": "Announcement two"
},
{
"type": "text",
"id": "message_three",
"default": "Message three",
"label": "Announcement three"
},
{
"type": "text",
"id": "message_four",
"default": "Message four",
"label": "Announcement four"
},
{
"type": "text",
"id": "message_five",
"default": "Message five",
"label": "Announcement five"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "accent-1"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}
<style>
.marquee {
--gap: 1rem;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@media (prefers-reduced-motion: reduce) {
.marquee__content {
animation-play-state: paused !important;
}
}
/* Enable animation */
.enable-animation .marquee__content {
animation: scroll 20s linear infinite;
}
/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
animation-play-state: paused;
}
.marquee--fit-content {
max-width: fit-content;
}
.marquee--pos-absolute .marquee__content:last-child {
position: absolute;
top: 0;
left: 0;
}
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
animation-name: scroll-abs;
}
@keyframes scroll-abs {
from {
transform: translateX(calc(100% + var(--gap)));
}
to {
transform: translateX(0);
}
}
ul.marquee__content {
margin: 0;
}
</style>
Hi @ZephyrShop
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
.enable-animation .marquee__content {
animation: scroll 60s linear infinite!important;
gap: 8rem!important;
}
</style>
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Your Old Code On Add This New Full Code
<style>
.marquee {
--gap: 5rem;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@media (prefers-reduced-motion: reduce) {
.marquee__content {
animation-play-state: paused !important;
}
}
/* Enable animation */
.enable-animation .marquee__content {
animation: scroll 60s linear infinite;
}
/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
animation-play-state: paused;
}
.marquee--fit-content {
max-width: fit-content;
}
.marquee--pos-absolute .marquee__content:last-child {
position: absolute;
top: 0;
left: 0;
}
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
animation-name: scroll-abs;
}
@keyframes scroll-abs {
from {
transform: translateX(calc(100% + var(--gap)));
}
to {
transform: translateX(0);
}
}
ul.marquee__content {
margin: 0;
}
</style>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div
class="announcement-bar color-{{ block.settings.color_scheme }} gradient"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if block.settings.message_one != blank -%}
{%- if block.settings.link != blank -%}
<a
href="{{ block.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<div class="page-width marquee enable-animation marquee--hover-pause">
<ul style="list-style: none" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_three | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_four | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_five | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>
<ul style="list-style: none" aria-hidden="true" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_three | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_four | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_five | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>
</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "message_one",
"default": "Message one",
"label": "Announcement one"
},
{
"type": "text",
"id": "message_two",
"default": "Message two",
"label": "Announcement two"
},
{
"type": "text",
"id": "message_three",
"default": "Message three",
"label": "Announcement three"
},
{
"type": "text",
"id": "message_four",
"default": "Message four",
"label": "Announcement four"
},
{
"type": "text",
"id": "message_five",
"default": "Message five",
"label": "Announcement five"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "accent-1"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Contect On My Mail :-Mail@gmail.com
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024