Thông báo trên đầu trang (announcement bar) là vị trí cũng như giải pháp tốt nhất để truyền tải thông điệp đến khách truy cập hiệu quả nhất. Tuy nhiên nó có thể gặp hạn chế về nội dung vì không gian này tương đối nhỏ nên tốt nhất là bạn chỉ có thể chia sẻ một thông báo ngắn. Nếu bạn muốn chia sẻ nhiều hơn thì sao? Đơn giản thôi, bạn hãy biến nó thành 1 slide để có thể chia sẻ nhiều hơn. Bài viết này sẽ hướng dẫn bạn các tạo các thanh báo trên đầu trang kiểu slide.
Bước 1: Tạo 1 section mới
- Từ trang admin bạn truy cập Online Store > Themes
- Click vào Actions và chọn Edit Code.
- Trong thư mục Sections bạn hãy bấm vào liên kết Add a new section
- Đặt tên cho section mới này là hura-announcement-bar
- Bạn sử dụng đoạn mã sau đây cho section mới này12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%}<div class="hura-announcement-bar swiper-container"><div class="hura-messages swiper-wrapper">{%- for block in section.blocks -%}<div class="hura-message swiper-slide">{{block.settings.message}}</div>{%- endfor -%}</div><div class="hura-swiper-button swiper-button-prev"></div><div class="hura-swiper-button swiper-button-next"></div></div><script src="//unpkg.com/swiper/swiper-bundle.min.js"></script><link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css" /><script>const swiper = new Swiper('.swiper-container', {{%- if section.settings.autoplay %}autoplay: {delay: {{section.settings.delay}} },{%- endif -%}loop: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script><style>.hura-announcement-bar{background:{{section.settings.colorBackground}};position: relative;overflow: hidden;}.hura-announcement-bar .hura-message{text-align:center;color:{{section.settings.colorText}};padding:0 7%;}.hura-announcement-bar .swiper-button-next:after, .hura-announcement-bar .swiper-container-rtl .swiper-button-prev:after,.hura-announcement-bar .swiper-button-prev:after, .hura-announcement-bar .swiper-container-rtl .swiper-button-next:after{font-size: 15px;color:{{section.settings.colorText}};}{%- if section.blocks.size < 2 %}.hura-announcement-bar .hura-swiper-button{display:none!important;}{%- endif -%}</style>{%- 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 %}
- Bạn bấm Save để lưu lại.
Bước 2: Chèn section vào vị trí đầu trang
- Trong thư mục Layout chọn mở tập tin theme.liquid
- Trong phần mã của tập tin này bạn hãy tìm đến dòng
{% section 'header' %}và hãy chèn đoạn mã bên dưới vào ngay trước nó1{% section 'header' %}
- Bạn hãy lưu lại
Bước 3: Thiết lập thanh trượt thông báo
- Từ trang admin bạn truy cập Online Store > Themes
- Bấm vào Customize
- Bạn sẽ nhìn thấy một section mới là Announcement Bar
- Tại đây bạn có thể tuỳ chỉnh bật / tắt hoặc thiết lập các thông số màu sắc cũng như tốc độ của thanh trượt. Bạn bấm vào liên kết Add Message để thêm các thông báo – mỗi thông báo là 1 slide.
- Sau cùng bạn bấm Save để lưu lại và có thể trở ra trang web để kiểm tra.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
- Advertisement -
