Thêm huy hiệu Planet vào cửa hàng trực tuyến
Nếu muốn cho khách hàng biết rằng đơn hàng được vận chuyển trung hòa carbon thì bạn có thể thêm huy hiệu Planet vào cửa hàng trực tuyến. Bài viết này sẽ hướng dẫn bạn từng bước để thêm và tùy chỉnh giao diện huy hiệu này.
Trên trang này
Những lưu ý khi thêm huy hiệu Planet
Trước khi thêm huy hiệu Planet vào cửa hàng trực tuyến, hãy cân nhắc những điều sau:
- Bạn cần cài đặt Planet.
- Bạn phải đang đăng ký một gói đăng ký Planet.
- Nếu đang sử dụng chủ đề cũ thì bạn sẽ không thể tùy chỉnh huy hiệu Planet.
Ngôn ngữ sẵn có
Bạn không thể áp dụng bản dịch của riêng mình cho huy hiệu Planet. Tuy nhiên, có một danh sách ngôn ngữ sẵn có và bạn có thể thay đổi trang quản trị Shopify sang một trong các ngôn ngữ này. Để dịch huy hiệu ứng dụng Planet, bạn cần sử dụng chủ đề tương thích với tính năng bán hàng bằng nhiều ngôn ngữ. Bạn có thể thay đổi ngôn ngữ chủ đề mặc định và thêm ngôn ngữ khác để khách hàng có thể chọn ngôn ngữ ưu tiên của họ.
Thêm huy hiệu Planet vào chủ đề Online Store 2.0
Nếu đang sử dụng chủ đề Online Store 2.0, bạn có thể thêm huy hiệu Planet vào bất kỳ trang nào của cửa hàng trực tuyến trực tiếp từ trình biên tập chủ đề.
Các bước thực hiện:
Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
Trong trang Ứng dụng và kênh bán hàng, nhấp vào Online store.
Nhấp vào Mở kênh bán hàng.
Nhấp vào Chủ đề.
Trong mục Chủ đề hiện tại , nhấp vào Tùy chỉnh.
Chọn trang bạn muốn thêm huy hiệu Planet, ví dụ như Trang chủ hoặc Giỏ hàng.
-
Thêm huy hiệu vào mục hiện có hoặc mục mới:
- Để thêm huy hiệu vào mục hiện có, nhấp vào Thêm khối rồi chọn Planet.
- Để thêm huy hiệu vào mục mới, nhấp vào Thêm mục rồi chọn Planet.
Nhấp vào Save (Lưu).
Tùy chỉnh thiết kế huy hiệu Planet
Nếu đang sử dụng chủ đề Online Store 2.0 thì bạn cũng có thể tùy chỉnh giao diện huy hiệu Planet ngay trong trình biên tập chủ đề. Dưới đây là các thuộc tính bạn có thể tùy chỉnh:
- màu nền và đường viền
- hiển thị logo Planet, mục thông tin khác, mục số liệu thống kê và mục các đổi mới được tài trợ
- cỡ huy hiệu, lề và kích thước bo tròn góc
Xem kỹ bảng sau để tìm hiểu thêm về các thuộc tính khác nhau của huy hiệu Planet mà bạn có thể tùy chỉnh:
| Thuộc tính | Mô tả | Tùy chọn tùy chỉnh |
|---|---|---|
| Logo Planet | Logo Planet được mô tả là hình tròn màu xanh lá nhạt và có hình lá cây đậm màu ở phía dưới bên phải. Tùy thuộc vào kích cỡ huy hiệu, logo sẽ hiển thị ở góc bên trái hoặc góc trên bên trái của huy hiệu. | Bạn có thể chọn hoặc bỏ chọn hộp kiểm Logo Planet. |
| Liên kết thông tin khác | Nếu đã thiết lập Trang Ảnh hưởng thì bạn có thể hiển thị đường liên kết thông tin khác để chuyển khách hàng đến Trang Ảnh hưởng. Tùy thuộc vào kích cỡ huy hiệu, lời kêu gọi hành động xem thêm thông tin sẽ hiển thị dưới dạng liên kết Thông tin khác ở góc bên phải hoặc góc trên bên phải của huy hiệu. Nếu bạn chưa thiết lập Trang Ảnh hưởng thì văn bản Do Shopify Planet cung cấp sẽ hiển thị. | Bạn có thể chọn hoặc bỏ chọn hộp kiểm Hiển thị mục "Thông tin khác". |
| Hiển thị lượng khí thải đã loại bỏ | Thuộc tính Hiển thị lượng khí thải đã loại bỏ sẽ hiển thị lượng khí thải carbon theo kilogam mà bạn đã loại bỏ khỏi không khí thông qua dự án mà bạn hỗ trợ qua Planet. Thuộc tính Hiển thị lượng khí thải đã loại bỏ cũng hiển thị phép so sánh số dặm do một xe ô tô chạy xăng trung bình chạy được để khách hàng có thể liên hệ và định lượng tác động của việc vận chuyển trung hòa carbon mà bạn đã thực hiện. | Bạn có thể chọn hoặc bỏ chọn hộp kiểm Hiển thị lượng khí thải đã loại bỏ. |
| Hiển thị các đổi mới được tài trợ | Mỗi gói đăng ký đều hỗ trợ tiền cho nhiều công ty và nhiều giải pháp tân tiến. Tùy thuộc vào gói đăng ký của bạn, mục Các đổi mới được tài trợ sẽ hiển thị ví dụ về các loại dự án loại bỏ khí thải cacbon mà bạn đang hỗ trợ. | Bạn có thể chọn hoặc bỏ chọn hộp kiểm Hiển thị lượng khí thải đã loại bỏ. |
Các bước thực hiện:
Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
Trong trang Ứng dụng và kênh bán hàng, nhấp vào Online store.
Nhấp vào Mở kênh bán hàng.
Nhấp vào Chủ đề.
Trong mục Chủ đề hiện tại , nhấp vào Tùy chỉnh.
Chọn trang bạn đã thêm huy hiệu Planet, ví dụ như Trang chủ hoặc Giỏ hàng.
Trong menu thả xuống, chọn khối ứng dụng Planet trong mục Ứng dụng.
Áp dụng tùy chỉnh cho huy hiệu Planet.
Nhấp vào Save (Lưu).
Thêm huy hiệu Planet vào chủ đề cũ hoặc chủ đề tùy chỉnh
Nếu đang sử dụng chủ đề cổ điển hoặc chủ đề tùy chỉnh thì bạn cần chỉnh sửa thủ công mã chủ đề để thêm huy hiệu Planet.
Các bước thực hiện:
Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
Trong trang Ứng dụng và kênh bán hàng, nhấp vào Planet.
Nhấp vào Mở ứng dụng.
Trong mục Hiển thị huy hiệu Planet , nhấp vào Thêm huy hiệu.
Sao chép đoạn mã sau:
<!-- Start of Shopify Planet code snippet --> <link href="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.css" rel="stylesheet" type="text/css" media="all"> {%- assign CURRENT_DATE = "now" | date: "%Y-%m-%dT%H:%MZ" -%} {%- assign ACTIVE_UNTIL = shop.metafields.shopify-planet.active-until | date: "%Y-%m-%dT%H:%MZ" -%} <script src="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.js" async></script> {% if CURRENT_DATE < ACTIVE_UNTIL or request.design_mode %} {% if block.settings.badgeMode != "buyer_contribution" %} <div class="shopify-planet-banner"> <img src="https://cdn.shopify.com/extensions/77a33867-106a-4608-bb7c-98fa40ed256a/0.25.0/assets/logo.png" alt="Carbon-neutral shipping with Shopify Planet" width="34" height="30" loading="lazy"> <div class="shopify-planet-banner-title-container"> <div class="shopify-planet-banner-title">All deliveries are carbon neutral</div> {% if shop.metafields.shopify-planet.impact-comms-linked %} <div class="shopify-planet-banner-subtitle-link"><a href="/pages/climate-commitment" target="_blank">More info</a></div> {% else %} <div class="shopify-planet-banner-subtitle">Powered by Shopify Planet</div> {% endif %} </div> </div> {% endif %} {% endif %} <!-- End of Shopify Planet code snippet -->-
Truy cập một trong những tệp sau để thêm huy hiệu:
- Để thêm huy hiệu vào trang giỏ hàng, vào tệp templates/cart.liquid.
- Để thêm huy hiệu vào trang sản phẩm, vào tệp templates/product.liquid.
Dán đoạn mã vào vị trí bạn muốn hiển thị huy hiệu, sau đó nhấp vào Lưu.
Nhấp vào Xem trước để xem lại giao diện hiển thị huy hiệu trên cửa hàng trực tuyến của bạn.