~ 1 min read

วิธีการสร้างส่วนกำหนดเองใน Shopify.

How to Create a Custom Section in Shopify

สารบัญ

  1. บทนำ
  2. ทำความเข้าใจส่วนของ Shopify
  3. สร้างส่วนที่กำหนดเองใน Shopify
  4. แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างส่วนที่กำหนดเอง
  5. บทสรุป
  6. คำถามที่พบบ่อย

บทนำ

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

Sections ใน Shopify ช่วยให้ผู้ค้าแก้ไขและปรับปรุงร้านค้าออนไลน์ของตนได้โดยไม่ต้องมีความรู้ด้านการเขียนโค้ดมากนัก ด้วยการนำเสนอ Online Store 2.0 Shopify ได้มอบอำนาจให้ผู้ใช้สร้างและจัดการส่วนต่างๆ ได้อย่างมีประสิทธิภาพมากกว่าที่เคย บทความนี้มีเป้าหมายเพื่อแนะนำคุณผ่านกระบวนการสร้างส่วนที่กำหนดเองใน Shopify โดยเน้นคุณสมบัติและความสามารถที่ฟังก์ชันนี้มีให้

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

  • Shopify sections คืออะไรและมีความสำคัญอย่างไร
  • ประเภทต่างๆ ของ sections ที่มีอยู่
  • คู่มือทีละขั้นตอนในการสร้างส่วนที่กำหนดเองของคุณเอง
  • แนวทางปฏิบัติที่ดีที่สุดในการปรับปรุง sections ที่กำหนดเองของคุณ

มาร่วมกันเปิดประตูสู่ศักยภาพสูงสุดของร้าน Shopify ของคุณผ่านส่วนที่กำหนดเอง!

ทำความเข้าใจส่วนของ Shopify

ส่วนของ Shopify คืออะไร?

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

ความสำคัญของส่วนที่กำหนดเอง

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

ประเภทของ Shopify Sections

ใน Shopify ส่วนสามารถแบ่งออกได้เป็นสองประเภทหลัก:

  1. Sections หน้าแรก: ส่วนเหล่านี้เชื่อมโยงกับแม่แบบหน้าที่เฉพาะและมักจะมีองค์ประกอบพื้นฐานที่กำหนดเนื้อหาของหน้านั้นๆ ตัวอย่างเช่น หน้าแสดงสินค้าอาจมีส่วนหลักที่แสดงภาพผลิตภัณฑ์ คำอธิบาย และข้อมูลราคา

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

สร้างส่วนที่กำหนดเองใน Shopify

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

ขั้นตอนที่ 1: เข้าถึงแผงผู้ดูแลระบบ Shopify

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

ขั้นตอนที่ 2: ทำสำเนาธีมของคุณ

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

ขั้นตอนที่ 3: แก้ไขโค้ด

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

ขั้นตอนที่ 4: สร้างส่วนใหม่

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

ขั้นตอนที่ 5: เพิ่มโค้ด HTML และ Liquid

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

<div class="custom-collection-section">
  {% if product.available == false %}
    <p>สินค้านี้ไม่มีในสต็อกขณะนี้</p>
    <a href="https://www.amazon.com" title="ดูที่ Amazon" target="_blank">ดูที่ Amazon</a>
  {% else %}
    <p>สินค้านี้มีจำหน่าย!</p>
  {% endif %}
</div>

{% schema %}
{
  "name": "Custom Collection",
  "settings": [
    {
      "type": "text",
      "id": "amazon_link",
      "label": "ลิงก์ Amazon"
    }
  ]
}
{% endschema %}

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

ขั้นตอนที่ 6: เพิ่มส่วนลงในแม่แบบ

ตอนนี้ส่วนที่กำหนดของคุณพร้อมแล้ว คุณต้องเพิ่มลงในแม่แบบที่คุณต้องการให้ปรากฏ ตัวอย่างเช่น ถ้าต้องการให้มันอยู่บนหน้าผลิตภัณฑ์ ให้ไปที่ไดเร็กทอรี Templates ค้นหา product.json และรวมส่วนที่กำหนดของคุณด้วยบรรทัดต่อไปนี้:

{% section 'custom-collection' %}

ขั้นตอนที่ 7: ปรับแต่งส่วนของคุณ

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

ขั้นตอนที่ 8: บันทึกการเปลี่ยนแปลงของคุณ

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างส่วนที่กำหนดเอง

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

1. ทำให้เรียบง่าย

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

2. ปรับให้เหมาะกับมือถือ

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

3. ใช้ภาพที่มีคุณภาพสูง

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

4. ใช้คำกระตุ้นการตัดสินใจที่ชัดเจน

กระตุ้นการมีส่วนร่วมของผู้ใช้โดยการรวมคำกระตุ้นการตัดสินใจ (CTAs) ที่ชัดเจนในส่วนที่กำหนดของคุณ ไม่ว่าจะเป็นปุ่มเพื่อซื้อผลิตภัณฑ์หรือลิงก์เพื่อดูรายการเพิ่มเติม CTAs จะชี้แนะผู้ใช้ในสิ่งที่ต้องทำต่อไป

5. ทดสอบและปรับปรุง

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

บทสรุป

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

ที่ Praella เราชำนาญในด้านประสบการณ์ผู้ใช้ & การออกแบบ การพัฒนาเว็บ & แอพพลิเคชั่น และกลยุทธ์ การดำเนินการและการเติบโต หากคุณต้องการความช่วยเหลือในการสร้างส่วนที่กำหนดให้ยกระดับร้าน Shopify ของคุณ ทีมผู้เชี่ยวชาญของเราพร้อมให้ความช่วยเหลือ ร่วมกันเราสามารถนำวิสัยทัศน์ของคุณมาสู่ชีวิตและสร้างประสบการณ์ที่น่าจดจำให้กับลูกค้าของคุณ

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

คำถามที่พบบ่อย

Q: ฉันต้องการประสบการณ์การเขียนโค้ดในการสร้างส่วนที่กำหนดเองใน Shopify หรือไม่?
A: ถึงแม้จะมีความรู้ด้านการเขียนโค้ดบ้างจะเป็นประโยชน์ แต่ส่วนติดต่อผู้ใช้ที่ใช้งานง่ายของ Shopify ทำให้ผู้ค้าหลายรายสามารถสร้างส่วนที่กำหนดเองได้โดยไม่ต้องมีทักษะด้านโปรแกรมมิ่งมากนัก

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

Q: หากฉันพบปัญหาระหว่างการสร้างส่วนที่กำหนดเองจะทำอย่างไร?
A: หากคุณประสบปัญหา ลองติดต่อผู้เชี่ยวชาญด้าน Shopify หรือใช้ทรัพยากรที่มีอยู่ผ่านศูนย์ช่วยเหลือของ Shopify

Q: จะทำอย่างไรเพื่อให้แน่ใจว่าส่วนที่กำหนดของฉันเป็นมิตรกับ SEO?
A: ใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับ SEO เช่น การใช้คำหลักที่เกี่ยวข้อง ปรับแต่งข้อความ alt ของภาพ และมั่นใจในเวลาโหลดที่รวดเร็วสำหรับส่วนที่กำหนดของคุณ

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


Previous
วิธีสร้างหน้าที่กำหนดเองใน Shopify
Next
วิธีการสร้างร้านค้าเพื่อการพัฒนาใน Shopify