How to Make Custom Notification Bar in Shopify Dawn Theme

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Create a New Section

1. In the Sections directory, click Add a new section.
2. Name the section notification-bar and click Create section.

Step 3: Add Code to the New Section

Add the following code to your notification-bar.liquid file:

{% schema %}
{
  "name": "Notification Bar",
  "settings": [
    {
      "type": "text",
      "id": "notification_text",
      "label": "Notification Text",
      "default": "This is your notification text!"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ff0000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "show_close_button",
      "label": "Show Close Button",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Notification Bar",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div id="notification-bar" class="notification-bar" style="background-color: {{ section.settings.background_color }}; color: {{ section.settings.text_color }};">
  <p>{{ section.settings.notification_text }}</p>
  {% if section.settings.show_close_button %}
    <button id="close-notification-bar" style="color: {{ section.settings.text_color }};">&times;</button>
  {% endif %}
</div>

<style>
.notification-bar {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification-bar p {
  margin: 0;
  padding: 0 15px;
}

.notification-bar button {
  background: none;
  border: none;
  font-size: 1.5em;
  line-height: 1;
  margin-left: 15px;
  cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var closeButton = document.getElementById('close-notification-bar');
  if (closeButton) {
    closeButton.addEventListener('click', function() {
      var notificationBar = document.getElementById('notification-bar');
      notificationBar.style.display = 'none';
    });
  }
});
</script>

Step 4: Add the Section to Your Theme Layout

1. In the Layout directory, open theme.liquid.
2. Add the following code where you want the notification bar to appear. It’s common to place it just before the closing </body> tag to ensure it overlays on top of everything else.

{% section 'notification-bar' %}

Step 5: Configure the Section in the Theme Customizer

1. Go back to your Shopify admin panel.
2. Navigate to Online Store > Themes, and click on Customize for your theme.
3. In the theme customizer, find the new Notification Bar section and configure the settings:
   • Set the notification text.
   • Choose the background and text colors.
   • Decide whether to show the close button.
4. Save your changes.

Summary

By following these steps, you can create a custom notification bar in the Shopify Dawn theme:

1. Create a new section for the notification bar.
2. Add Liquid, HTML, CSS, and JavaScript to the section for functionality and styling.
3. Include the section in the theme layout.
4. Configure the section in the theme customizer.

This approach allows you to have a customizable notification bar that can be easily managed through the Shopify admin interface.