Rotating announcement bar dawn theme

Shopify Discussion

Topic summary

A user asks how to add a rotating announcement bar to the Dawn theme in Shopify.

Solutions Offered:

  • App-based approach: Use third-party apps from the Shopify App Store, such as Magic Announcement Bar, which provides ready-made functionality.

  • YouTube tutorial: Follow a video guide that demonstrates custom code implementation for Dawn theme.

  • Custom code solution: A community member shares complete code written with ChatGPT assistance for creating a slider announcement bar.

Implementation Steps (Custom Code):

  1. Create new section file: slider-announcement-bar.liquid
  2. Paste provided code into the file
  3. Add {% section 'slider-announcement-bar' %} to theme.liquid body tag
  4. Comment out existing {% section 'announcement-bar' %}

The custom code includes configurable rotation timing, color schemes, multiple announcement blocks with messages and links. Users are advised to back up their theme before making any modifications.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

how can i add rotating announcement bar in dawn theme?

2

Hi, @am_i_abdullah !

Thanks for reaching out in our Community forums and for sharing your concern, I’d be happy to help.

I understand that you are looking to create a rotating announcement bar slider. This is an awesome tool to add to your store as you’ll be able to advertise different promotions, discounts, and news. While there are many ways to go about this, you can browse through the Shopify App Store and find an app that works best for you. For instance, you can use the Magic Announcement Bar app that offers this functionality.

If you prefer, you can also follow this YouTube Guide that walks you through how to add a rotating announcement bar to the Dawn theme. Please be sure to back up your theme before making any changes, just in case you wish to revert the customizations.

While on the topic, I’d love to learn more about the other ways that you are communicating with your customers. For instance, do you have a newsletter campaign set up? This is a great way to ensure that your customers are aware of any offers or news regarding your store. Let me know if you’re interested in learning more!

3

Hi!

I actually wrote the code with ChatGPT for the DAWN THEME.

Directions:

First - click the three dots next to the theme customizer and select edit code.

  1. Create a new section named: slider-announcement-bar.liquid
  2. Paste the code of the downloaded file
  3. In the body tag of theme.liquid, paste {% section ‘slider-announcement-bar’ %}
  4. Comment out the existing {% section ‘announcement-bar’ %}
{% schema %}
{
  "name": "Slider Announcement Bar",
  "settings": [
    {
      "type": "number",
      "label": "Rotation Time (ms)",
      "id": "rotation_time",
      "default": 5000,
      "info": "Set the time (in milliseconds) for each announcement to rotate."
    },
     {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "accent-1",
              "label": "t:sections.all.colors.accent_1.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.all.colors.accent_2.label"
            },
            {
              "value": "background-1",
              "label": "t:sections.all.colors.background_1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.all.colors.background_2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.all.colors.inverse.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.all.colors.label"
        },
  ],
  "blocks": [
    {
      "type": "custom-announcement-1",
      "name": "Announcement 1",
      "settings": [
        {
          "type": "text",
          "label": "Message",
          "id": "message",
          "default": "Free shipping on orders over $50!"
        },
        {
          "type": "url",
          "label": "Link URL",
          "id": "link_url",
          "default": "/collections/all"  /* Default link to collections/all */
        }
      ]
    },
    {
      "type": "custom-announcement-2",
      "name": "Announcement 2",
      "settings": [
        {
          "type": "text",
          "label": "Message",
          "id": "message",
          "default": "Sign up for our newsletter for exclusive offers."
        },
        {
          "type": "url",
          "label": "Link URL",
          "id": "link_url",
          "default": "/collections/all"  /* Default link to collections/all */
        }
      ]
    },
    {
      "type": "custom-announcement-3",
      "name": "Announcement 3",
      "settings": [
        {
          "type": "text",
          "label": "Message",
          "id": "message",
          "default": "Limited time sale – 20% off everything!"
        },
        {
          "type": "url",
          "label": "Link URL",
          "id": "link_url",
          "default": "/collections/all"  /* Default link to collections/all */
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Default",
      "category": "Custom"
    }
  ]
}
{% endschema %}

  

    {% for block in section.blocks %}
      

        
        {% if block.settings.link_url != "" %}
          
           

 {{ block.settings.message }}  {% render 'icon-arrow' %}

   
          
        {% else %}
          
            {{ block.settings.message }}
          
        {% endif %}
      

    {% endfor %}