ซ่อนปุ่ม “เพิ่มลงในตะกร้าสินค้า”
คุณสามารถซ่อนปุ่มเพิ่มลงในตะกร้าสินค้าบนหน้าร้านของคุณและเปิดเผยอีกครั้งในอนาคตได้
ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน
หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้
หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน
หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์
product-template.liquid
ของคุณ ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้
โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <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 %}
การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง
จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:
{% 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 %}
- คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ
เมื่อคุณพร้อมที่จะแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปยังไฟล์ product-template.liquid
ในหน้าแก้ไข HTML/CSS จากนั้นให้ลบแท็ก {% comment %}
และ {% endcomment %}
แล้วคลิกที่ “บันทึก”
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์
product-template.liquid
ของคุณ ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้
โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <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 %}
การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง
จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:
{% 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 %}
- คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ
เมื่อคุณพร้อมที่จะแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปยังไฟล์ product-template.liquid
ในหน้าแก้ไข HTML/CSS จากนั้นให้ลบแท็ก {% comment %}
และ {% endcomment %}
แล้วคลิกที่ “บันทึก”
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์
product-template.liquid
ของคุณ ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้
โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <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 %}
การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง
จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:
{% 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 %}
- คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ
เมื่อคุณพร้อมที่จะแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปยังไฟล์ product-template.liquid
ในหน้าแก้ไข HTML/CSS จากนั้นให้ลบแท็ก {% comment %}
และ {% endcomment %}
แล้วคลิกที่ “บันทึก”
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีเทมเพลต ให้คลิกเพื่อเปิดไฟล์
product.liquid
ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้
โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <input>
หรือ <button>
ที่มีข้อความ Add to cart
AddToCart
หรือ add-to-cart
ในธีม Minimal โค้ดของปุ่มเพิ่มลงในตะกร้าสินค้าจะมีลักษณะดังนี้:
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
- เมื่อคุณหาโค้ดพบ ให้รวมโค้ดดังกล่าวไว้ในแท็ก Liquid
{% comment %}
และ{% endcomment %}
การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง
จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:
{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
- คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ
เมื่อคุณพร้อมแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปที่เทมเพลต product.liquid
ของคุณในหน้าแก้ไข HTML/CSS จากนั้นลบแท็ก {% comment %}
และ {% endcomment %}
ออก แล้วคลิก “บันทึก”
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีเทมเพลต ให้คลิกเพื่อเปิดไฟล์
product.liquid
ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้
โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <input>
หรือ <button>
ที่มีข้อความ Add to cart
AddToCart
หรือ add-to-cart
ในธีม Minimal โค้ดของปุ่มเพิ่มลงในตะกร้าสินค้าจะมีลักษณะดังนี้:
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
- เมื่อคุณหาโค้ดพบ ให้รวมโค้ดดังกล่าวไว้ในแท็ก Liquid
{% comment %}
และ{% endcomment %}
การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง
จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:
{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
- คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ
เมื่อคุณพร้อมแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปที่เทมเพลต product.liquid
ของคุณในหน้าแก้ไข HTML/CSS จากนั้นลบแท็ก {% comment %}
และ {% endcomment %}
ออก แล้วคลิก “บันทึก”
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีเทมเพลต ให้คลิกเพื่อเปิดไฟล์
product.liquid
ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้
โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <input>
หรือ <button>
ที่มีข้อความ Add to cart
AddToCart
หรือ add-to-cart
ในธีม Minimal โค้ดของปุ่มเพิ่มลงในตะกร้าสินค้าจะมีลักษณะดังนี้:
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
- เมื่อคุณหาโค้ดพบ ให้รวมโค้ดดังกล่าวไว้ในแท็ก Liquid
{% comment %}
และ{% endcomment %}
การดำเนินการนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่จะทำให้คุณสามารถใส่โค้ดดังกล่าวอีกครั้งได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง
จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:
{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
- คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ
เมื่อคุณพร้อมแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปที่เทมเพลต product.liquid
ของคุณในหน้าแก้ไข HTML/CSS จากนั้นลบแท็ก {% comment %}
และ {% endcomment %}
ออก แล้วคลิก “บันทึก”