วิธีสร้างส่วนธีม Shopify แรกของคุณ

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

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

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

ส่วนธีมคืออะไร?

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

ภายในส่วนเหล่านี้ นักพัฒนาสามารถเข้าถึงประเภทการตั้งค่าต่างๆ ตั้งแต่การป้อนข้อความและเครื่องมือเลือกรูปภาพ ไปจนถึง HTML และเมนูที่กำหนดเอง ซึ่งผู้ค้าสามารถปรับแต่งได้จากเครื่องมือแก้ไขธีมและเติมเนื้อหาของพวกเขา

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

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

เทมเพลตและส่วนต่างๆ

หนึ่งในข้อกำหนดเบื้องต้นสำหรับการเรียนรู้วิธีการทำงานของส่วนต่างๆ ในธีม Shopify คือการทำความเข้าใจระบบเทมเพลตธีมของ Shopify ด้วย Online Store 2.0 หน้าแต่ละประเภทสามารถแสดงเป็นไฟล์ . .json ภายในไดเร็กทอรี /templates ของธีม นักพัฒนาสามารถจัดโครงสร้างหน้าแต่ละประเภทโดยกำหนดว่าส่วนใดจะปรากฏตามค่าเริ่มต้นในไฟล์เทมเพลต JSON เหล่านี้

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

ตัวอย่างพื้นฐานของไฟล์เทมเพลต product.json จะมีลักษณะดังนี้:

ในกรณีนี้ หน้าผลิตภัณฑ์จะแสดงด้วยส่วนที่เรียกว่า main-product.liquid และจะเป็นส่วนเดียวที่ปรากฏตามค่าเริ่มต้น เมื่อผู้ค้าปรับแต่งหน้านี้และเพิ่มส่วนเพิ่มเติมในหน้านั้น ไฟล์เทมเพลต product.json จะได้รับการอัปเดตด้วยข้อมูลนี้ เราจะสำรวจกระบวนการนี้เพิ่มเติมในบทความนี้ เมื่อเราดูวิธีการรวมส่วนต่างๆ ในเทมเพลต

พื้นฐานของส่วนต่างๆ

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

ส่วนหน้าหลัก

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

คุณสามารถเข้าถึงตัวแปร Liquid หรือออบเจกต์ภายในส่วน โดยขึ้นอยู่กับเทมเพลตของเพจที่มีส่วน ซึ่งหมายความว่าส่วนที่จะแสดงผลภายในเทมเพลต product.json จะสามารถเข้าถึงแอตทริบิวต์ใดๆ ของ product Liquid ออบเจกต์ ซึ่งเป็นตัวแทนของผลิตภัณฑ์ที่กำลังแสดงผลหน้า

ในทำนองเดียวกัน ส่วนที่รวมอยู่ในไฟล์ collection.json จะสามารถเข้าถึงแอตทริบิวต์ทั้งหมดของวัตถุ Liquid collection ทุกส่วน ไม่ว่าจะปรากฏที่ใด สามารถเข้าถึงออบเจกต์ส่วนกลางของ Liquid ได้

นอกจากมาร์กอัปและออบเจกต์ Liquid เฉพาะหน้าที่คุณจะเพิ่มลงในส่วนของหน้าหลักแล้ว คุณยังสามารถสร้างการตั้งค่าภายในแท็ก {% schema %} การตั้งค่าเหล่านี้สามารถอ้างอิงองค์ประกอบในส่วน และสามารถกำหนดค่าโดยผู้ค้าในตัวแก้ไขธีม

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

หากต้องการดูตัวอย่างส่วนของหน้าหลัก คุณสามารถสำรวจไฟล์ main-product.liquid ในไดเร็กทอรี /sections ของ Dawn หรือส่วนใดๆ ที่ขึ้นต้นด้วย main ในชื่อเรื่อง ตามกฎทั่วไป คุณควรตั้งชื่อส่วนของหน้าหลักด้วย main ในชื่อเรื่องด้วย เพื่อช่วยให้คุณแยกประเภทส่วนต่างๆ ของหน้าหลักได้

ส่วนโมดูลาร์

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

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

ตรงกันข้ามกับส่วนของหน้า "หลัก" โดยทั่วไปแล้วส่วนโมดูลาร์จะมีเนื้อหาและมาร์กอัปที่สามารถนำมาใช้ซ้ำได้กับหน้าประเภทต่างๆ และในบริบทที่แตกต่างกันในร้านค้า Shopify ดังนั้น นักพัฒนาควรหลีกเลี่ยงการพึ่งพาออบเจกต์ Liquid เฉพาะหน้าภายในส่วนเหล่านี้

อย่างไรก็ตาม คุณสามารถจำกัดส่วนให้ใช้ได้เฉพาะกับประเภทเพจที่กำหนดโดยใช้แอตทริบิวต์ templates ภายในสคีมาของส่วน ตัวอย่างเช่น หากคุณต้องการจำกัดส่วนให้เป็นเพียงหน้าผลิตภัณฑ์และคอลเลกชั่น คุณต้องรวมบรรทัดนี้ไว้ในแท็ก schema ของส่วน:

 "templates": ["product", "collection"]

แอตทริบิวต์ templates ยอมรับรายการสตริงที่แสดงถึงประเภทเพจ

ขึ้นอยู่กับฟังก์ชันที่คุณต้องการรวมไว้ในธีมของคุณ หรือข้อกำหนดเฉพาะที่ไคลเอนต์ของคุณมี คุณอาจสร้างส่วนต่างๆ มากมายที่เปิดใช้งานคุณลักษณะเฉพาะ หากต้องการดูตัวอย่างส่วนโมดูลาร์ คุณสามารถสำรวจส่วนจดหมายข่าวหรือส่วน Rich-Text ที่ใช้ใน Dawn

การตั้งค่าส่วน

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

ดังที่เราได้เห็น การตั้งค่าจะรวมอยู่ในไฟล์ส่วน ภายในแท็ก {% schema %} ซึ่งแสดงว่าการตั้งค่าเหล่านี้ควรแสดงผลบน UI ของตัวแก้ไขธีม ตัวอย่างง่ายๆ นี้สามารถดูได้จากส่วนข้อความที่กำหนดเองซึ่งอาจมีลักษณะดังนี้:

ในตัวอย่างนี้ เรามีองค์ประกอบ HTML สององค์ประกอบ: องค์ประกอบส่วนหัวและองค์ประกอบย่อหน้า แต่ละองค์ประกอบเหล่านี้มีเนื้อหาแบบไดนามิกที่เราสร้างขึ้นด้วยออบเจกต์ของเหลว section.settings อ็อบเจ็กต์ส่วนนี้ช่วยให้เราสามารถดึงค่าการตั้งค่าโดยอ้างอิง ID เฉพาะของการตั้งค่า

ด้านล่างของมาร์กอัป HTML และ Liquid เรามีการตั้งค่าส่วนของเรา ซึ่งอยู่ในแท็ก {% schema %} ของเรา การตั้งค่าแต่ละรายการจะแทนด้วยออบเจกต์ ซึ่งเราสามารถกำหนด id การตั้งค่า type ของมัน และวิธีที่มันจะปรากฏบนเอดิเตอร์ หากต้องการเข้าถึงการตั้งค่าของส่วนใน Liquid ให้ต่อท้าย id ของ section.settings นั้นต่อท้ายวัตถุส่วนการตั้งค่าของเหลว นอกจากนี้ เรายังกำหนดประเภทของการตั้งค่าและลักษณะที่ปรากฏบนเครื่องมือแก้ไขธีม

ภายในการตั้งค่าของแท็กสคีมาของเรา:

• id หมายถึงตัวแปร Liquid ที่ถูกกำหนด
• type กำหนดชนิดของเอาต์พุตที่เรากำลังสร้าง
• label ให้บริบทที่แสดงบนตัวแก้ไขธีม
• default กำหนดค่าเริ่มต้น

ในตัวอย่างนี้ ฉันได้สร้างกล่อง text สำหรับหัวข้อของเราและกล่องข้อความ richtext สำหรับเนื้อหาของเรา แต่คุณสามารถเพิ่มประเภทเอาต์พุตได้หลากหลาย โดยขึ้นอยู่กับความต้องการของไคลเอ็นต์ของคุณ ประเภทอินพุตอื่นๆ ที่ถูกต้อง ได้แก่ image_picker , radio , video_url และ font_picker

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

ค่าที่ตั้งไว้ล่วงหน้าคือการกำหนดค่าเริ่มต้นของส่วนต่างๆ และเพิ่มภายในแท็ก {% schema %} ของส่วน ในตัวอย่างง่ายๆ ค่าที่ตั้งไว้อาจมีลักษณะดังนี้:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

เมื่อเพิ่มลงในตัวอย่างของเราแล้ว ส่วนกล่องข้อความแบบกำหนดเองจะมีลักษณะดังนี้:

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

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

รวมถึงส่วนต่างๆ ในหน้า

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

1. รวมส่วนต่างๆ ในเทมเพลต JSON

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

นอกจากส่วน "main" แล้ว คุณยังสามารถรวมส่วนอื่นๆ ในเทมเพลต JSON ที่จะปรากฏตามค่าเริ่มต้นในประเภทเพจนั้น หากเราใช้เทมเพลต JSON ของผลิตภัณฑ์เป็นตัวอย่าง เราสามารถรวมส่วนคำแนะนำผลิตภัณฑ์ไว้ในหน้าโดยเพิ่มวัตถุใหม่ใต้ส่วน "main" :

ในกรณีนี้ เราจะกำหนดชื่อให้กับส่วน recommendations และคุณสมบัติ type ใช้เพื่อระบุว่าไฟล์ใดในไดเร็กทอรี /sections เราต้องการรวม

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

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

2. รวมส่วนที่เป็นตัวเลือกในทุกหน้า

ดังที่เราเห็นจากข้อความแบบกำหนดเอง เป็นไปได้ที่จะทำให้ส่วนพร้อมใช้งานในทุกหน้าของธีม เมื่อมีการ presets ในการตั้งค่า schema

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

เมื่อรวมด้วยวิธีนี้ สามารถเพิ่ม ปรับตำแหน่ง และลบส่วนเหล่านี้ได้จากตัวแก้ไขธีม ส่วนเหล่านี้ยังสามารถจำกัดเฉพาะหน้าที่มีคุณสมบัติ templates

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

3. ใช้แท็ก {% section %} เพื่อเพิ่มส่วนคงที่

แท็ก section Liquid ช่วยให้คุณแสดงส่วนจากไดเร็กทอรี /sections ในไฟล์เค้าโครงหรือเทมเพลต Liquid แท็กนี้อาจปรากฏเป็น:

 {% section 'header' %}

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

วิธีการนี้มักใช้กับเนื้อหาและส่วนประกอบที่ควรมองเห็นได้เสมอ เช่น ส่วนหัว ส่วนท้าย และแถบประกาศ หากต้องการดูตัวอย่างนี้ใน Dawn คุณสามารถดูไฟล์ theme.liquid ซึ่งแถบประกาศคงที่ ส่วนหัว และส่วนท้ายจะถูกเพิ่มด้วยแท็ก section

เสริมพลังความคิดสร้างสรรค์

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

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