扩展宣传栏的功能，以支持更多。
    编辑代码， Sections > announcement-bar.liquid 替换内容即可

    1. {%- for block in section.blocks -%}
    2.   {%- case block.type -%}
    3.     {%- when 'announcement' -%}
    4.       <div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
    5.         {%- if block.settings.text != blank -%}
    6.           {%- if block.settings.link != blank -%}
    7.             <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
    8.           {%- endif -%}
    9.               {%- capture announcement_style -%}
    10.                 font-size: {{ block.settings.font_size }}px;
    11.                 color: {{ block.settings.font_color }};
    12.                 background-color: {{ block.settings.background_color }};
    13.                 padding: {{block.settings.padding}}rem {{ block.settings.padding | times: 2 }}rem;
    14.               {%- endcapture -%}
    15.               <p class="announcement-bar__message h5" style="{{ announcement_style }}">
    16.                 {{ block.settings.text | escape }}
    17.                 {%- if block.settings.link != blank -%}
    18.                   {% render 'icon-arrow' %}
    19.                 {%- endif -%}
    20.               </p>
    21.           {%- if block.settings.link != blank -%}
    22.             </a>
    23.           {%- endif -%}
    24.         {%- endif -%}
    25.       </div>
    26.   {%- endcase -%}
    27. {%- endfor -%}
    29. {% schema %}
    30. {
    31.   "name": "t:sections.announcement-bar.name",
    32.   "max_blocks": 12,
    33.   "blocks": [
    34.     {
    35.       "type": "announcement",
    36.       "name": "t:sections.announcement-bar.blocks.announcement.name",
    37.       "settings": [
    38.         {
    39.           "type": "text",
    40.           "id": "text",
    41.           "default": "Welcome to our store",
    42.           "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
    43.         },
    44.         {
    45.           "type": "url",
    46.           "id": "link",
    47.           "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
    48.         },
    49.         {
    50.           "type": "color",
    51.           "id": "background_color",
    52.           "label": "Background Color"
    53.         },
    54.         {
    55.           "type": "color",
    56.           "id": "font_color",
    57.           "label": "Font Color"
    58.         },
    59.         {
    60.           "type": "range",
    61.           "id": "padding",
    62.           "label": "Announcement Padding",
    63.           "info": "To change the height of Announcement",
    64.           "min": 0,
    65.           "max": 5,
    66.           "step": 0.5,
    67.           "default": 1,
    68.           "unit": "rem"
    69.         },
    70.         {
    71.           "type": "range",
    72.           "id": "font_size",
    73.           "label": "Announcement Font Size",
    74.           "min": 12,
    75.           "max": 30,
    76.           "step": 1,
    77.           "default": 20,
    78.           "unit": "px"
    79.         }
    80.       ]
    81.     }
    82.   ],
    83.   "default": {
    84.     "blocks": [
    85.       {
    86.         "type": "announcement"
    87.       }
    88.     ]
    89.   }
    90. }
    91. {% endschema %}

    Tips: 如有引用请标注源文章地址

    关注我的【小红书】，第一时间掌握更新动态

    你的鼓励就是我创作的动力！
    zanshang.png