Anyone know how to make an announcement bar like this ? Dawn Theme 13.0

[Aaron33aaron]

Hey I was wondering if anyone knew how to custom code or knew an app that can make announcement bars like this with images embeded ? Any help would be appreciated.

[Dawood_Mirza_1]

Hi Aaron33aaron,
For a simple answer just add
Free shipping All signs! --|-- 4.9 Google rathing --|-- 2 year warranty
this or edit accordingly for same look and feel like the first image

[dkdipanshu]

Agree with @Dawood_Mirza_1 Dawood

I have used this on my website

[lf-ecom-shops]

Hey @Aaron33aaron , of course, I am currently coding it for you

[lf-ecom-shops]

OK, I am back, I gotcha. Just go to edit code on your theme and make a new section, call it for example announcment-bar-2, and insert this code:

{% schema %}
{
  "name": "Announcement Bar 2",
  "settings": [
    {
      "type": "image_picker",
      "id": "icon_image_1",
      "label": "Icon Image 1"
    },
    {
      "type": "text",
      "id": "announcement_text_1",
      "label": "Announcement Text 1",
      "default": "FREE SHIPPING"
    },
    {
      "type": "image_picker",
      "id": "icon_image_2",
      "label": "Icon Image 2"
    },
    {
      "type": "text",
      "id": "announcement_text_2",
      "label": "Announcement Text 2",
      "default": "4.9 GOOGLE RATING"
    },
    {
      "type": "image_picker",
      "id": "icon_image_3",
      "label": "Icon Image 3"
    },
    {
      "type": "text",
      "id": "announcement_text_3",
      "label": "Announcement Text 3",
      "default": "3 YEAR WARRANTY"
    },
    {
      "type": "color",
      "id": "banner_background_color",
      "label": "Background Color",
      "default": "#007bff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "name": "Announcement Bar 2",
      "category": "Promotional",
      "settings": {
        "icon_image_1": "",
        "announcement_text_1": "FREE SHIPPING",
        "icon_image_2": "",
        "announcement_text_2": "4.9 GOOGLE RATING",
        "icon_image_3": "",
        "announcement_text_3": "3 YEAR WARRANTY",
        "banner_background_color": "#007bff",
        "text_color": "#FFFFFF"
      }
    }
  ]
}
{% endschema %}

{% assign icon_image_1 = section.settings.icon_image_1 | img_url: 'medium' %}
{% assign icon_image_2 = section.settings.icon_image_2 | img_url: 'medium' %}
{% assign icon_image_3 = section.settings.icon_image_3 | img_url: 'medium' %}
{% assign announcement_text_1 = section.settings.announcement_text_1 %}
{% assign announcement_text_2 = section.settings.announcement_text_2 %}
{% assign announcement_text_3 = section.settings.announcement_text_3 %}
{% assign banner_background_color = section.settings.banner_background_color %}
{% assign text_color = section.settings.text_color %}

  

    {% if icon_image_1 %}
      
    {% endif %}
    

{{ announcement_text_1 }}

  

  
    {% if icon_image_2 %}
      
    {% endif %}
    

{{ announcement_text_2 }}

  

  
    {% if icon_image_3 %}
      
    {% endif %}
    

{{ announcement_text_3 }}

  

Then, just customize the text and download the icons or images you want and upload them. Hope that helped

[lf-ecom-shops]

But I have to say that’s desktop optimized, I’ll code it that it also optimizes for mobile, will update then

[Aaron33aaron]

Where do I put this code ? Do I replace the existing schema in Announcement-bar.liquid or create a new section file ?

[lf-ecom-shops]

Hey @Aaron33aaron , create a new section, call it whatever you want, I’d say custom-announcement-bar

[Aaron33aaron]

Thank you so much I really appreciate it, is there any way you could help me with the optimized code for mobile ? For your time I’d be willing to send you some money over paypal for helping me I really appreciate it.

[lf-ecom-shops]

Hey @Aaron33aaron , nice that you like it. I don’t need money tbh, trust me, I make enough with my dropshipping stores ;), but I’ll try my best to help you, just tell me your prefered layout on mobile and I’ll take a look. Only thing you could do is when I officially launch LF Ecom Shops (my Shopify Dropshipping Store Design Agency) is to buy a store, only if you need one then. Could surely make a discount for you:).

Best Regards,

Florian, CEO of LF Ecom Shops

[Aaron33aaron]

Thank you for the reply, will definitely checkout your LF Ecom Shops design agency when it realeases ! I’ve included a picture of what it looks like on desktop and what I want it to look like on mobile.

Desktop:

Want I want it to look like on mobile (note the top purple bar I know how to do, I want it to be like the bottom bar where it’s seperated into three columns with the dividing line and the exact same wording and 5 star rating on the middle column.

Let me know if you can help achieve this would greatly appreciate it !!