Can anyone share a code for a looping slider in the announcement bar?

[Joost_1]

Does anyone have a code for a looping slider in the announcement bar?

[PageFly-Victor]

Hi @Joost_1

This is Victor from PageFly - Shopify Page Builder App

You will need to add a custom code for the announcement bar to your theme. Please follow my steps below

Step 1: Create a new section

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions, and then click Edit Code.
3. Under the Sections folder, click on Add a new section link to create a new section.

1. Fill the section name – hura-announcement-bar into the field on the dialog and click Create section button.
2. In the online code editor, please replace the existing code with the below code

{%- if  section.blocks.size > 0 and section.settings.show_announcement_bar -%}

  

    {%- for block in section.blocks -%}
    
{{block.settings.message}}

    {%- endfor -%}
  

  

  

Powered by HuraTips.Com

{%- endif -%}

{% schema %}
  {
    "name": "Announcement Bar",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_announcement_bar",
        "label": "Show"
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Autoplay"
      },
      {
        "type": "text",
        "id": "delay",
        "label": "Delay between transitions (in ms)",
        "default": "5000"
      },
      {
        "type": "color",
        "id": "colorBackground",
        "label": "Background color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "colorText",
        "label": "Text color",
        "default": "#000"
      }
],
"blocks": [
      {
        "type": "header",
        "name": "Message",
        "settings": [
{
              "id": "message",
              "type": "textarea",
             "label": "Message"
            }
        ]
      }
]
  }
{% endschema %}

Click Save.

Step 2: Add the section to the header

1. Under the Layout folder, click onto theme.liquid to open file editor.
2. In the online code editor, find the script{% section ‘header’ %} and insert the below code before this script.

Step 3: Create a new Sliding Announcement Bar

Hope this can help you solve the issue

Best regards,

Victor | PageFly

[AlexYZ_1]

Hi, @PageFly-Victor I use your code but it does not align well in the middle more on the right side on desktop and mobile. Can you check if you can make a announcement bar like kawaiibonjour.com?

[waynetu]

Add the code below in the beginning of your announcement bar liquid.

---

* { box-sizing: border-box; }

---

[From_The_Stork]

hi reviving this topic

• ive done these steph thank you very much - working perfectly

a couple of advancements if possible?

• can the height be set at all? - the text is a little close to the header and content below

• can links be added to the text to take you to the sign up page for instance

TIA