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

Bột ngọt Vị Hương Tố – Thương hiệu bột ngọt nổi tiếng trước 75 và ly kỳ chuyện “châu chấu đá xe”

Hai nhãn hiệu Ajinomoto và Vedan có mặt tại Việt Nam vào thập niên 1950, đã chiếm lĩnh toàn bộ thị trường trong nước....

Pixel 6, chiếc điện thoại sắp ra mắt của Google

Nổi tiếng với danh hiệu "cha đẻ của hệ điều hành Android", nhưng ít ai biết Google cũng sở hữu cho mình một dòng...

Chụp ảnh nguyên trang web với công cụ trực tuyến Site-Shot

Ngày nay có rất nhiều công cụ giúp bạn chụp ảnh màn hình và trong số đó cũng có nhiều công cụ hỗ trợ...

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...

Hàn Quốc sẽ buộc Google và Apple cho phép sử dụng cổng thanh toán của bên thứ ba trên các kho ứng dụng

Một đòn giáng mạnh vào cả Apple và Google khi mà Hàn Quốc đã thông qua luật yêu cầu các cửa hàng ứng dụng...

BẠN XEM CHƯA

Instagram for Kids chưa ra mắt đã bị phản đối kịch liệt

Tháng trước, Instagram đã bị rò rỉ thông tin nội bộ về việc phát hành một mạng xã hội mới cho trẻ em dưới...

Chiếc máy tính bảng đầu tiên của tôi

Bản thân nhận thấy mình là một người rất thích công nghệ và đam mê nó. Tuy nhiên việc bắt nhịp cùng với những...

Thay đổi ngôn ngữ giao diện trên Chrome

Hiện nay, nếu truy cập trang web Google.com.vn (hoạch chỉ cần gõ google.com) rồi bấm vào thông báo (ở góc trên bên trái trang...

Chuyện giáo dục lòng hiếu thảo ở xứ người

Người Hàn Quốc bắt chước mô hình giáo dục của Nhật Bản để cố gắng tạo ra 1 xã hội đức trị. Môn Đức...

Hướng dẫn đưa source code lên bán trên Codester

Mình đã từng chia sẻ với các bạn về Codester - sàn giao dịch mã nguồn, giao diện đang lên. Hôm nay mình vừa...