ขั้นตอนหลักในการเพิ่มเซคชั่นที่กำหนดเองในร้านค้า Shopify ของคุณ

สารบัญ

  1. โปรดักชัน
  2. ช่วงเซคชั่น Shopify คืออะไร
  3. การสร้างเซคชัน Shopify ครั้งแรกของคุณ
  4. สรุป: การรวมเซคชั่น

โปรดักชัน

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

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

ช่วงเซคชั่น Shopify คืออะไร

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

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

การสร้างเซคชัน Shopify ครั้งแรกของคุณ

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

ขั้นตอนที่ 1: เข้าใจเทมเพลต Shopify

ก่อนที่จะพิสูจน์ในการสร้างกล่องส่วน ควรเข้าใจกลไกของระบบเทมเพลต Shopify ทุกหน้าใน Shopify สร้างขึ้นโดยใช้ไฟล์เทมเพลต json ที่กำหนดโครงสร้างแต่ไม่มีเนื้อหาจริง - นี่คือที่เราช่วย

ขั้นตอนที่ 2: สร้างส่วน

กล่องส่วนถูกสร้างขึ้นโดยใช้ภาษา Liquid templating และรวบรวมภายใต้ไดเร็กทอรี่ /sections ของรหัสธีมของคุณเพื่อสร้างส่วน:

      1. ไปที่ ร้านค้าออนไลน์ > เทม > แก้ไขรหัส ใน Shopify admin ของคุณ
      2. เข้าไปยังไดเรกทอรี่ /sections และใช้รูปแบบ เพิ่มส่วนใหม่
      3. ตั้งชื่อส่วนของคุณอย่างถูกต้อง (เช่น ต้อนรับแบนเนอร์) และเลือก สร้างส่วน

ที่ว่างเปล่าของส่วนประกอบด้วยส่วนประกอบหลัก 3 ส่วน: เนื้อหา HTML/Liquid CSS และ JavaScript

ขั้นตอนที่ 3: สร้างโครงสร้างด้วยเทมเพลต JSON

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

      1. เมื่อต้องการแก้ไขไฟล์เทมเพลต - เช่น product.json
      2. เพิ่มเซคชันโดยเพิ่มรายการในวัตถุ "sections"

ขั้นตอนที่ 4: เติมสารของเกร็ดความรู้

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

ขั้นตอนที่ 5: ปรับแต่งตัวเลือกหลากหลายอย่าง

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

      1. ใช้ชนิดฟิลด์ต่าง ๆ เช่น ข้อความ เครื่องมือเลือกภาพ หรือการตั้งค่าสีภายใน {% schema %} ของคุณ
      2. ตั้งค่าเริ่มต้นที่กำหนดลักษณะทั่วไปของมันก่อนได้

ขั้นตอนที่ 6: เพิ่มเซคชันก่อนให้ตั้งค่าประกอบในเอดิเตอร์ร้านค้า

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

liquid "presets": [ { "name": "เซคชั่นที่กำหนดเองของฉัน", "category": "เนื้อหา" } ]

ขั้นตอนที่ 7: ให้การใช้งานร่วมกันบนหลากหลายหน้า

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

ขั้นตอนที่ 8: ปรับปรุงความประสงค์และประสบการณ์ที่มีซึ่งกันและกัน

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

สรุป: การรวมเซคชั่น

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

คำถามที่พบบ่อย: 1. ฉันสามารถใช้ตอนสำหรับการปรับแต่งหน้าเช็คเอาต์ของฉันใช่ไหม - Shopify ให้ขอบเขตที่จำกัดสำหรับการปรับแต่งในหน้าเช็คเอาท์เนื่องจากด้านความปลอดภัย

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

      3. ฉันสามารถใช้อุปกรณ์ Shopify ในเซคชันที่กำหนดเองของฉันได้หรือไม่

      4. ใช่, เซคชันสามารถรวมบล็อกแอป - องค์ประกอบแบบวิดเจ็ตที่โดยแอป Shopify เข้ากันได้ชนิดของความสามารถโดยไม่ต้องแย่งแย้งโค้ดธีม

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