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

หมายเหตุ

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

หมายเหตุ

การปรับแต่งนี้เฉพาะกับธีมเก่าของ Shopify และไม่สามารถใช้ได้กับธีม Online Store 2.0

• ค้นหาธีมของคุณในเวอร์ชันสถาปัตยกรรม
• สำรวจการปรับแต่งธีม Online Store 2.0

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

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

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

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

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

---

Sectioned themes

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

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

Narrative

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

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

เดสก์ท็อป

1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

Android

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

1. ในไดเรกทอรีเทมเพลต ให้คลิก “เพิ่มเทมเพลตใหม่”

2. สร้างเทมเพลตสินค้า:

   • จากเมนูดรอปดาวน์ ให้เลือกสินค้า
   • ตั้งชื่อเทมเพลต requires-contact
   • คลิกที่สร้างเทมเพลต

3. ค้นหาโค้ดต่อไปนี้:

{% section 'product-template' %}

แทนที่ด้วย:

{% section 'product-template-requires-contact' %}

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

1. คลิกที่ “บันทึก”

สร้างส่วนสินค้าใหม่

1. ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”

2. สร้างส่วน:

   1. ตั้งชื่อส่วน product-template-requires-contact ใหม่
   2. คลิกที่ “สร้างส่วน”

3. ลบโค้ดเริ่มต้นทั้งหมดในไฟล์ส่วนเพื่อให้ไฟล์ว่างเปล่า

4. ในไดเรกทอรีส่วน ให้คลิกที่ product-template.liquid แล้วคัดลอกเนื้อหาทั้งหมดของไฟล์ไปยังคลิปบอร์ดของคุณ

5. กลับไปยังส่วน product-template-requires-contact.liquid ใหม่ แล้ววางโค้ดลงในไฟล์

6. คลิกที่ “บันทึก”

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

1. ในไฟล์ส่วน product-template-requires-contact.liquid ให้ค้นหาโค้ด HTML สำหรับแบบฟอร์มสินค้าในหน้าสินค้าของคุณ คุณสามารถพบโค้ดดังกล่าวได้ด้วยการค้นหาคำว่า form ภายในไฟล์

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

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

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. คลิกที่ “บันทึก”

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

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

ลิงก์อีเมล

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

1. ในบรรทัดด้านล่างแท็ก Liquid {% endcomment %} ที่คุณเพิ่มไปในขั้นตอนสุดท้าย ให้เพิ่มโค้ด HTML สำหรับลิงก์อีเมล:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. คลิกที่ “บันทึก”

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

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

1. ในไดเรกทอรีเทมเพลตให้คลิก page.contact.liquid.
2. ค้นหาแท็ก Liquid {% form 'contact' %} ในไฟล์
3. คัดลอกโค้ดทั้งหมดจากแท็ก Liquid {% form 'contact' %} ไปยังแท็ก Liquid {% endform %} โดยใส่แท็กแบบฟอร์ม Liquid ในโค้ดที่คุณคัดลอก
4. กลับไปที่ไฟล์ product.requires-contact.liquid ใหม่ของคุณในไดเรกทอรีเทมเพลต

ในบรรทัดใหม่ด้านล่างแท็ก Liquid {% endcomment %} ที่คุณเพิ่ม ให้วางโค้ดสำหรับแบบฟอร์มการติดต่อ

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

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

<div class="form-vertical">

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

</div>

1. คลิกที่ “บันทึก”

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

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

1. จากส่วน Shopify admin ให้ไปที่ สินค้า

2. คลิกที่ชื่อของสินค้าที่คุณต้องการซ่อนปุ่มเพิ่มลงในตะกร้าสินค้า

3. ในหน้าสินค้าของส่วน Shopify admin ใต้ส่วนร้านค้าออนไลน์ ให้เลือกเทมเพลตที่ต้องมีการติดต่อรายการใหม่จากเมนูดรอปดาวน์เทมเพลตธีม

4. คลิกที่ “บันทึก”

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

Other

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

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

เดสก์ท็อป

1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

Android

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

1. ในไดเรกทอรีเทมเพลต ให้คลิก “เพิ่มเทมเพลตใหม่”

2. สร้างเทมเพลตสินค้า:

   • จากเมนูดรอปดาวน์ ให้เลือกสินค้า
   • ตั้งชื่อเทมเพลต requires-contact
   • คลิกที่สร้างเทมเพลต

3. ค้นหาโค้ดต่อไปนี้:

{% section 'product-template' %}

แทนที่ด้วย:

{% section 'product-template-requires-contact' %}

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

1. คลิกที่ “บันทึก”

สร้างส่วนสินค้าใหม่

1. ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”

2. สร้างส่วน:

   1. ตั้งชื่อส่วน product-template-requires-contact ใหม่
   2. คลิกที่ “สร้างส่วน”

3. ลบโค้ดเริ่มต้นทั้งหมดในไฟล์ส่วนเพื่อให้ไฟล์ว่างเปล่า

4. ในไดเรกทอรีส่วน ให้คลิกที่ product-template.liquid แล้วคัดลอกเนื้อหาทั้งหมดของไฟล์ไปยังคลิปบอร์ดของคุณ

5. กลับไปยังส่วน product-template-requires-contact.liquid ใหม่ แล้ววางโค้ดลงในไฟล์

6. คลิกที่ “บันทึก”

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

1. ในไฟล์ส่วน product-template-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-formcart-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-formcart-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 %}

ข้อควรระวัง

โปรดตรวจสอบให้แน่ใจว่าคุณไม่ได้แสดงความคิดเห็นนอกแท็ก <form> สำหรับหน้าสินค้าของคุณ แท็กความคิดเห็นของคุณไม่ควรล้อมรอบแท็ก <form> หรือ </form> มิฉะนั้นลูกค้าอาจพบข้อผิดพลาดขณะกำลังดูหน้าสินค้าของคุณ

1. คลิกที่ “บันทึก”

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

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

ลิงก์อีเมล

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

1. ในบรรทัดด้านล่างแท็ก Liquid {% endcomment %} ที่คุณเพิ่มไปในขั้นตอนสุดท้าย ให้เพิ่มโค้ด HTML สำหรับลิงก์อีเมล:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. คลิกที่ “บันทึก”

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

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

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

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

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

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

</div>

1. คลิกที่ “บันทึก”

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

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

1. จากส่วน Shopify admin ให้ไปที่ สินค้า

2. คลิกที่ชื่อของสินค้าที่คุณต้องการซ่อนปุ่มเพิ่มลงในตะกร้าสินค้า

3. ในหน้าสินค้าของส่วน Shopify admin ใต้ส่วนร้านค้าออนไลน์ ให้เลือกเทมเพลตที่ต้องมีการติดต่อรายการใหม่จากเมนูดรอปดาวน์เทมเพลตธีม

4. คลิกที่ “บันทึก”

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

Non-sectioned themes

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

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

เดสก์ท็อป

1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

Android

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก การดำเนินการ > แก้ไขโค้ด

1. ในไดเรกทอรีเทมเพลต ให้คลิก “เพิ่มเทมเพลตใหม่”
2. สร้างเทมเพลตสินค้า:
   • จากเมนูดรอปดาวน์ ให้เลือกสินค้า
   • ตั้งชื่อเทมเพลต 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 %}

ข้อควรระวัง

โปรดตรวจสอบให้แน่ใจว่าคุณไม่ได้แสดงความคิดเห็นนอกแท็ก <form> สำหรับหน้าสินค้าของคุณ แท็กความคิดเห็นของคุณไม่ควรล้อมรอบแท็ก <form> หรือ </form> มิฉะนั้นลูกค้าอาจพบข้อผิดพลาดขณะกำลังดูหน้าสินค้าของคุณ

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 admin ใต้ส่วนร้านค้าออนไลน์ ให้เลือกเทมเพลตที่ต้องมีการติดต่อรายการใหม่จากเมนูดรอปดาวน์เทมเพลตธีม
4. คลิกที่ “บันทึก”

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