Sunday, 22 Apr 2018
Hướng dẫn Shopify

Hướng dẫn Shopify – Những kỹ thuật nâng cao

Hướng dẫn Shopify – Những kỹ thuật nâng cao
3.9 (77.14%) 7 votes

Trong bài hướng dẫn này, Duyalex sẽ hướng dẫn bạn những kỹ thuật chuyên cao hơn nhằm chỉnh sửa sâu vào hệ thống của Shopify.

Đăng ký Shopify miễn phí

Bài viết sẽ được cập nhật liên tục để bạn dễ theo dõi.

1. Cách thay đổi dòng chữ “Powered by Shopify”

– Để sửa được phần này, các bạn phải sửa Code trong phần HTML/CSS:

powered shopify
Chỉnh sửa Html trong Shopify

– Tại danh sách bên trái, bạn tìm đến mục Footer.liquid. Sau đó tìm đến dòng lệnh {{powered_by_link}}, bạn hãy xóa nó đi và thay vào dòng chữ mà bạn muốn. Ví dụ như: Powered by Duyalex

Thay doi Powered by Shopify
Thay dòng chữ Powered by Shopify

2. Cách tạo “trust seal” cho Shopify

Đây là thủ thuật nhằm tạo ra sự yên tâm đối với khách hàng khi mua sản phẩm trên trang web của bạn bằng cách chèn các biểu tượng bào mật. Trust seal thông thường được thể hiện ở trang chủ và trang  chi tiết về sản phẩm.

  • Trust seal trong trang chủ:

Trong trang chủ chúng ta có hai cách đó là cài đặt ứng dụngchèn thủ công:

– Cài đặt ứng dụng:

 Bạn vào App của Shopify và tìm kiếm và cài ứng dụng có tên McAfee SECURE. 

bieu tuong  McAfee SECURE
Biểu tượng của McAfee SECURE xuất hiện cuối trang

– Cài thủ công:

Các bạn vào Online store / Edit HTML/CSS / Sectionscart-template.liquid. Sau đó bạn chèn xuống dưới cùng một trong hai đoạn code sau:

<a href="//www.shopify.com/pci-compliant?utm_source=secure&amp;utm_medium=shop" title="This online store is secured by Shopify" target="_blank"><img src="//cdn.shopify.com/s/images/badges/shopify-secure-badge-light-shadow.png" alt="Shopify secure badge" /></a>
Mẫu xám
<a href="//www.shopify.com/pci-compliant/?utm_source=secure&amp;utm_medium=shop" title="This online store is secured by Shopify" target="_blank"><img src="//cdn.shopify.com/s/images/badges/shopify-secure-badge-dark-shadow.png" alt="Shopify secure badge" /></a>
Mẫu sẫm
  • Trust seal trong trang sản phẩm:

Tạo biểu tượng an toàn trong trang chi tiết sản phẩm cũng có hai cách; thủ côngsử dụng ứng dụng

– Chèn thủ công:

Các bạn vào Online store / Edit HTML/CSS / Sections / product-template.liquid

Sau đó các bạn chèn đoạn code sau vào những vị trí bạn muốn:

<img src=”đường_dẫn_hình_ảnh” alt=”payments securely processed”>

Bạn thay “đường_dẫn_hình_ảnh” bằng link đến mẫu mà bạn muốn thể hiện.

Tôi ví dụ 3 vị trí như hình sau:

chen-trust-seal
Chèn Trust seal

Vị trí số (1)

{% else %}
<option disabled=”disabled”>{{ variant.title }} – {{ ‘products.product.sold_out’ | t }}</option>
{% endif %}
{% endfor %}
</select>

<img src=”đường_dẫn_hình_ảnh” alt=”payments securely processed”>

Vị trí số (2)

<div class=”product-form__item product-form__item–submit”>
<button type=”submit” name=”add” id=”AddToCart-{{ section.id }}” {% unless current_variant.available %}disabled=”disabled”{% endunless %} class=”btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == ‘Default Title’ %} product-form__cart-submit–small{% endif %}”>
<span id=”AddToCartText-{{ section.id }}”>
{% unless current_variant.available %}
{{ ‘products.product.sold_out’ | t }}
{% else %}
{{ ‘products.product.add_to_cart’ | t }}
{% endunless %}
</span>
</button>
</div>
</form>

</div>

<img src=”đường_dẫn_hình_ảnh” alt=”payments securely processed”>

Vị trí số (3)

Dưới cùng

<img src=”đường_dẫn_hình_ảnh” alt=”payments securely processed”>

Một số mẫu Trust seal dành cho bạn:

Mẫu trust seal
Url: https://cdn.shopify.com/s/files/1/1596/4607/t/11/assets/cart_right_image.png?7922716106410343933

 

Mau trust seal
Url: https://cdn.shopify.com/s/files/1/1596/4607/t/11/assets/product_desc_below.png?7922716106410343933

– Sử dụng ứng dụng tạo Trust seal: Free Trust Badge by Hektor

Đây là ứng dụng miễn phí khá tuyệt vời và dễ sử dụng. Bạn cài đặt và tùy chỉnh theo ý thích cá nhân và lưu lại.

shopify
Ứng dụng tạo trust seal

 

tuy chinh vi tri bieu tuong
Tùy chỉnh vị trí các biểu tượng

>>Video hướng dẫn Trust seal: 

3. Xóa biểu tượng Paypal trong shopify

Nhiều bạn sẽ tự hỏi là tại sao lại phải xóa biểu tượng Paypal đi? Thực ra đây là một kinh nghiệm của cá nhân mình và nhiều người khác trong thời điểm hiện tại. Bạn hãy xem hình ảnh dưới đây.

Biểu tượng Paypal trong trang Checkout

Hiện tại Shopify vẫn chưa cho phép những tài khoản của Việt Nam được nhận tiền của khách hàng từ thẻ thanh toán mà phải thông qua các cổng thanh toán như Paypal, 2Checkout... Mặc dù Paypal đã trở nên rất phổ biến nhưng không phải khách hàng nào cũng có tài khoản hoặc họ không rảnh đến mức ngồi lập tài khoản xong rồi quay lại tiếp tục mua hàng trong khi thẻ thanh toán họ có trong tay.

Vậy cho nên tôi đã xóa biểu tượng này ở trang Checkout vì đã có rất nhiều khách hàng thoát ra từ bước này do họ nghĩ rằng trang web này chỉ nhận thanh toán qua Paypal mà thôi. Một khi người mua  được dẫn đến bước thanh toán rồi thì lúc này họ sẽ được đề xuất phương án nhập vào thẻ ngân hàng thông qua Paypal hoặc 2Checkout.

Để xóa biểu tượng này, các bạn vào: Online store / Actions / Edit HTML/CSS / Sections / cart-template.liquid

Bạn tìm đến dòng lệnh

{% if additional_checkout_buttons %}

       <div class=”additional-checkout-buttons”>{{ content_for_additional_checkout_buttons }}</div>

Sau đó bạn thêm vào như sau:

{% if additional_checkout_buttons %}

{% Comment %}

<div class=”additional-checkout-buttons”>{{ content_for_additional_checkout_buttons }}</div>

{% endcomment %}

Lưu lại và xem kết quả…

remove paypal icon
Kết quả sau khi xóa

4. Sửa kích thước nút Add to Cart trong theme Brooklyn

  • Bạn vào “product-template.liquid”
  • Tìm đến đoạn code: <button type=”submit” name=”add” id=”AddToCart–{{ section.id }}” class=”btn”{% unless product.available %} disabled=”disabled”{% endunless %}>
  • Thay toàn bộ hàng code trên bằng đoạn: <button type=“submit” name=“add” id=“AddToCart” class=“btn” style=” width: 356px; height: 72px; padding-bottom: 6px; padding-top: 6px; background-color: #CA4A49; letter-spacing: 0.1em; font-size: 36px; “{% unless product.available %} disabled=“disabled”{% endunless %}>
  • Thay đổi kích thước tùy ý ở width và height

…Còn tiếp

Chúc bạn thành công./.

[Tác giả]: Duyalex


  • Bài viết khác về Shopify:

Mọi thắc mắc bạn có thể trao đổi ở phần Bình luận hoặc tham gia vào Nhóm Hỗ Trợ trên Facebook: Nhóm hỗ trợ kinh doanh Online

dang-ki-shopify

5 Comments

  1. Hi Anh Duy, e đang làm theo hướng dẫn của a để bỏ nút Paypal sau khi ATC trong Shopify, nhưng khi sửa code xong ấn Save, Shopify thông báo error. Hi Anh Duy, e đang làm theo hướng dẫn của a để bỏ nút Paypal sau khi ATC trong Shopify, nhưng ko sửa được code như trong hình thông báo error. Rất mong được a hướng dẫn thêm. E cảm ơn ạ!

    Reply

Post Comment