Trang chủ Lập trình Shopify Liquid Cách tạo thanh thông báo trượt trên đầu trang web Shopify

Cách tạo thanh thông báo trượt trên đầu trang web Shopify

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

  1. Từ trang admin bạn truy cập Online Store > Themes
  2. Click vào Actions và chọn Edit Code.
  3. Trong thư mục Sections bạn hãy bấm vào liên kết Add a new section
  4. Đặt tên cho section mới này là hura-announcement-bar
  5. Bạn sử dụng đoạn mã sau đây cho section mới này
  6. Bạn bấm Save để lưu lại.

Bước 2: Chèn section vào vị trí đầu trang

  1. Trong thư mục Layout chọn mở tập tin theme.liquid
  2. 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ó

  3. Bạn hãy lưu lại

Bước 3: Thiết lập thanh trượt thông báo

  1. Từ trang admin bạn truy cập Online Store > Themes
  2. Bấm vào Customize
  3. Bạn sẽ nhìn thấy một section mới là Announcement Bar
  4. 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.
  5. 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 -
Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Thế nào là giàu có

Trong 1 lần Elon Musk làm diễn giả cho một hội nghị ở Hoa Kỳ về đầu tư và tài chính, phần hỏi đáp,...

Hướng dẫn nộp thuế trực tuyến qua ứng dụng MB Bank

Ở bài viết trước mình đã chia sẻ Hướng dẫn khai báo thuế TNCN trực tuyến cho cá nhân mảng kinh doanh nội dung...

Hura Apps lọt vào Vòng ươm tạo của chương trình Tuyển chọn và ươm tạo các ý tưởng, dự án đổi mới sáng tạo...

Ngày 01/11/2021 vừa qua Hura Apps cùng với 10 dự án khác của tỉnh Bình Định đã được lọt vào Vòng ươm tạo trong...

Pinterest Tạo Ra Cơn Sốt Livestream Mua Sắm Trên Pinterest TV

Vào ngày 29/10 vừa qua, Pinterest đã ra mắt Pinterest TV cùng với 1 series mua sắm trực tuyến do chính các nhà sáng...

Cách ẩn nhãn Google reCaptcha trên trang web sử dụng reCaptcha v3

Nếu là dân lập trình web thì Google reCaptcha hẳn không quá xa lạ. Nó giúp chặn các spammer thực hiện các hành động...

BẠN XEM CHƯA

Google Chrome sẽ chặn tất cả các liên kết tải xuống không an toàn

Google đang có kế hoạch sẽ chặn tất cả các liên kết tải xuống không an toàn trong các phiên bản sắp tới của...

Extension của Google Chrome đầy hữu ích cho ai đang kiếm tiền từ Youtube

Hiện nay Youtube đang trở thành một công cụ kiếm tiền hữu ích cho các bạn trẻ. Nếu bạn đang tham gia kiếm tiền...

Anh thương em nhiều lắm mà em đâu có hay

Vào đời, mọi công việc đều khó khăn. Tự bản thân thấy bao giờ khó khăn của mình cũng là nhất thiên hạ. Anh...

Nhận xét về gói host trả phí của Hostinger

Trước kia mình đăng ký sử dụng dịch vụ Hostgator vì lúc đó mình có 1 trang web có lượt truy cập tương đối...

Responsive Boat – Giao diện WordPress thích hợp cho trang web công ty

Responsive Boat là giao diện dành cho WordPress được cung cấp miễn phí bởi Themeisle. Những điểm nổi bật của Responsive Boat: Tương thích với...