Chỉnh sửa hoặc xóa Nút Mua hoặc giỏ hàng tích hợp

Trang này được in vào Apr 26, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-sales-channels/buy-button/legacy-edit-delete.

Nút Mua và giỏ hàng được tạo từ mã nhúng bạn muốn thêm vào HTML nguồn của trang web. Nếu muốn thay đổi giao diện hoặc hành vi của nút hoặc giỏ hàng trên trang web, bạn cần thay đổi mã nhúng có liên quan.

Trên trang này

Xóa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng tích hợp

Để xóa Nút Mua, bộ sưu tập hoặc giỏ hàng tích hợp hiện có:

  1. Mở HTML nguồn của trang web có chứa Nút Mua, bộ sưu tập tích hợp hoặc giỏ hàng tích hợp.

  2. Xóa toàn bộ mã nhúng từ HTML nguồn. Mã nhúng sẽ giống mã dành cho Nút Mua như dưới đây:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Mua sản phẩm của bạn</a></noscript>
  1. Lưu thay đổi.

Chỉnh sửa Nút Mua

Để thay đổi giao diện hoặc cài đặt của một Nút Mua hiện có, bạn phải chỉnh sửa nội dung của thẻ div chính trong mã nhúng xuất hiện trong HTML nguồn:

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

Mỗi tính năng của Nút Mua tích hợp do một thuộc tính riêng trong thẻ div chính kiểm soát. Bạn có thể thêm, xóa hoặc cập nhật trực tiếp những thuộc tính này trong HTML nguồn.

Ví dụ: Nếu bạn muốn Nút Mua hiện tại chuyển hướng người dùng đến trang Sản phẩm thay vì trang Thanh toán:

  1. Mở HTML của trang chứa Nút Mua bạn muốn thay đổi.

  2. Tìm thuộc tính data-redirect_to trong thẻ div chính của mã nhúng cho Nút Mua đó: 

    data-redirect_to="checkout"

  3. Thay đổi giá trị của thuộc tính thành product: 

    data-redirect_to="product"

  4. Lưu thay đổi.

Thẻ div chính của Nút Mua có nhiều thuộc tính bạn có thể chỉnh sửa:

Thuộc tính thẻ Nút Mua có thể chỉnh sửa
Thuộc tính Giá trị Mặc định
data-shop Miền myshopify (ví dụ như cuahang.myshopify.com ) được kết nối với nút. Miền Shopify của bạn
data-product_handle Mã điều khiển của sản phẩm nổi bật dựa trên tiêu đề sản phẩm. Mỗi sản phẩm của bạn đều có mã điều khiển riêng trong Shopify. Mã điều khiển của sản phẩm nổi bật
data-embed_type Phân biệt giữa mã nhúng dành cho Nút Mua, bộ sưu tập tích hợp và giỏ hàng tích hợp. Các giá trị khả dụng là product, cart và collection. sản phẩm
data-display_size Chiều rộng tối đa của toàn bộ nội dung nhúng (không phải nút). Có thể là thu gọn (230 px) hoặc thông thường (450 px). Chỉ áp dụng cho một Nút Mua sản phẩm duy nhất. nhỏ gọn
data-has_image Cho dù đó chỉ là một sản phẩm đầy đủ tích hợp (true) hoặc chỉ Nút Mua (false). true
data-redirect_to Nơi Nút Mua liên kết đến. Có thể là trang thanh toán, sản phẩm hoặc giỏ hàng. Nếu bạn muốn Nút Mua kết nối với một giỏ hàng tích hợp trên cùng một trang, data-redirect_to phải là giỏ hàng. thanh toán
data-product_modal Kích hoạt hộp thoại sản phẩm để hiển thị khi nhấp vào sản phẩm. Nếu giá trị data-redirect_to là modal, thuộc tính này phải là true, nếu không sẽ là false. false
data-buy_button_text Văn bản hiển thị trên Nút Mua. Mua ngay
data-button_background_color Mã thập lục phân của màu Nút Mua, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. 7db461
data-button_text_color Mã thập lục phân của màu chữ trên Nút Mua, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. ffffff
data-background_color Màu nền của khu vực xung quanh Nút Mua. Đó có thể là mã thập lục phân (theo quy tắc trên) hoặc trong suốt. Nếu trong suốt, lớp đệm không được áp dụng cho nội dung tích hợp. trong suốt
data-show_product_price Ghi đè để hiển thị hoặc không hiển thị giá sản phẩm. Có thể là true hoặc false. Giá trị hiện tại của data-has_image
data-show_product_title Ghi đè dù có hiển thị tiêu đề sản phẩm hay không. Có thể true (đúng) hoặc false (sai). Giá trị hiện tại của data-has_image
data-buy_button_out_of_stock_text Văn bản xuất hiện khi một sản phẩm hết hàng. Hết hàng
data-buy_button_product_unavailable_text Văn bản xuất hiện khi một sản phẩm không khả dụng. Không khả dụng
data-product_title_color Mã thập lục phân của màu chữ trên tiêu đề sản phẩm, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. 000000

Chỉnh sửa giỏ hàng trang web

Nếu muốn thay đổi giao diện hoặc hành vi của giỏ hàng của trang web, bạn cần thêm một đoạn mã HTML riêng, rồi chỉnh sửa các thuộc tính. Mỗi thuộc tính kiểm soát một phần khác nhau của giỏ hàng như hình thức hoặc hoạt động.

Cách chỉnh sửa giỏ hàng của trang web:

  1. Mở HTML của trang chứa giỏ hàng bạn muốn trình sửa.

  2. Dán mã sau:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. Thay thế your-shop-name.myshopify.com bằng địa chỉ myshopify.com của cửa hàng.

  2. Thêm thuộc tính phù hợp vào thẻ div chính của giỏ hàng và thay đổi để đưa vào giá trị bạn muốn. Ví dụ: Nếu bạn muốn thay đổi văn bản xuất hiện ở trên cùng của giỏ hàng, bạn cần thêm data-cart_title="your text" vào thẻ div chính trong đoạn mã. Kết quả sẽ trông thế này:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. Khi bạn hoàn tất, lưu thay đổi.

Thuộc tính giỏ hàng

Có nhiều thuộc tính bạn có thể sử dụng để tùy chỉnh giỏ hàng của trang web:

Thuộc tính tùy chỉnh giỏ hàng
Thuộc tính Giá trị Mặc định
data-shop Miền myshopify có liên quan (ví dụ như cuahang.myshopify.com ). Miền Shopify của bạn
data-embed_type Phân biệt giữa mã nhúng dành cho Nút Mua, bộ sưu tập tích hợp và giỏ hàng tích hợp. Các giá trị khả dụng là product, cart và collection. giỏ hàng
data-checkout_button_text Văn bản hiển thị trên nút dẫn đến trang thanh toán từ trong giỏ hàng (không phải nút giỏ hàng). Thanh toán
data-button_text_color Mã thập lục phân của màu chữ trên nút giỏ hàng, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. ffffff
data-button_background_color Mã thập lục phân của màu nút giỏ hàng, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. 7db461
data-background_color Màu nền của khu vực xung quanh giỏ hàng tích hợp. Đó có thể là mã thập lục phân (theo quy tắc trên) hoặc trong suốt. Nếu trong suốt, lớp đệm không được áp dụng cho nội dung tích hợp. trong suốt
data-text_color Mã thập lục phân của màu chữ trên nút giỏ hàng, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. 000000
data-accent_color Mã thập lục phân của màu đường viền quanh giỏ hàng, không có #. Có thể là ba hoặc sáu ký tự thập lục phân. 000000
data-cart_title Văn bản xuất hiện ở trên cùng của giỏ hàng tích hợp khi mở trên trang. Giỏ hàng của bạn
data-cart_total_text Văn bản xuất hiện bên cạnh tổng số tiền trong giỏ hàng tích hợp. Tổng
data-discount_notice_text Thông báo giảm giá xuất hiện trong giỏ hàng tích hợp. Mã vận chuyển và mã giảm giá được thêm vào trang thanh toán.
data-sticky Cho biết nút này có hiển thị vị trí đặt trong mục đánh dấu hoặc đính bên cạnh của trang hay không. Giỏ hàng tích hợp được tạo gần đây có thuộc tính này được đặt thành true trong đầu ra mã nhúng. false
data-empty_cart_text Văn bản xuất hiện nếu giỏ hàng trống. Giỏ hàng của bạn đang trống
data-next_page_button_text Văn bản xuất hiện trên nút Next page (Trang tiếp theo) trong bộ sưu tập tích hợp. Trang sau

Chỉnh sửa bộ sưu tập tích hợp

Mã nhúng cho bộ sưu tập tích hợp bao gồm hai yếu tố div. div đầu tiên chứa mã cho giỏ hàng tích hợp và div thứ hai chứa mã cho Nút Mua tích hợp, quy định hình thức nút cửa sổ hộp thoại cho mỗi sản phẩm trong bộ sưu tập.

Yếu tố div thứ hai cũng bao gồm các thuộc tính sau:

Định nghĩa thuật ngữ thuộc tính trong mã Nút Mua
Thuộc tính Giá trị Mặc định
data-collection_handle Mã điều khiển của bộ sưu tập nổi bật dựa trên tiêu đề của bộ sưu tập. Mỗi bộ sưu tập đều có mã điều khiển riêng trong Shopify. Mã điều khiển của bộ sưu tập nổi bật
data-embed_type Phân biệt giữa mã nhúng dành cho Nút Mua, bộ sưu tập tích hợp và giỏ hàng tích hợp. Các giá trị khả dụng là product, cart và collection. bộ sưu tập

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí