I want scrolling marquee text on my announcement bar. https://zephyrshop.org/
Here is what i want https://codepen.io/mark_sottek/pen/VwRERWE but i want it to keep going with more text that i have.
Thanks.
Also i want it step by step and where to put it
Hi @ZephyrShop
This is Richard from PageFly - Shopify Page Builder App
Please update this code to your announcement-bar.liquid to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: announcement-bar.liquid and replace all code with this
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
{%- if block.settings.message_one != blank -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
- {{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
- {{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
- {{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
- {{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
{%- endif -%}
{%- 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": "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 %}
After that, you can add the message in the theme customizer
Hope this can help you solve the issue
Best regards,
Richard | PageFly
oh no sorry its fine by the way can you reduce the padding and can you make it so i can put 5 messages?
You can do it for refresh theme:
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 %}
