need the grey announcement bar from this website

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user seeks code to replicate a grey announcement bar positioned below the header menu, similar to one on a reference website.

Solutions Offered:

  • Quick check: Verify if the theme already includes an announcement bar option in Customize > Header settings

  • Custom implementation: Create a new Liquid section file (announcement-bar-2.liquid) with provided HTML/CSS code that:

    • Displays a grey bar with customizable text
    • Includes styling for background color (#f5f5f5), padding, and border
    • Centers text at 14px font size

Implementation steps:

  1. Add the new section file in Theme Editor
  2. Insert {% section 'announcement-bar-2' %} after the header section in theme.liquid
  3. Customize text content through the theme customizer

The code includes a default French message about free shipping and returns, matching the user’s French-language website.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

i need the final code for the grey announcement bar that have this website, under the header menu:

https://oliviamoreau.de/

anyone can help me and give the final code? my website is juliettemarseille.fr

2

@matthewdropship please go to customize settings, header settings and check if you have an option for announcement bar and click on the checkbox

3

Hi @matthewdropship ,

Go to:

Online Store > Themes > Edit Code

Create a new section called announcement-bar-2.liquid

Use the following code:

{{ section.settings.text }}

.custom-announcement-bar { background-color: #f5f5f5; padding: 10px 0; border-bottom: 1px solid #ddd; } .announcement-text { font-size: 14px; color: #333; text-align: center; margin: 0; }

{% schema %}
{
“name”: “Announcement Bar 2”,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“label”: “Text”,
“default”: “Livraison gratuite dès 50€ d’achat | Retours sous 14 jours”
}
]
}
{% endschema %}

  1. Open theme.liquid:-
    After this line:

{% section ‘header’ %}
Add this:

{% section ‘announcement-bar-2’ %}

  1. Customize the text in Online Store > Customize

Please let me know if it works for you. \

Thanks !