Shopify Dawn: verbeter de announcement bar

Intro

Laten we eerlijk zijn, de standaard announcement balk in het gratis Dawn thema van Shopify zit technisch niet heel goed in elkaar. Gebruikers kunnen bijvoorbeeld maximaal 12 blokken (ofwel aankondigingen) toevoegen, die vervolgens onder elkaar komen te staan. Dit zorgt ervoor dat de balk veel te veel ruimte in neemt op ieder schermformaat. Niet ideaal dus.

Een vaak gebruikte oplossing hiervoor, die ik op veel webshops voorbij zie komen, is door meerdere aankondigingen achter elkaar neer te zetten in één blok, gescheiden door een "|". Ook dit ziet er niet heel fraai uit, laten we dus een betere versie maken.

Mijn eigen versie van de announcement bar

Ik heb de code van de announcement balk aangepast naar een versie die beter voor mij (en hopelijk voor andere webshops) zal gaan werken. Mijn versie zorgt ervoor dat er maximaal drie blokken kunnen worden toegevoegd, die vervolgens naast elkaar komen te staan, en dat er gekozen kan worden voor een icoon die voor de tekst wordt geplaatst.

De code

Als je gebruik wilt maken op je eigen webshop van mijn nieuwe announcement bar, dan heb ik hieronder de code voor je:

<div class="announcement-bar color-{{ section.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- for block in section.blocks -%}
  {%- if block.settings.mobile == true  -%}
    <div class="hide-on-mobile">
  {%- endif -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <div class="announcement-bar__block">
                {% render 'icon-accordion', icon: block.settings.icon %}
                <p class="announcement-bar__message h5">
                  {{ block.settings.text | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </p>
              </div>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
  {%- endcase -%}
  {%- if block.settings.mobile == true  -%}
    </div>
  {%- endif -%}
{%- endfor -%}
</div>
 
<style>
.announcement-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
 
@media only screen and (max-width: 749px) {
  .hide-on-mobile {
    display: none;
  }
}
 
.announcement-bar__block {
  display: flex;
  align-items: center;
  margin: 0 25px;
}
 
.announcement-bar__link {
  display: flex;
  width: unset;
}
 
.announcement-bar__block > .icon-accordion {
  fill: rgb(var(--color-foreground));
  margin-right: 10px;
}
</style>
 
{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 3,
  "settings": [
    {
          "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": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label"
            },
            {
              "value": "apple",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label"
            },
            {
              "value": "banana",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label"
            },
            {
              "value": "bottle",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label"
            },
            {
              "value": "box",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label"
            },
            {
              "value": "carrot",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label"
            },
            {
              "value": "chat_bubble",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label"
            },
            {
              "value": "check_mark",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label"
            },
            {
              "value": "clipboard",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label"
            },
            {
              "value": "dairy",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label"
            },
            {
              "value": "dairy_free",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label"
            },
            {
              "value": "dryer",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label"
            },
            {
              "value": "eye",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label"
            },
            {
              "value": "fire",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label"
            },
            {
              "value": "gluten_free",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label"
            },
            {
              "value": "heart",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label"
            },
            {
              "value": "iron",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label"
            },
            {
              "value": "leaf",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label"
            },
            {
              "value": "leather",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label"
            },
            {
              "value": "lightning_bolt",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label"
            },
            {
              "value": "lipstick",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label"
            },
            {
              "value": "lock",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label"
            },
            {
              "value": "map_pin",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label"
            },
            {
              "value": "nut_free",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label"
            },
            {
              "value": "pants",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label"
            },
            {
              "value": "paw_print",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label"
            },
            {
              "value": "pepper",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label"
            },
            {
              "value": "perfume",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label"
            },
            {
              "value": "plane",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label"
            },
            {
              "value": "plant",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label"
            },
            {
              "value": "price_tag",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label"
            },
            {
              "value": "question_mark",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label"
            },
            {
              "value": "recycle",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label"
            },
            {
              "value": "return",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label"
            },
            {
              "value": "ruler",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label"
            },
            {
              "value": "serving_dish",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label"
            },
            {
              "value": "shirt",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label"
            },
            {
              "value": "shoe",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label"
            },
            {
              "value": "silhouette",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label"
            },
            {
              "value": "snowflake",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label"
            },
            {
              "value": "star",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label"
            },
            {
              "value": "stopwatch",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label"
            },
            {
              "value": "truck",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label"
            },
            {
              "value": "washing",
              "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
            }
          ],
          "default": "check_mark",
          "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "mobile",
          "label": "Hide on mobile?",
          "default": false
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

Bovenstaande code kun je plakken in de code editor van Shopify, het bestand wat je moet hebben is 'announcement-bar.liquid'. Haal dit bestand helemaal leeg, en plak er vervolgende de bovenstaande code voor in de plaats.

Let op bij het updaten van je thema

Shopify update regelmatig het Dawn thema, en zodra je een update uitvoert zal het announcement-bar.liquid bestand weer terug worden gezet naar het origineel. Zorg er daarom altijd voor dat je een back-up maakt van je huidige thema alvorens je gaat updaten, en plak de code weer opnieuw in het geüpdate thema.

Conclusie

Wat vind jij van deze versie van de announcement bar? Heb jij misschien een idee hoe ik deze nóg beter kan maken? Of wil je misschien een ander deel van het Dawn thema gewijzigd zien worden? Laat het me weten!