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

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

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

หมายเหตุ

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

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

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

ในหน้านี้

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

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

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

Narrative

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

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

ขั้นตอนมีดังนี้

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

{% section 'product-template' %}

แทนที่ด้วย:

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

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

แล้วคลิกที่บันทึก

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

ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”
สร้างส่วน:
1. ตั้งชื่อส่วน product-template-requires-contact ใหม่
2. คลิกที่ “สร้างส่วน”
ลบโค้ดเริ่มต้นทั้งหมดในไฟล์ส่วนเพื่อให้ไฟล์ว่างเปล่า
ในไดเรกทอรีส่วน ให้คลิกที่ product-template.liquid แล้วคัดลอกเนื้อหาทั้งหมดของไฟล์ไปยังคลิปบอร์ดของคุณ
กลับไปยังส่วน product-template-requires-contact.liquid ใหม่ แล้ววางโค้ดลงในไฟล์
แล้วคลิกที่บันทึก

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

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

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

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

แล้วคลิกที่บันทึก

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

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

ลิงก์อีเมล

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

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

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

แล้วคลิกที่บันทึก

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

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

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

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

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

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

<div class="form-vertical">

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

</div>

แล้วคลิกที่บันทึก

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

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

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

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

Other

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

ขั้นตอนมีดังนี้

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

{% section 'product-template' %}

แทนที่ด้วย:

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

แล้วคลิกที่บันทึก

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

ในไดเรกทอรีส่วน ให้คลิก “เพิ่มส่วนใหม่”
สร้างส่วน:
1. ตั้งชื่อส่วน product-template-requires-contact ใหม่
2. คลิกที่ “สร้างส่วน”
ลบโค้ดเริ่มต้นทั้งหมดในไฟล์ส่วนเพื่อให้ไฟล์ว่างเปล่า
ในไดเรกทอรีส่วน ให้คลิกที่ product-template.liquid แล้วคัดลอกเนื้อหาทั้งหมดของไฟล์ไปยังคลิปบอร์ดของคุณ
กลับไปยังส่วน product-template-requires-contact.liquid ใหม่ แล้ววางโค้ดลงในไฟล์
แล้วคลิกที่บันทึก

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

ในไฟล์ส่วน 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-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>

เมื่อคุณหาโค้ดพบแล้ว ให้นำโค้ดดังกล่าวไปใส่ไว้ในแท็ก 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 %}

แล้วคลิกที่บันทึก

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

ลิงก์อีเมล

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

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

แล้วคลิกที่บันทึก

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

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

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

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

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

</div>

แล้วคลิกที่บันทึก

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

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

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

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

ขั้นตอนมีดังนี้

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

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

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

เมื่อคุณหาโค้ดพบแล้ว ให้นำโค้ดดังกล่าวไปใส่ไว้ในแท็ก 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 %}

แล้วคลิกที่บันทึก

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

ลิงก์อีเมล

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

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

แล้วคลิกที่บันทึก

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

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

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

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

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

</div>

แล้วคลิกที่บันทึก

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

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