ความหมายของ Shopify ของเหลว? บทสรุปโดยย่อของพื้นฐาน

นี่คือสิ่งที่คุณต้องรู้...

หากคุณสมัครใช้บริการจากลิงก์ในหน้านี้ Reeves and Sons Limited อาจได้รับค่าคอมมิชชั่น ดูของเรา คำสั่งจริยธรรม.

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

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

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

แต่มีข่าวดี ถ้าคุณต้องการสร้างของคุณเอง Shopify เทมเพลตสำหรับไซต์ของคุณหรือของคนอื่นก็มี Shopify ของเหลว

สนใจ? เข้าร่วมกับฉันในขณะที่ฉันพยายามที่จะตอบคำถาม: คืออะไร Shopify ของเหลว? มาดำน้ำกันเถอะ!

ความหมายของ Shopify ของเหลว?

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

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

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

ความหมายของ Shopify ผลิตภัณฑ์มะพร้าวในรูปแบบนำ้และของเหลว

ดังนั้นสิ่งนี้ทำงานอย่างไร

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

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

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

  1. วัตถุ
  2. แท็ก
  3. ฟิลเตอร์

ด้านล่างนี้ เราจะสำรวจข้อมูลแต่ละประเภทตามลำดับ:

วัตถุที่เป็นของเหลว

ออบเจกต์คล้ายกับไลบรารีของฟังก์ชันหรือเนื้อหา ภายในวัตถุแต่ละชิ้นจะมีคุณสมบัติต่างๆ 

หากคุณไม่คุ้นเคยกับแนวคิดของวัตถุ นี่คือภาพรวมโดยย่อ:

วัตถุเป็นแนวคิดพื้นฐานในการเขียนโปรแกรม วัตถุประกอบด้วยสององค์ประกอบ: 

  1. คุณสมบัติที่กำหนดสถานะของวัตถุ
  2. ฟังก์ชันที่กำหนดพฤติกรรมของวัตถุ

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

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

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

{{Blog.title}} 

มาทำลายสิ่งนี้:

  • ที่นี่, 'บล็อกข่าวสาร'เป็นวัตถุ 
  • คุณสมบัติที่เราต้องการภายในนี้ ห้องสมุด มีเครื่องหมาย 'ชื่อเรื่อง. ' 
  • รางวัล '' บอก Liquid ว่าข้อมูลสองบิตนี้เกี่ยวข้องกันอย่างไร 
  • วงเล็บคู่คือไวยากรณ์ Liquid ที่กำหนด {{เนื้อหา/เอาต์พุตที่คุณต้องการ}} ที่คุณต้องการจาก Shopify เซิร์ฟเวอร์ 

แท็กของเหลว

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

นี่คือสิ่งที่อาจดูเหมือน:

{% ถ้า blog.title == 'การเฉลิมฉลอง' %}

**HTML รูปภาพ**

{% สิ้นสุดถ้า %}

สิ่งนี้อาจดูซับซ้อน แต่ถ้าเราแยกย่อย ก็จะเข้าใจได้ง่ายมาก:

  • แท็กใช้รูปแบบที่แตกต่างกันเล็กน้อยจากวัตถุที่มีลักษณะเช่นนี้  {%…%}
  • แท็กแรก {% ถ้า blog.title == 'การเฉลิมฉลอง' %} บอก Liquid ว่าต้องตรงตามเงื่อนไขใดก่อนที่จะขอเนื้อหาจากเซิร์ฟเวอร์
  • เงื่อนไขที่เราขอกำหนดโดย คำสั่ง 'ถ้า'. หากคุณคุ้นเคยกับการเขียนโค้ด คุณจะรู้ว่าคำสั่ง 'if' ทำงานโดยการเปรียบเทียบข้อมูลสองส่วนขึ้นไปซึ่งกันและกัน หากตรงกันก็จะไปยังบรรทัดถัดไปในรหัสของเรา ที่นี่,  ถ้า blog.title == 'งานฉลอง' เราขอให้ Liquid ตรวจสอบว่าชื่อบล็อกของเรามีคำว่า 'การเฉลิมฉลอง' หรือไม่ ถ้าเป็นเช่นนั้นก็จะลงไปที่บรรทัดถัดไปของรหัสของเรา หากไม่เป็นเช่นนั้น Liquid จะไม่ส่งคืนเนื้อหาใดๆ
  • ในตัวอย่างนี้ ถ้าเรามีชื่อบล็อกที่มีคำว่า 'การเฉลิมฉลอง' Liquid จะดึงและแสดง HTML รูปภาพของเรา
  • เมื่อทำเช่นนี้ มันจะไปที่บรรทัดต่อไปนี้ {% สิ้นสุดถ้า %}, ซึ่งยุติโปรแกรมของเรา

นี่เป็นเพียงตัวอย่างหนึ่งของสิ่งที่คุณสามารถทำได้ด้วยแท็ก Shopify ของเหลวมีแท็กไปที่:

  • Control เมื่อรหัสถูกดำเนินการ
  • ย้ำ/การย้ำ (ซ้ำ) บล็อกของรหัส
  • แสดง มาร์กอัป HTML บางอย่าง
  • สร้างตัวแปรใหม่.

ตัวกรองของเหลว

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

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

{{ blog.title | uppercase }}

  • ไวยากรณ์สำหรับตัวกรองคือ {{…}}.
  • ที่นี่ คุณสมบัติวัตถุที่เรากำลังมองหาคือ 'ชื่อบล็อก'.
  • ตัวกรองที่เราใช้คือ ตัวพิมพ์ใหญ่.
  • รางวัล '|' แยกอินพุตและเอาต์พุตของรหัสของเรา

ตอนนี้เมื่อผู้ใช้ดูชื่อบล็อกของเรา ชื่อนั้นจะปรากฏเป็นตัวพิมพ์ใหญ่

ประโยชน์ของการ Shopify ผลิตภัณฑ์มะพร้าวในรูปแบบนำ้และของเหลว

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

อย่างไรก็ตาม หากคุณไม่ใช่นักพัฒนาเว็บ แต่คุณเป็นเพียงเจ้าของร้านที่ต้องการปรับปรุงร้านค้าของคุณ มีประโยชน์สำหรับคุณเช่นกัน:

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

ความต้องการ

ดังนั้นคุณต้องเริ่มใช้อะไร Shopify ของเหลว?

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

อย่างไรก็ตาม หากคุณไม่มี Shopify คุณจะต้องสร้างร้านขึ้นมาเพื่อเริ่มเล่นกับ Liquid 

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

เมื่อคุณมีโครงสร้างพื้นฐานของร้านค้าออนไลน์ของคุณแล้ว คุณสามารถดึงข้อมูลนี้จาก Shopify เซิร์ฟเวอร์และปรับแต่งโดยใช้ Liquid (เพิ่มเติมเกี่ยวกับเรื่องนี้ด้านล่าง) 

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

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

ความหมายของ Shopify ผลิตภัณฑ์มะพร้าวในรูปแบบนำ้และของเหลว

เริ่มต้นกับ Shopify ผลิตภัณฑ์มะพร้าวในรูปแบบนำ้และของเหลว

ดังนั้น ใช้สิ่งที่เราได้เรียนรู้มา มาดูกันว่าเราจะแก้ไขได้อย่างไร Shopify ธีมใช้ Liquid 

ในการเข้าถึง Liquid ให้ทำตามขั้นตอนเหล่านี้:

  1. ทำซ้ำธีมของคุณ: เพื่อหลีกเลี่ยงความผิดพลาดร้ายแรง ควรคัดลอกธีมของคุณไว้ก่อนเริ่มต้น วิธีนี้จะช่วยป้องกันไม่ให้คุณทำผิดพลาดได้ Shopify ธีมยังคงเหมือนเดิม ในการทำเช่นนี้ ให้ไปที่ส่วนธีมทางด้านขวามือของคุณ Shopify แผงควบคุม. เลือกธีมที่คุณต้องการแก้ไขและคลิกการดำเนินการเพื่อดูเมนูแบบเลื่อนลง ตอนนี้ เลือกรายการที่ซ้ำกัน
  2. เปลี่ยนชื่อสำเนาของคุณ: เมื่อคุณทำซ้ำธีม คุณจะเห็นธีมนั้นปรากฏในรายการธีมของคุณ คุณสามารถเปลี่ยนชื่อสำเนาของคุณเพื่อไม่ให้สับสนระหว่างต้นฉบับและสำเนา เพียงคลิกปุ่มการดำเนินการอีกครั้งแล้วกดเปลี่ยนชื่อในเมนูแบบเลื่อนลง 
  3. เข้าสู่ตัวแก้ไขรหัส: ตอนนี้ เลือกการดำเนินการกับสำเนาของคุณอีกครั้ง และเลือกแก้ไขรหัส คุณจะถูกนำไปที่รายการรหัสทั้งหมดภายในธีมของคุณ ดูโฟลเดอร์ที่แสดงรายการทางด้านขวาของคุณ คุณควรเห็นโฟลเดอร์ต่างๆ มากมายที่มีแง่มุมต่างๆ ของธีมของคุณ เช่น เลย์เอาต์ เทมเพลต ส่วน เป็นต้น เปิดโฟลเดอร์เทมเพลต 
  4. การเข้ารหัสในของเหลว: ภายในโฟลเดอร์เทมเพลต คุณจะเห็นรายการไฟล์ที่มีประเภทไฟล์ .liquid คุณยังสามารถสร้างเทมเพลตไฟล์ Liquid ใหม่ได้โดยเลือกปุ่มบวกบนโฟลเดอร์เทมเพลต มันจะถามคุณว่าต้องการสร้างเทมเพลตอะไร เช่น หน้า ส่วน บล็อก ฯลฯ และตั้งชื่อไฟล์ หากต้องการแก้ไขไฟล์ ให้คลิกสองครั้งที่ไฟล์เทมเพลต จากนั้นไฟล์จะเปิดขึ้นในโปรแกรมแก้ไขโค้ดทางด้านขวา

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

เพื่อให้เห็นภาพ ลองยกตัวอย่างง่ายๆ:

การปรับขนาดรูปภาพโดยใช้ Shopify ผลิตภัณฑ์มะพร้าวในรูปแบบนำ้และของเหลว

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

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

แล้วเราจะปรับขนาดภาพได้อย่างไร?

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

  • ผลิตภัณฑ์
  • ผลิตภัณฑ์ย่อย
  • รายการโฆษณา
  • คอลเลคชั่น
  • บทความ

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

ในตัวอย่างนี้ เราจะกำหนดเป้าหมายรูปภาพบทความบล็อกของเรา

นี่คือรหัสพื้นฐาน:

{{ blog.articles.image | img_url: ‘100×100' }}

ชำรุด:

  • บล็อก เป็นวัตถุที่เรากำลังมองหา และเราต้องการทรัพย์สิน บทความเนื่องจากมีบทความทั้งหมดในบล็อกของเรา โดยเฉพาะอย่างยิ่ง เราต้องการเปลี่ยนรูปภาพในบทความบล็อกของเรา ดังนั้นเราจึงกำหนดเป้าหมายไปที่ ภาพ คุณสมบัติภายในบทความ
  • ตอนนี้เราใช้ตัวกรอง img_url. หากเราปล่อยไว้ตามที่เป็นอยู่ ระบบจะแสดงรูปภาพที่ดึงมาจาก URL ที่จัดทำโดย Shopify เซิร์ฟเวอร์ อย่างไรก็ตาม เราจะให้พารามิเตอร์เพิ่มเติมด้วย: ขนาดรูปภาพ '100×100' (สังเกตว่า Shopify ใช้พิกเซลเพื่อกำหนดช่วงขนาด)
  • สุดท้ายนี้ เรารวมรหัสของเราโดยใช้ไวยากรณ์ Liquid double-bracket ซึ่งใช้สำหรับตัวกรอง 

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

เคล็ดลับและประเด็น

ฉันหวังว่าเมื่ออ่านบทความนี้แล้ว ตอนนี้คุณคงมีคำตอบสำหรับคำถาม: คืออะไร Shopify ของเหลว?

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

หากคุณสนใจที่จะใช้ Shopify Liquid เราขอแนะนำให้คุณทำตามคำแนะนำเหล่านี้เพื่อรับประโยชน์สูงสุดจากมัน:

  1. เริ่มต้นด้วยความเข้าใจที่ชัดเจนเกี่ยวกับของเหลว: ความเข้าใจอย่างถ่องแท้เกี่ยวกับ Liquid จะช่วยให้คุณสร้างธีมแบบกำหนดเองที่ซับซ้อนมากขึ้นได้ ด้วยรากฐานนี้ ผู้ใช้ใหม่สามารถใช้ประโยชน์จากศักยภาพของ Shopify เพื่อสร้างร้านค้าออนไลน์ที่ไม่เหมือนใครและน่าดึงดูดใจ
  2. ทดสอบธีมของคุณอย่างละเอียด: การทดสอบเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าธีมที่กำหนดเองของคุณทำงานตามที่คาดหวังในเบราว์เซอร์และอุปกรณ์ต่างๆ เมื่อตรวจพบปัญหาความเข้ากันได้ตั้งแต่เนิ่นๆ คุณจะหลีกเลี่ยงความยุ่งยากที่อาจเกิดขึ้นกับลูกค้าของคุณ
  3. ใช้เครื่องมือและทรัพยากรที่มีอยู่: Shopify มีทรัพยากรมากมายที่พร้อมช่วยเหลือผู้พัฒนาธีม ดังนั้นจงใช้มันซะ! เมื่อนำไปใช้จะทำให้กระบวนการพัฒนาเร็วขึ้นและง่ายขึ้น

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

นั่นคือทั้งหมดจากฉัน ไปยังคุณ. แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณกับ Shopify ของเหลวในความคิดเห็นด้านล่าง!

โรซี่สนับ

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

ความคิดเห็น 0 คำตอบ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

อันดับ *

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

ดู Shopify เป็นเวลา 3 เดือนกับ $1/เดือน!
Shopify-โปรโมชั่น 3 ดอลลาร์แรก XNUMX เดือน