Change background color on each message in announcement bar (Prestige Theme)

Store Design

Topic summary

A user is attempting to customize the announcement bar in Shopify’s Prestige theme to set individual background colors for each message, rather than using predefined color schemes.

Initial Problem:

  • The user wants to define background colors per message using hex codes
  • Currently can only select from color scheme options, not direct hex values

Attempted Solutions:

  • First suggestion was to remove .id from block.settings.background_color in the style attribute
  • This approach didn’t work—still only showed markup, not actual hex codes

Current Status:

  • A contributor offered modified code that adds color options for each block
  • However, the user clarified they want direct hex color input, not color scheme selection
  • The discussion remains unresolved
  • Latest response offers to send a collaborator invitation to debug the issue directly

Technical Context:

  • Involves editing Liquid template code for the announcement bar section
  • Requires modifying both the rendering logic and schema settings
Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

How can I define the background image on each message in the announcement bar?

This is the original code:

{%- if section.blocks.size > 0 -%}
  <style>
    :root {
      --announcement-bar-is-sticky: {% if section.settings.enable_sticky %}1{% else %}0{% endif %};

      {%- if section.index == 1 and section.settings.enable_sticky == false -%}
        --header-scroll-tracker-offset: var(--announcement-bar-height);
      {%- endif -%}
    }

    {%- if section.settings.enable_sticky -%}
      #shopify-section-{{ section.id }} {
        position: sticky;
        top: 0;
        z-index: 5;
      }

      .shopify-section--header ~ #shopify-section-{{ section.id }} {
        top: calc(var(--header-is-sticky, 0) * var(--header-height, 0px));
        z-index: 4; /* We have to lower the z-index in case the announcement bar is displayed after the header */
      }
    {%- endif -%}

    #shopify-section-{{ section.id }} {
      --announcement-bar-font-size: {{ section.settings.mobile_font_size | divided_by: 16.0 }}rem;
    }

    @media screen and (min-width: 999px) {
      #shopify-section-{{ section.id }} {
        --announcement-bar-font-size: {{ section.settings.desktop_font_size | divided_by: 16.0 }}rem;
      }
    }
  </style>

  <height-observer variable="announcement-bar">
    <div class="announcement-bar color-scheme color-scheme--{{ section.settings.color_scheme.id }}">
      {%- assign carousel_id = 'carousel-' | append: section.id -%}

      {%- if section.blocks.size > 1 -%}
        <button type="button" is="carousel-prev-button" class="tap-area" aria-controls="{{ carousel_id }}">
          <span class="sr-only">{{ 'general.accessibility.previous' | t }}</span>
          {%- render 'icon' with 'arrow-left', width: 12, direction_aware: true -%}
        </button>
      {%- endif -%}

      <announcement-bar-carousel allow-swipe {% if section.settings.autoplay %}autoplay="{{ section.settings.cycle_speed }}"{% endif %} id="{{ carousel_id }}" class="announcement-bar__carousel">
        {%- for block in section.blocks -%}
          <p class="prose heading {% if forloop.first %}is-selected{% endif %}" {{ block.shopify_attributes }}>{{- block.settings.text -}}</p>
        {%- endfor -%}
      </announcement-bar-carousel>

      {%- if section.blocks.size > 1 -%}
        <button type="button" is="carousel-next-button" class="tap-area" aria-controls="{{ carousel_id }}">
          <span class="sr-only">{{ 'general.accessibility.next' | t }}</span>
          {%- render 'icon' with 'arrow-right', width: 12, direction_aware: true -%}
        </button>
      {%- endif -%}
    </div>
  </height-observer>

  <script>
    document.documentElement.style.setProperty('--announcement-bar-height', `${document.getElementById('shopify-section-{{ section.id }}').clientHeight.toFixed(2)}px`);
  </script>
{%- endif -%}

{% schema %}
{
  "name": "t:sections.announcement_bar.name",
  "class": "shopify-section--announcement-bar",
  "tag": "aside",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "message",
      "name": "t:sections.announcement_bar.blocks.message.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "label": "t:sections.announcement_bar.blocks.message.text",
          "default": "Announce something here"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:global.colors.scheme",
      "default": "scheme-3"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky",
      "label": "t:sections.announcement_bar.enable_sticky_bar"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.announcement_bar.auto_rotate_between_messages",
      "default": true
    },
    {
      "type": "range",
      "id": "cycle_speed",
      "min": 2,
      "max": 20,
      "step": 1,
      "unit": "sec",
      "label": "t:sections.announcement_bar.cycle_speed",
      "default": 5
    },
    {
      "type": "range",
      "id": "desktop_font_size",
      "min": 9,
      "max": 15,
      "unit": "px",
      "label": "t:sections.announcement_bar.desktop_text_size",
      "default": 11
    },
    {
      "type": "range",
      "id": "mobile_font_size",
      "min": 9,
      "max": 15,
      "unit": "px",
      "label": "t:sections.announcement_bar.mobile_text_size",
      "default": 10
    }
  ]
}
{% endschema %}

I changed it to this but it wont display the background hex:

{%- if section.blocks.size > 0 -%}
  <style>
    :root {
      --announcement-bar-is-sticky: {% if section.settings.enable_sticky %}1{% else %}0{% endif %};

      {%- if section.index == 1 and section.settings.enable_sticky == false -%}
        --header-scroll-tracker-offset: var(--announcement-bar-height);
      {%- endif -%}
    }

    {%- if section.settings.enable_sticky -%}
      #shopify-section-{{ section.id }} {
        position: sticky;
        top: 0;
        z-index: 5;
      }

      .shopify-section--header ~ #shopify-section-{{ section.id }} {
        top: calc(var(--header-is-sticky, 0) * var(--header-height, 0px));
        z-index: 4; /* We have to lower the z-index in case the announcement bar is displayed after the header */
      }
    {%- endif -%}

    #shopify-section-{{ section.id }} {
      --announcement-bar-font-size: {{ section.settings.mobile_font_size | divided_by: 16.0 }}rem;
    }

    @media screen and (min-width: 999px) {
      #shopify-section-{{ section.id }} {
        --announcement-bar-font-size: {{ section.settings.desktop_font_size | divided_by: 16.0 }}rem;
      }
    }
  </style>

  <height-observer variable="announcement-bar">
    <div class="announcement-bar" style="background-color: {{ block.settings.background_color.id }} !important;" id="announcement-bar-{{ section.id }}">
      {%- assign carousel_id = 'carousel-' | append: section.id -%}

      {%- if section.blocks.size > 1 -%}
        <button type="button" is="carousel-prev-button" class="tap-area" aria-controls="{{ carousel_id }}">
          <span class="sr-only">{{ 'general.accessibility.previous' | t }}</span>
          {%- render 'icon' with 'arrow-left', width: 12, direction_aware: true -%}
        </button>
      {%- endif -%}

      <announcement-bar-carousel allow-swipe {% if section.settings.autoplay %}autoplay="{{ section.settings.cycle_speed }}"{% endif %} id="{{ carousel_id }}" class="announcement-bar__carousel">
        {%- for block in section.blocks -%}
          <div class="announcement-bar__message">
            <p class="prose heading {% if forloop.first %}is-selected{% endif %}" {{ block.shopify_attributes }}>{{- block.settings.text -}}</p>
          </div>
        {%- endfor -%}
      </announcement-bar-carousel>

      {%- if section.blocks.size > 1 -%}
        <button type="button" is="carousel-next-button" class="tap-area" aria-controls="{{ carousel_id }}">
          <span class="sr-only">{{ 'general.accessibility.next' | t }}</span>
          {%- render 'icon' with 'arrow-right', width: 12, direction_aware: true -%}
        </button>
      {%- endif -%}
    </div>
  </height-observer>

  <script>
    document.documentElement.style.setProperty('--announcement-bar-height', `${document.getElementById('shopify-section-{{ section.id }}').clientHeight.toFixed(2)}px`);
  </script>
{%- endif -%}

{% schema %}
{
  "name": "t:sections.announcement_bar.name",
  "class": "shopify-section--announcement-bar",
  "tag": "aside",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "message",
      "name": "t:sections.announcement_bar.blocks.message.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "label": "t:sections.announcement_bar.blocks.message.text",
          "default": "Announce something here"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "t:sections.announcement_bar.blocks.background_color.id",
          "default": "#c2c2c2"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_sticky",
      "label": "t:sections.announcement_bar.enable_sticky_bar"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.announcement_bar.auto_rotate_between_messages",
      "default": true
    },
    {
      "type": "range",
      "id": "cycle_speed",
      "min": 2,
      "max": 20,
      "step": 1,
      "unit": "sec",
      "label": "t:sections.announcement_bar.cycle_speed",
      "default": 5
    },
    {
      "type": "range",
      "id": "desktop_font_size",
      "min": 9,
      "max": 15,
      "unit": "px",
      "label": "t:sections.announcement_bar.desktop_text_size",
      "default": 11
    },
    {
      "type": "range",
      "id": "mobile_font_size",
      "min": 9,
      "max": 15,
      "unit": "px",
      "label": "t:sections.announcement_bar.mobile_text_size",
      "default": 10
    }
  ]
}
{% endschema %}
2

Hello @rbrownofficial

You just need to remove .id from the background color settings where you appy it as style just as show in this screenshot: https://prnt.sc/conaZTXHMwxh

Just remove the .id after the “block.settings.background_color”, and check by saving the file

Hope this solution works for your issue.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Does not work. It still not showing the hex code. Only showing:

style="background-color:  !important;"
4

Can you please share the store URL and password so i can check and gives you the best solution ?

5

I send you a PM

6

Hi @rbrownofficial ,

Please change all code:

{%- if section.blocks.size > 0 -%}
  

  

  
{%- endif -%}

{% schema %}
{
  "name": "t:sections.announcement_bar.name",
  "class": "shopify-section--announcement-bar",
  "tag": "aside",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "message",
      "name": "t:sections.announcement_bar.blocks.message.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "label": "t:sections.announcement_bar.blocks.message.text",
          "default": "Announce something here"
        },
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:global.colors.scheme",
          "default": "scheme-3"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_sticky",
      "label": "t:sections.announcement_bar.enable_sticky_bar"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.announcement_bar.auto_rotate_between_messages",
      "default": true
    },
    {
      "type": "range",
      "id": "cycle_speed",
      "min": 2,
      "max": 20,
      "step": 1,
      "unit": "sec",
      "label": "t:sections.announcement_bar.cycle_speed",
      "default": 5
    },
    {
      "type": "range",
      "id": "desktop_font_size",
      "min": 9,
      "max": 15,
      "unit": "px",
      "label": "t:sections.announcement_bar.desktop_text_size",
      "default": 11
    },
    {
      "type": "range",
      "id": "mobile_font_size",
      "min": 9,
      "max": 15,
      "unit": "px",
      "label": "t:sections.announcement_bar.mobile_text_size",
      "default": 10
    }
  ]
}
{% endschema %}

I changed the code and added color option for each block

7

Screenshot 2024-07-12 at 19.51.33.png
Screenshot 2024-07-12 at 19.51.33.png706×330 3.21 KB

This is what I see now. Also I can only choose from a color scheme but I want to just put in a hex color.

8

Hi @rbrownofficial ,

Can I send you a collaborator invitation? It will help me debug things better