How can I add movement to my top advertising bar?

Store Design
1

Hello, I want my top advertising bar to have movement

example pages:

https://codepen.io/yochans/pen/geLNgV

or

https://the-every.com/

1 Like
2

Hi @FelipeSubli ,

You can try use tag:

Ex: Content you want animation

Hope it can help you.

3

Where do I enter that tag, what file?

1 Like
4

Hi @FelipeSubli ,

Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.

1 Like
5

Url:

subliphone.cl

Password: r6598

Thanks

6

Please add tag in admin/themes/section/announcement-bar.liquid file.

Thank you.

2 Likes
7

{%- if section.settings.show_announcement -%}
{%- capture section_settings -%}
{
“showNewsletter”: {{ section.settings.show_newsletter | json }}
}
{%- endcapture -%}

{%- if section.settings.show_newsletter -%}
{{ 'general.accessibility.close' | t }} {%- render 'icon', icon: 'close' -%}
{%- if section.settings.newsletter_title != blank -%}

{{ section.settings.newsletter_title | escape }}

{%- endif -%}

{%- if section.settings.newsletter_content != blank -%}

{{ section.settings.newsletter_content }}
{%- endif -%}

{%- assign newsletter_id = ‘newsletter-’ | append: section.id -%}

{%- form 'customer', id: newsletter_id, class: 'form newsletter__form' -%} {%- if form.posted_successfully? -%}

{{ 'home_page.newsletter.success' | t }}

{%- if form.context == 'announcement-bar' -%} {%- assign open_announcement = true -%} {%- endif -%} {%- else -%} {%- if form.errors -%}

{{ form.errors.messages['email'] }}

{%- endif -%}
{{ 'home_page.newsletter.input' | t }}

{{ ‘home_page.newsletter.submit’ | t }}

{%- endif -%} {%- endform -%}
{%- endif -%}
{%- if section.settings.link != blank -%} {{ section.settings.text | escape }} {%- else -%}

{{ section.settings.text | escape }}

{%- endif -%}

{%- if section.settings.show_newsletter -%}

{%- render ‘icon’, icon: ‘newsletter’ -%}
{{- section.settings.newsletter_button | escape -}}

{%- endif -%}

.announcement-bar { background: {{ section.settings.background }}; color: {{ section.settings.text_color }}; }

{%- endif -%}

{% schema %}
{
“name”: “Announcement bar”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_announcement”,
“label”: “Show announcement”,
“default”: true
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “#1e2d7d”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#ffffff”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”,
“default”: “Announce something here”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “Text position”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
],
“default”: “left”,
“info”: “Text is always centered on mobile.”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Newsletter”
},
{
“type”: “paragraph”,
“content”: “Customers who subscribe will have their email address added to the "accepts marketing" customer list.”
},
{
“type”: “paragraph”,
“content”: “Only visible on desktop.”
},
{
“type”: “checkbox”,
“id”: “show_newsletter”,
“label”: “Show sign up form”,
“default”: true
},
{
“type”: “text”,
“id”: “newsletter_button”,
“label”: “Open button”,
“default”: “Subscribe & Save”
},
{
“type”: “text”,
“id”: “newsletter_title”,
“label”: “Heading”,
“default”: “Newsletter”
},
{
“type”: “richtext”,
“id”: “newsletter_content”,
“label”: “Text”,
“default”: “

A short sentence describing what someone will receive by subscribing

”
}
]
}
{% endschema %}

8

where do i put the label

1 Like
9

Hi @FelipeSubli ,

Thanks you for reply

You can try replace your code to below code:

{%- if section.settings.show_announcement -%}
{%- capture section_settings -%}
{
"showNewsletter": {{ section.settings.show_newsletter | json }}
}
{%- endcapture -%}

{%- endif -%}

{% schema %}
{
"name": "Announcement bar",
"settings": [
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": true
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "#1e2d7d"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Announce something here"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
],
"default": "left",
"info": "Text is always centered on mobile."
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "header",
"content": "Newsletter"
},
{
"type": "paragraph",
"content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "paragraph",
"content": "Only visible on desktop."
},
{
"type": "checkbox",
"id": "show_newsletter",
"label": "Show sign up form",
"default": true
},
{
"type": "text",
"id": "newsletter_button",
"label": "Open button",
"default": "Subscribe & Save"
},
{
"type": "text",
"id": "newsletter_title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "newsletter_content",
"label": "Text",
"default": "

A short sentence describing what someone will receive by subscribing

"
}
]
}
{% endschema %}

Hope it can help you.

1 Like
10

Hi, did you figure it out?
I’m trying and seems like that code is defective.