Thêm mã Nút Mua vào HTML

Sau khi tạo Nút Mua trong trang quản trị Shopify, bạn đã sẵn sàng thêm vào trang web hoặc blog của mình.

Quá trình thêm mã nhúng vào HTML nguồn của trang web hơi khác nhau, tùy thuộc vào cách thức và vị trí bạn muốn hiển thị Nút Mua và giỏ hàng, trên nền tảng đăng và đôi khi là chủ đề bạn đang sử dụng trên nền tảng đó.

Lưu ý: Nếu bạn cần trợ giúp khi thêm mã nhúng để đăng nền tảng bên ngoài Shopify (ví dụ như các blog Squarespace hoặc WordPress.org), hãy liên hệ trực tiếp với nhà cung cấp trang web hoặc nền tảng đăng để được hỗ trợ.

Thêm mã nhúng vào blog WordPress.org

Bạn có thể thêm mã nhúng vào từng bài đăng và vào menu trên trang chủ của blog WordPress.org.

Lưu ý: Nút Mua nhúng tương thích với nền tảng WordPress.org nhưng không tương thích với WordPress.com. Tài liệu này mô tả WordPress 4.2.2. Phiên bản của bạn có thể khác. Bạn có thể tìm hiểu thêm về các phiên bản WordPress trên trang web hỗ trợ của WordPress.

Thêm mã nhúng vào bài đăng WordPress

  1. Trong Shopify, tạo Nút Mua và sao chép mã nhúng từ hộp thoại Embed Code (Mã nhúng) (hoặc nhấp vào Copy embed code to clipboard (Sao chép mã nhúng vào khay nhớ tạm).
  2. Trong bảng quản lý WordPress, vào bài đăng.
  3. Tạo một bài đăng mới hoặc chỉnh sửa bài đăng hiện có mà bạn muốn hiển thị Nút Mua.
  4. Tùy thuộc vào phiên bản WordPress bạn đang sử dụng, bạn cần hoàn tất một trong các bước sau:

    • Trong bài đăng, thay đổi trình chỉnh sửa văn bản từ chế độ Visual (Hình ảnh) thành chế độ Text (Văn bản).
    • Trong trình chỉnh sửa khối dựng, nhấp vào nút +, tìm kiếm Custom HTML, rồi nhấp vào Custom HTML (HTML tùy chỉnh).
  5. Dán mã nhúng vào trường văn bản ở nơi bạn muốn hiển thị Nút Mua hoặc bộ sưu tập.

  6. Khi hoàn tất, nhấp vào Save Draft (Lưu bản nháp), Preview (Xem trước) hoặc Publish (Đăng).

Thêm mã nhúng vào menu WordPress

Các bước thực hiện:

  1. Trong WordPress dashboard (Bảng quản lý WordPress), nhấp vào Appearance (Hình thức).
  2. Nhấp vào Customize (Tùy chỉnh) để mở trình biên tập chủ đề, rồi nhấp vào Widgets (Tiện ích).
  3. Nhấp vào tên của khu vực bạn muốn thêm Nút Mua hoặc mã giỏ hàng tùy chỉnh.
  4. Mở một tiện ích Text (Văn bản) hiện có hoặc nhấp vào Add a widget (Thêm một tiện ích), rồi nhấp vào Text (Văn bản).
  5. Dán mã nhúng vào trường văn bản chính trong phần tiện ích*Text* (Văn bản).
  6. Lưu thay đổi.

Lưu ý: Nếu bạn muốn thay đổi hành vi hoặc hình thức của giỏ hàng trên trang web, bạn có thể thêm mã giỏ hàng tùy chỉnh vào menu trên trang chủ của blog WordPress.org.

Thêm mã nhúng vào blog Shopify của bạn

Lưu ý: Nút Mua sẽ tạo một giỏ hàng riêng. Nếu khách hàng chuyển đến một trang khác trong cửa hàng trực tuyến, mặt hàng đó sẽ không còn xuất hiện trong giỏ hàng. Bạn có thể chỉnh sửa Nút Mua để đến thẳng trang Thanh toán.

Các bước thực hiện:

  1. Trong trang Bài viết blog, nhấp vào tiêu đề của bài viết blog mà bạn muốn chỉnh sửa hoặc nhấp vào Add blog post (Thêm bài viết blog) để tạo bài viết mới. 4. Trong mục Write your blog post (Viết bài viết blog), nhấp vào Show HTML (Hiển thị HTML) trong trình biên tập văn bản đa dạng thức. 5. Dán mã nhúng vào trường văn bản chính. 6. Nhấp vào Save (Lưu).

Thêm mã nhúng vào Squarespace

Chú ý: Một số tùy chỉnh nâng cao trên Squarespace phụ thuộc vào chủ đề cụ thể. Shopify không hỗ trợ các tùy chỉnh này.

Bạn có thể thêm mã nhúng vào các bài đăng cá nhân trong Squarespace và vào menu trên trang chủ của bạn. Trong một số trường hợp, bạn có thể muốn thêm mã nhúng vào cả hai. Ví dụ: Bạn có thể nhúng một giỏ hàng trên trang chủ để nhận giao dịch mua từ Nút Mua mà bạn nhúng vào các bài đăng riêng lẻ.

Các bước thực hiện:

  1. Trong bảng quản lý của Squarespace, mở trang web bạn muốn thêm mã nhúng.
  2. Tìm yếu tố trên trang bạn muốn hiển thị Nút Mua hoặc giỏ hàng tích hợp, di chuyển con trỏ trên khu vực Page Content (Nội dung trang), rồi nhấp vào Edit (Chỉnh sửa).
  3. Nhấp vào điểm chèn mà bạn muốn thêm mã nhúng.
  4. Trong mục More (Thêm) của hộp thoại Content Blocks (Khối nội dung), nhấp vào Code (Mã).
  5. Trong trang quản trị Shopify, sao chép mã nhúng từ hộp thoại Embed Code (Mã nhúng).
  6. Từ bảng quản lý Squarespace, dán mã nhúng vào hộp thoại CODE (MÃ). Đảm bảo rằng trường văn bản được đặt để nhận HTML.
  7. Nhấp vào APPLY (ÁP DỤNG) trên hộp thoại EDIT CODE (CHỈNH SỬA MÃ).
  8. Nhấp lại vào SAVE (LƯU) trên trình chỉnh sửa trang. Do Squarespace vô hiệu hóa JavaScript trong bảng quản lý, bạn cần xem trước riêng trang của mình để xem Nút Mua hoặc giỏ hàng tích hợp bạn đã thêm vào trang.

Nếu bạn hoàn thành các bước và Nút Mua của bạn không tải được, bạn có thể cần tắt tính năng tải Ajax. Để xem thêm thông tin chi tiết, tham khảo Bật hoặc tắt Ajax.

Lưu ý: Nếu bạn thêm một giỏ hàng tích hợp vào menu trên trang chủ Squarespace Trang chủ, giỏ hàng đó sẽ nhận được đơn hàng từ Nút Mua mà bạn nhúng vào các bài đăng riêng lẻ.

Thêm mã nhúng vào Wix

Sau khi tạo Nút Mua hoặc bộ sưu tập trong trang quản trị Shopify, bạn có thể thêm vào trang web Wix bằng cách sử dụng trình biên tập trang web Wix.

Chú ý: Nếu bạn muốn nhúng Nút Mua vào nhiều sản phẩm hoặc bộ sưu tập, bạn cần chỉnh sửa mã nhúng trước khi thêm vào tiện ích mã HTML Wix. Nếu bạn nhúng nhiều Nút Mua vào trang web Wix mà không chỉnh sửa mã nhúng, khách hàng cố gắng mua nhiều hơn một sản phẩm sẽ thấy một giỏ hàng riêng cho từng sản phẩm.

Nếu bạn muốn hiển thị nhiều sản phẩm trên trang web Wix mà không chỉnh sửa mã nhúng, bạn có thể nhúng bộ sưu tập. Bạn có thể tạo bộ sưu tập mới trong trang quản trị Shopify để tìm sản phẩm bạn muốn hiển thị trên Wix.

Các bước thực hiện:

  1. Trong trang quản trị Shopify, tạo Nút Mua cho sản phẩm hoặc bộ sưu tập, rồi sao chép mã nhúng.

Lưu ý: Khi bạn tạo Nút Mua cho trang web Wix, bạn không thể sử dụng tùy chọn Redirect in the same tab (Chuyển hướng trong cùng một tab) do các hạn chế của Wix.

  1. Từ tài khoản Wix, tìm trang web bạn muốn chỉnh sửa trong mục My Sites (Trang web của tôi), rồi nhấp vào Edit Site (Chỉnh sửa trang web).
  2. Trong trình biên tập trang web Wix, nhấp vào nút +, rồi nhấp vào More (Thêm).
  3. Nhấp vào HTML Code (Mã HTML) để thêm tiện ích mã HTML vào trang.
  4. Nhấp vào Enter Code (Nhập mã).
  5. Trên hộp thoại HTML Settings (Cài đặt HTML), dán mã nhúng cho Nút Mua hoặc bộ sưu tập trong trường Add your code here (Thêm mã của bạn ở đây), rồi nhấp vào Update (Cập nhật).
  6. Thay đổi kích cỡ tiện ích mã HTML để phù hợp với nội dung. Nếu bạn đang tạo mã nhúng với giỏ hàng, hãy đảm bảo tab Giỏ hàng sẽ xuất hiện đúng chỗ.
  7. Khi hoàn tất, nhấp vào Save (Lưu).

Nhúng nhiều sản phẩm hoặc bộ sưu tập

Các bước thực hiện:

  1. Trong trang quản trị Shopify, tạo Nút Mua cho sản phẩm hoặc bộ sưu tập, rồi sao chép mã nhúng.
  2. Dán mã vào trình chỉnh sửa mã hoặc trình dựng trang web Wix. Lặp lại hai bước đầu tiên cho đến khi bạn tạo được Nút Mua bạn cần.
  3. Chỉnh sửa để đảm bảo mã nhúng hiển thị với căn chỉnh phù hợp.
  4. Từ tài khoản Wix, tìm trang web bạn muốn chỉnh sửa trong mục My Sites (Trang web của tôi), rồi nhấp vào Edit Site (Chỉnh sửa trang web).
  5. Trong trình biên tập trang web Wix, nhấp vào nút +, rồi nhấp vào More (Thêm).
  6. Nhấp vào HTML Code (Mã HTML) để thêm tiện ích mã HTML vào trang.
  7. Nhấp vào Enter Code (Nhập mã).
  8. Trong hộp thoại HTML Settings (Cài đặt HTML), dán mã đã chỉnh sửa cho Nút Mua vào trường Add your code here (Thêm mã tại đây), rồi nhấp vào Update (Cập nhật).
  9. Thay đổi kích cỡ tiện ích mã HTML để phù hợp với nội dung. Nếu bạn đang tạo mã nhúng với giỏ hàng, hãy đảm bảo tab Giỏ hàng sẽ xuất hiện đúng chỗ.
  10. Khi hoàn tất, nhấp vào Save (Lưu).

Lưu ý: Bạn cần trợ giúp khi sử dụng Wix Editor? Liên hệ với Bộ phận hỗ trợ của Wix.

Thêm thẻ tập lệnh riêng

Một số nền tảng (như bỏ Unbounce) yêu cầu bạn dán thẻ <script> của mã nhúng vào đầu trang và phần còn lại của mã nhúng vào trang bạn muốn hiển thị Nút Mua.

Các bước thực hiện:

  1. Từ mã nhúng được tạo khi bạn tạo Nút Mua, sao chép cả yếu tố <div> và yếu tố <script>. Ví dụ:
<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>
  1. Mở đầu trang của trang web bạn muốn nhúng Nút Mua.

  2. Dán toàn bộ yếu tố <script> vào đầu trang.

  3. Lưu thay đổi.

  4. Trong mã nhúng ban đầu trong trang quản trị Shopify, chỉ sao chép yếu tố <div>. Ví dụ:

<div id='product-component-2dd3c8704e6'></div>
  1. Mở trang trên trang web bạn muốn nhúng Nút Mua.

  2. Dán đoạn mã <div> vào trang.

  3. Lưu thay đổi.

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

Dùng thử miễn phí