Can I replace the announcement bar with an image on WareHouse theme?

Technical Q&A
1

hello guys, I was wanting to put a picture in place of the annoucement bar, is it possible?

Theme: WareHouse

lojazotus.com.br

2

@Zotus

yes, its possible please share your announcement bar code so i will check update code

3

Morning Ketan, here is the code of annoucement bar:

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

{%- if section.settings.show_newsletter -%}
{% 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 %}

previously i used this:

but on mobile i got a transparent line below so I gave up, it was a much smaller code but it didn’t work :disappointed_face: and thank you right away, Ketan!

4

hello emmy, is I had some problems with the bar annoucement because I try to make the store less like “shopify” possible.

5

Thank you for sharing your question with our network, @Zotus .

Also a very big thank you to our partner, @KetanKumar , for always providing efficient and effective code advice for our community members.

I wanted to proactively reach out and ensure you’re able to sort through this question, and offer additional support if anything else comes up.

Warm regards,