Cài nút thử đồ ảo trên Shopify

Ứng dụng Macgi cho Shopify đang được hoàn thiện. Trong lúc chờ, bạn dùng được widget ngay bằng một thẻ script trong theme. Tên menu dưới đây theo giao diện quản trị Shopify tiếng Anh.

Ứng dụng Shopify (sắp ra mắt)

Ứng dụng sẽ được cài từ Shopify App Store, thêm nút “Thử đồ” bằng khối giao diện (app block) mà không cần sửa mã, và cho bật tắt theo từng sản phẩm. Shop đăng ký beta sẽ được báo khi ứng dụng sẵn sàng. Khi chuyển sang ứng dụng, chỉ cần xoá thẻ script đã thêm theo cách dưới đây.

Cách tạm 1: script trong theme.liquid

1. Trong trang quản trị Shopify, vào Online Store → Themes.
2. Ở theme đang dùng, bấm nút ⋯ rồi chọn Edit code.
3. Trong thư mục layout, mở theme.liquid.

4. Tìm thẻ </body> và dán đoạn sau ngay phía trên nó:

   layout/theme.liquidSao chép

   <script src="https://cdn.macgi.app/widget.js"
           data-key="pk_live_..."
           data-auto
           defer></script>

5. Bấm Save, rồi mở một trang sản phẩm để kiểm tra nút “Thử đồ”.

Theme Shopify có sẵn dữ liệu sản phẩm và ảnh og:image, nên chế độ tự động thường nhận đúng trang và ảnh. Để quần, váy được thử đúng chỗ, thêm data-slot-rules (xem Bắt đầu nhanh).

Cách tạm 2: tự đặt nút bằng khối Custom Liquid

Cách này không cần sửa code của theme ngoài thẻ script, và cho bạn kéo nút tới đúng vị trí trên trang sản phẩm.

1. Thêm thẻ script vào theme.liquid như cách 1, nhưng không có data-auto:

   layout/theme.liquidSao chép

   <script src="https://cdn.macgi.app/widget.js" data-key="pk_live_..." defer></script>

2. Vào Online Store → Themes → Customize, chọn mẫu trang Products → Default product.
3. Trong phần thông tin sản phẩm, bấm Add block → Custom Liquid và kéo khối tới dưới nút “Add to cart”.

4. Dán đoạn sau vào ô Liquid của khối:

   Custom LiquidSao chép

   <button type="button" class="button button--secondary button--full-width" data-macgi-tryon
           data-garment-image="{{ product.featured_image | image_url: width: 1200 }}"
           data-garment-slot="{% if product.tags contains 'macgi-bottom' %}bottom{% elsif product.tags contains 'macgi-one-piece' %}one_piece{% else %}top{% endif %}"
           data-garment-description="{{ product.title | escape }}">
     Thử đồ
   </button>

   Gắn tag macgi-bottom cho quần, chân váy và macgi-one-piece cho váy liền, đầm. Bộ lọc image_url trả về đường dẫn bắt đầu bằng //; widget tự hiểu nên không cần thêm https:. Đổi lớp CSS của nút cho hợp với theme.

5. Bấm Save.

Lưu ý

• Tên miền: báo cả tên miền riêng lẫn tên miền .myshopify.com khi đăng ký, để khoá chạy trên cả hai.
• Đổi theme: thẻ script nằm trong theme, cần dán lại vào theme mới trước khi xuất bản.
• Tuỳ chọn, sự kiện JavaScript và xử lý sự cố: xem Bắt đầu nhanh.