เพิ่มลิงก์เลือกซื้อต่อไปยังตะกร้าสินค้าของคุณ

คุณสามารถเพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้าของคุณ ซึ่งจะช่วยให้ลูกค้าสามารถกลับไปเรียกดูสินค้าได้อย่างง่ายดายหลังจากเพิ่มสินค้าลงในตะกร้าสินค้าแล้ว คุณสามารถเลือกเพิ่มลิงก์ที่จะนำลูกค้ากลับไปยังหน้าแค็ตตาล็อก กลับไปยังหน้าแรก หรือกลับไปยังหน้าคอลเลกชันล่าสุดที่พวกเขาดูอยู่ได้

เลือกซื้อต่อ

เพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้าของคุณ

หากต้องการเพิ่มลิงก์เลือกซื้อต่อไปยังหน้าตะกร้าสินค้า:

  1. ในไดเรกทอรีส่วน ให้คลิก cart-template.liquid หากธีมของคุณไม่มีไฟล์นี้ ให้คลิก cart.liquid ในไดเรกทอรีเทมเพลต

  2. ค้นหาโค้ดสำหรับปุ่มการชำระเงินโดยค้นหาไฟล์ name="checkout" บรรทัดของโค้ดสำหรับปุ่มการชำระเงินจะแตกต่างกันไปตามแต่ละธีม แต่จะมีลักษณะดังนี้:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. ขั้นตอนต่อไปคือการวางบรรทัดโค้ดใหม่เพื่อสร้างลิงก์เลือกซื้อต่อ โดยโค้ดที่คุณวางจะขึ้นอยู่กับหน้าที่คุณต้องการลิงก์ไปยัง:

สำหรับลิงก์ที่เชื่อมไปยังหน้าแค็ตตาล็อกของคุณ

หากต้องการเพิ่มลิงก์ที่เชื่อมไปยังหน้าแค็ตตาล็อกของคุณ ให้วางโค้ดต่อไปนี้ในบรรทัดใหม่ก่อนหรือหลังโค้ดสำหรับปุ่มการชำระเงิน:

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

  2. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid

  3. ค้นหาแท็กปิด </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>
  1. คลิกที่บันทึก

เพิ่มรูปแบบปุ่ม (ไม่บังคับ)

หากคุณใช้ธีมฟรีของ 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>

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี