เพิ่มลิงก์เลือกซื้อต่อไปยังตะกร้าสินค้าของคุณ
คุณสามารถเพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้าของคุณ ซึ่งจะช่วยให้ลูกค้าสามารถกลับไปเรียกดูสินค้าได้อย่างง่ายดายหลังจากเพิ่มสินค้าลงในตะกร้าสินค้าแล้ว คุณสามารถเลือกเพิ่มลิงก์ที่จะนำลูกค้ากลับไปยังหน้าแค็ตตาล็อก กลับไปยังหน้าแรก หรือกลับไปยังหน้าคอลเลกชันล่าสุดที่พวกเขาดูอยู่ได้
เพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้าของคุณ
หากต้องการเพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้า:
ในส่วน 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>สำหรับลิงก์ที่เชื่อมไปยังหน้าแรกของคุณ
หากต้องการเพิ่มลิงก์ที่เชื่อมไปยังหน้าแรกของคุณ ให้วางโค้ดดังต่อไปนี้บนบรรทัดใหม่ก่อนหรือหลังโค้ดสำหรับปุ่มการชำระเงิน:
<a href="/" title="Continue shopping">Continue shopping</a>สำหรับลิงก์ที่เชื่อมไปยังคอลเลกชันล่าสุดที่ดู
หากต้องการเพิ่มลิงก์ที่เชื่อมไปยังคอลเลกชันล่าสุดที่ดู ให้วางโค้ดต่อไปนี้ในบรรทัดใหม่ก่อนหรือหลังโค้ดสำหรับปุ่มการชำระเงิน:
<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>