รูปแบบสี

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

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

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

การตั้งค่าธีมรูปแบบสี

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

รายการการตั้งค่าต่างๆ ที่คุณสามารถนำมาใช้กับรูปแบบสีในตัวแก้ไขธีมได้

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

จัดการรูปแบบสีของคุณ

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

• ชื่อสี เช่น red, black หรือ blue
• รหัสสี RGB
• ค่าสีเลขฐานสิบหก

ขั้นตอน:

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. คลิกปรับแต่งที่อยู่ถัดจากธีมที่คุณต้องการปรับแต่ง

3. คลิกไอคอนรูปเฟือง จากนั้นคลิก "สี"

4. ในส่วนรูปแบบ ให้คลิกรูปแบบที่มีอยู่หรือคลิกเพิ่มรูปแบบเพื่อเพิ่มรูปแบบสีใหม่

5. คลิกที่ตัวอย่างสีสำหรับสีของประเภทเนื้อหาที่คุณต้องการเปลี่ยน

6. หากต้องการตั้งค่าสี ให้ป้อนรหัสสี Hex หรือเลือกสีจากเครื่องมือเลือกสี หากต้องการตั้งค่าสีให้โปร่งใส ให้ลบรหัส Hex ออกจากช่องข้อความ

7. คลิกที่ “บันทึก”

ใช้รูปแบบสีของคุณ

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

การไล่ระดับสี

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

เคล็ดลับ

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการไล่ระดับสีและพื้นหลัง CSS สามารถดูได้ที่เอกสารประกอบเรื่องการไล่ระดับสีแบบเส้นตรงและพื้นหลัง CSS ของ Mozilla

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

ตั้งค่าการไล่ระดับสี

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. คลิกปรับแต่งที่อยู่ถัดจากธีมที่คุณต้องการปรับแต่ง

3. คลิกไอคอนรูปเฟือง จากนั้นคลิก "สี"

4. ในส่วนรูปแบบ ให้คลิกรูปแบบที่มีอยู่ที่คุณต้องการแก้ไข

5. คลิกตัวเลือกตัวอย่างการไล่ระดับสี เช่น การไล่ระดับสีพื้นหลัง

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

7. เลือกตัวเลือกการไล่ระดับสีของคุณ:

   • เลือกรูปแบบการไล่ระดับสีระหว่างแบบเส้นตรงหรือแบบรัศมีได้ ใช้ปุ่มเพื่อเลือกรูปแบบการไล่ระดับสีที่คุณต้องการ
   • ตั้งค่ามุมของการไล่ระดับสีโดยใช้ลูกศรขึ้นและลง คลิกที่ลูกศรขึ้นหรือลงเพื่อเพิ่มหรือลดมุมลงทีละ 5%
   • ใช้แถบเลื่อนเพื่อเลือกตําแหน่งของการไล่ระดับสี หรือจะป้อนค่าตัวเลขในช่องก็ได้
   • ป้อนรหัสสี Hex ที่ต้องการ หรือใช้แถบเลื่อนสีเพื่อเลือกความมืดหรือความสว่างของสี สีที่เลือกล่าสุดจะแสดงที่ด้านล่างของแผงตัวเลือกการไล่ระดับสี
   • หากต้องการให้การไล่ระดับสีให้ทึบแสง ให้ใช้แถบเลื่อนด้านขวาเพื่อเลือกความโปร่งใสของการไล่ระดับสี นอกจากนี้คุณยังสามารถป้อนค่าเป็นเปอร์เซ็นต์ในช่องถัดจากรหัสสีฐานสิบหกก็ได้เช่นกัน

8. คลิกที่ “บันทึก”

ใช้ CSS เพื่อตั้งการไล่ระดับสี

ค่าคุณสมบัติของ background CSS ส่วนใหญ่สามารถใช้เพื่อกำหนดค่าสีของพื้นหลังได้ คุณสามารถใช้ช่องนี้ได้หากต้องการสีทึบ (เช่น #000000, black, rgb(0,0,0,0),rgba(0,0,0,0), hsl(0, 0%, 0%) และ hsla(0, 0%, 0%, 1) ทั้งหมดนี้ล้วนทำให้พื้นหลังเป็นสีดำทึบ) หรือหากต้องการการไล่ระดับสี (เช่น linear-gradient(red, green), radial-gradient(red, green) หรือ conic-gradient(red, green)) ซึ่งการไล่สีก็สามารถทำซ้ำได้เช่นกัน

ขั้นตอน:

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. คลิกปรับแต่งที่อยู่ถัดจากธีมที่คุณต้องการปรับแต่ง

3. คลิกไอคอนรูปเฟือง จากนั้นคลิก "สี"

4. ในส่วนรูปแบบ ให้คลิกรูปแบบที่มีอยู่ที่คุณต้องการแก้ไข

5. คลิกการไล่ระดับสีที่คุณต้องการแก้ไข

6. คลิกที่ลูกศรถัดจากการไล่ระดับสี แล้วเลือก CSS

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

8. คลิกที่ “บันทึก”

ลบการไล่ระดับสี

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. คลิกปรับแต่งที่อยู่ถัดจากธีมที่คุณต้องการปรับแต่ง

3. คลิกไอคอนรูปเฟือง จากนั้นคลิก "สี"

4. ในส่วนรูปแบบ ให้คลิกรูปแบบที่มีอยู่ที่คุณต้องการแก้ไข

5. คลิกการไล่ระดับสีที่คุณต้องการลบออก

6. คลิกที่ลบการไล่ระดับสี

7. คลิกที่ “บันทึก”