1. Create a new section marquee and paste attached code
<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-right: 40px;
padding-left: 5px;
font-size: {{section.settings.font_size}}px;
}
.section-{{ section.id }}.custom-marquee svg {
fill: {{section.settings.colorText}};
}
@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 -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<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"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "none"
},
{
"value": "apple",
"label": "apple"
},
{
"value": "banana",
"label": "banana"
},
{
"value": "bottle",
"label": "bottle"
},
{
"value": "box",
"label": "box"
},
{
"value": "carrot",
"label": "carrot"
},
{
"value": "chat_bubble",
"label": "chat_bubble"
},
{
"value": "check_mark",
"label": "check_mark"
},
{
"value": "clipboard",
"label": "clipboard"
},
{
"value": "dairy",
"label": "dairy"
},
{
"value": "dairy_free",
"label": "dairy_free"
},
{
"value": "dryer",
"label": "dryer"
},
{
"value": "eye",
"label": "eye"
},
{
"value": "fire",
"label": "fire"
},
{
"value": "gluten_free",
"label": "gluten_free"
},
{
"value": "heart",
"label": "heart"
},
{
"value": "iron",
"label": "iron"
},
{
"value": "leaf",
"label": "leaf"
},
{
"value": "leather",
"label": "leather"
},
{
"value": "lightning_bolt",
"label": "lightning_bolt"
},
{
"value": "lipstick",
"label": "lipstick"
},
{
"value": "lock",
"label": "lock"
},
{
"value": "map_pin",
"label": "map_pin"
},
{
"value": "nut_free",
"label": "nut_free"
},
{
"value": "pants",
"label": "pants"
},
{
"value": "paw_print",
"label": "paw_print"
},
{
"value": "pepper",
"label": "pepper"
},
{
"value": "perfume",
"label": "perfume"
},
{
"value": "plane",
"label": "plane"
},
{
"value": "plant",
"label": "plant"
},
{
"value": "price_tag",
"label": "price_tag"
},
{
"value": "question_mark",
"label": "question_mark"
},
{
"value": "recycle",
"label": "recycle"
},
{
"value": "return",
"label": "return"
},
{
"value": "ruler",
"label": "ruler"
},
{
"value": "serving_dish",
"label": "serving_dish"
},
{
"value": "shirt",
"label": "shirt"
},
{
"value": "shoe",
"label": "shoe"
},
{
"value": "silhouette",
"label": "silhouette"
},
{
"value": "snowflake",
"label": "snowflake"
},
{
"value": "star",
"label": "star"
},
{
"value": "stopwatch",
"label": "stopwatch"
},
{
"value": "truck",
"label": "truck"
},
{
"value": "washing",
"label": "washing"
}
],
"default": "check_mark",
"label": "check_mark"
}
]
}
],
"presets": [
{
"name": "Marquee",
"blocks": [
{
"type": "text"
},
{
"type": "text"
},
{
"type": "text"
}
]
}
]
}
{% endschema %}2. If you want to put it on top above header then include section in the body tag at first:
{% section 'marquee' %}