เพิ่มลิงก์เลือกซื้อต่อไปยังตะกร้าสินค้าของคุณ
คุณสามารถเพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้าของคุณ ซึ่งจะช่วยให้ลูกค้าสามารถกลับไปเรียกดูสินค้าได้อย่างง่ายดายหลังจากเพิ่มสินค้าลงในตะกร้าสินค้าแล้ว คุณสามารถเลือกเพิ่มลิงก์ที่จะนำลูกค้ากลับไปยังหน้าแค็ตตาล็อก กลับไปยังหน้าแรก หรือกลับไปยังหน้าคอลเลกชันล่าสุดที่พวกเขาดูอยู่ได้
เพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้าของคุณ
หากต้องการเพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้า:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีส่วน ให้คลิก
cart-template.liquid
หากธีมของคุณไม่มีไฟล์นี้ ให้คลิกcart.liquid
ในไดเรกทอรีเทมเพลตค้นหาโค้ดสำหรับปุ่มการชำระเงินโดยค้นหาไฟล์
name="checkout"
บรรทัดของโค้ดสำหรับปุ่มการชำระเงินจะแตกต่างกันไปตามแต่ละธีม แต่จะมีลักษณะดังนี้:
<button type="submit" id="checkout" name="checkout" class="btn">
{{ 'cart.general.checkout' | t }}
</button>
- ขั้นตอนต่อไปคือการวางบรรทัดโค้ดใหม่เพื่อสร้างลิงก์เลือกซื้อต่อ โดยโค้ดที่คุณวางจะขึ้นอยู่กับหน้าที่คุณต้องการลิงก์ไปยัง:
<a href="/collections/all" title="Continue shopping">Continue shopping</a>
### For a link that goes to your home page
To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:
<a href="/" title="Continue shopping">Continue shopping</a>
### For a link that goes to the last collection viewed
To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:
<a
id="continue-shopping"
href=""
title="Continue shopping">
Continue shopping
</a>
คลิกที่ “บันทึก” ซึ่งถือว่าเป็นการเสร็จสิ้นการดำเนินการแล้วหากคุณเลือกเพิ่มลิงก์ที่เชื่อมไปยังหน้าแค็ตตาล็อกหรือหน้าแรกของคุณ แต่หากคุณเพิ่มลิงก์ที่เชื่อมไปยังคอลเลกชันล่าสุดที่ดู คุณจะต้องเพิ่ม JavaScript บางรายการไปยังโค้ดธีมของคุณ จากนั้นให้ดำเนินการตามขั้นตอนถัดไปต่อไป
ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquid
ค้นหาแท็กปิด
</body>
ใกล้กับด้านล่างของไฟล์ วางโค้ดดังต่อไปนี้เหนือแท็กปิด</body>
:
<script>
if(Storage !== undefined) {
var defaultLink = "/collections/all";
{% if template contains 'collection' %}
sessionStorage.collection = "{{ collection.url }}";
{% endif %}
{% if template contains 'cart' %}
if( !sessionStorage.collection ) {
sessionStorage.collection = defaultLink;
}
document.getElementById("continue-shopping").href = sessionStorage.collection;
{% endif %}
}
</script>
- คลิกที่ “บันทึก”
เพิ่มรูปแบบปุ่ม (ไม่บังคับ)
หากคุณใช้ธีมฟรีของ Shopify คุณสามารถใส่รูปแบบให้กับลิงก์เลือกซื้อต่อเพื่อให้ดูเหมือนปุ่มได้ เมื่อเพิ่มแอตทริบิวต์คลาสให้กับโค้ดสำหรับลิงก์ปุ่มของคุณ คุณจะสามารถทำให้ปุ่มของคุณมีสไตล์เหมือนกันกับปุ่มอื่นๆ ในธีมของคุณได้ ธีมฟรีของ Shopify ทั้งหมดใช้ชื่อคลาสเดียวกันสำหรับสไตล์ปุ่มหลัก และส่วนใหญ่ก็จะใช้ชื่อคลาสเดียวกันสำหรับสไตล์ปุ่มรองด้วย
หากต้องการนำการกำหนดสไตล์ปุ่มหลักไปใช้ในลิงก์เลือกซื้อต่อ:
เพิ่มแอตทริบิวต์ class="btn"
ไปยังบรรทัดของโค้ดที่คุณวางเพื่อเพิ่มลิงก์เลือกซื้อต่อ โค้ดของคุณควรมีลักษณะดังนี้:
<a href="/collections/all" title="Continue shopping" class="btn">
Continue shopping
</a>
วิธีใช้รูปแบบปุ่มรองกับลิงก์เลือกซื้อต่อของคุณ:
หมายเหตุ: การเพิ่มคลาสนี้จะไม่มีผลกับธีม Boundless
หากคุณใช้ธีมฟรีที่ไม่ใช่ธีม Supply ให้เพิ่มแอตทริบิวต์ class="btn--secondary"
ไปยังบรรทัดของโค้ดที่คุณวางเพื่อเพิ่มลิงก์เลือกซื้อต่อ โค้ดของคุณควรมีลักษณะดังนี้:
<a href="/collections/all" title="Continue shopping" class="btn--secondary">
Continue shopping
</a>
หากคุณใช้ธีม Supply ให้เพิ่มคุณลักษณะ class="btn-secondary"
ไปยังบรรทัดของโค้ดที่คุณวางไว้เพื่อเพิ่มลิงก์เลือกซื้อต่อ โค้ดของคุณควรจะมีลักษณะดังนี้:
<a href="/collections/all" title="Continue shopping" class="btn-secondary">
Continue shopping
</a>