แทนที่ “เพิ่มลงในตะกร้าสินค้า” ด้วยลิงก์การติดต่อ

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

ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน

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

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

หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ

ขั้นตอนต่างๆ สำหรับธีมที่แบ่งส่วน

เลือกธีมของคุณ

ขั้นตอนในการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับว่าคุณใช้ธีม Narrative หรือธีมฟรีอื่นๆ ที่สร้างโดย Shopify คลิกปุ่มสำหรับธีมของคุณก่อนปฏิบัติตามคําแนะนําด้านล่าง:

ขั้นตอนต่างๆ สำหรับธีมที่ไม่แบ่งส่วน

สร้างเทมเพลตสินค้าใหม่

หากต้องการแทนที่ปุ่มเพิ่มลงในตะกร้าสินค้าสำหรับสินค้า คุณจะต้องสร้างเทมเพลตสินค้าแบบกำหนดเองให้กับสินค้านั้น

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  3. ในไดเรกทอรีเทมเพลต ให้คลิก “เพิ่มเทมเพลตใหม่
  4. สร้างเทมเพลตสินค้า:
    • จากเมนูดรอปดาวน์ ให้เลือกสินค้า
    • ตั้งชื่อเทมเพลต requires-contact
    • คลิกที่สร้างเทมเพลต

ซ่อนปุ่มเพิ่มลงในตะกร้าสินค้า

  1. ในไฟล์ product.requires-contact.liquid ใหม่ของคุณ ให้ค้นหาโค้ด HTML ของปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถค้นหาคำว่า cart ได้

โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปในแต่ละธีม มองหาแท็ก <input> หรือ <button> ที่มีข้อความอย่าง Add to cart, AddToCart, หรือ add-to-cart

สำหรับธีม Debut โค้ดปุ่มเพิ่มลงในตะกร้าสินค้าจะมีลักษณะดังนี้:

<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>
  1. เมื่อคุณหาโค้ดพบ ให้รวมโค้ดดังกล่าวไว้ในแท็ก Liquid {% comment %} และ {% endcomment %} การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง

สำหรับ Debut โค้ดที่ได้รับการแก้ไขจะมีลักษณะดังนี้:

{% comment %}
<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>
{% endcomment %}
  1. คลิกที่ “บันทึก

เพิ่มลิงก์อีเมลหรือแบบฟอร์มการติดต่อ

ตอนนี้คุณได้ซ่อนปุ่มเพิ่มลงในตะกร้าสินค้าแล้ว คุณสามารถเพิ่มเนื้อหาที่คุณต้องการให้แสดงแทนได้

ลิงก์อีเมล

  1. ในบรรทัดด้านล่างแท็ก Liquid {% endcomment %} ที่คุณเพิ่มไปในขั้นตอนสุดท้าย ให้เพิ่มโค้ด HTML สำหรับลิงก์อีเมล:
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
  1. คลิกที่ “บันทึก

แบบฟอร์มการติดต่อ

คุณสามารถเพิ่มแบบฟอร์มการติดต่อไปยังเทมเพลตสินค้าใหม่ของคุณได้โดยการคัดลอกโค้ดจากเทมเพลตหน้าการติดต่อของธีม วิธีเพิ่มแบบฟอร์มการติดต่อ:

  1. ในไดเรกทอรีเทมเพลตให้คลิก page.contact.liquid.
  2. ค้นหาแท็ก Liquid {% form 'contact' %} ในไฟล์
  3. คัดลอกโค้ดทั้งหมดจากแท็ก Liquid {% form 'contact' %} ไปยังแท็ก Liquid {% endform %} โดยใส่แท็กแบบฟอร์ม Liquid ในโค้ดที่คุณคัดลอก
  4. กลับไปที่ไฟล์ product.requires-contact.liquid ใหม่ของคุณในไดเรกทอรีเทมเพลต
  5. ค้นหาแท็กปิด </form> ภายในไฟล์ดังกล่าว และวางโค้ดสำหรับแบบฟอร์มการติดต่อบนบรรทัดใหม่ด้านล่างของแท็กปิด </form>
  6. ขั้นตอนต่อไปคือการคลุมโค้ดที่คุณเพิ่งวางในแท็ก HTML div แอตทริบิวต์คลาสที่รวมอยู่ในโค้ดแท็ก div จะช่วยให้แน่ใจว่าแบบฟอร์มการติดต่อของคุณแสดงผลอย่างถูกต้องบนหน้า

ในบรรทัดใหม่ที่ด้านบน {% form 'contact' %} ให้วางโค้ดต่อไปนี้:

<div class="form-vertical"></div>

ในบรรทัดใหม่ด้านล่าง {% endform %} ให้วางโค้ดต่อไปนี้:

</div>
  1. คลิกที่ “บันทึก

กำหนดเทมเพลตใหม่ให้แก่สินค้า

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

  1. จากส่วนผู้ดูแลระบบ Shopify ของคุณ ให้ไปที่สินค้า
  2. คลิกที่ชื่อของสินค้าที่คุณต้องการซ่อนปุ่มเพิ่มลงในตะกร้าสินค้า
  3. ในหน้าสินค้าของส่วนผู้ดูแล Shopify ใต้ส่วนร้านค้าออนไลน์ ให้เลือกเทมเพลตที่ต้องมีการติดต่อรายการใหม่จากเมนูดรอปดาวน์เทมเพลตธีม
  4. คลิกที่ “บันทึก

ปฏิบัติขั้นตอนเหล่านี้ซ้ำกับสินค้าแต่ละรายการที่คุณต้องการเพิ่มเทมเพลตใหม่

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

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