การเพิ่ม CSS แบบกำหนดเองไปยังธีมของคุณ
Cascading Style Sheet (CSS) เปลี่ยนวิธีการแสดงองค์ประกอบต่างๆ ในธีมของคุณ และสามารถควบคุมลักษณะที่ปรากฏของหลายหน้าในคราวเดียว คุณสามารถปรับแต่งธีมของคุณนอกเหนือจากการตั้งค่าที่มีอยู่ในธีมได้โดยใช้ฟีเจอร์ CSS แบบกำหนดเองคุณสามารถเพิ่ม CSS แบบกำหนดเองให้กับทั้งธีมของคุณ หรือในส่วนเฉพาะของเทมเพลตภายในธีมของคุณทั้งนี้ ระบบไม่รองรับ CSS แบบกำหนดเองในหน้าการชำระเงิน
การปรับแต่ง CSS ของคุณจำเป็นต้องมีความคุ้นเคยกับ CSS และ HTML ก่อนคุณจะปรับแต่งธีมของคุณ ตรวจสอบให้แน่ใจว่าคุณเข้าใจแล้วว่ามีระดับความช่วยเหลือได้บ้างที่สามารถรับความช่วยเหลือได้
ข้อควรพิจารณาสำหรับการใช้ CSS แบบกำหนดเอง
ก่อนที่จะเพิ่ม CSS แบบกำหนดเองไปยังธีมของคุณ โปรดตรวจสอบข้อควรพิจารณาดังต่อไปนี้:
-
ไม่รองรับตัวเลือก CSS ต่อไปนี้ใน CSS แบบกำหนดเอง:
- ไม่สามารถใช้กฎ At-rules ได้
- สำหรับ CSS ในระดับส่วน คุณไม่สามารถกำหนดเป้าหมาย ID หรือหมวดหมู่ขององค์ประกอบการครอบ Shopify Section ซึ่งเรนเดอร์โดยธีมที่มีหมวดหมู่
shopify-sectionได้
หากมีการประกาศกฎ CSS แบบกำหนดเองโดยมีแท็กที่ครอบองค์ประกอบของส่วนหลัก จะถือว่าเป็นแท็กแบบเว้นวรรค และกฎการออกแบบจะถูกปรับใช้กับส่วนดังกล่าว โปรดทราบว่าตามค่าเริ่มต้นแล้ว ส่วนหลักจะถูกครอบด้วยแท็ก
<div>แต่นักพัฒนาธีมสามารถกำหนดให้เป็นค่าที่อนุญาตใดก็ได้ในโครงร่างของส่วนขณะนี้มีเพียงโดเมน https://cdn.shopify.com เท่านั้นที่ได้รับอนุญาต เมื่อใช้ URL ใน CSS แบบกำหนดเอง
ไม่มีการจำกัดแบบอักษรแบบกำหนดเอง อย่างไรก็ตาม แบบอักษรแบบกำหนดเองเป็นทรัพยากรซึ่งเบราว์เซอร์ดาวน์โหลดก่อนเรนเดอร์ข้อความ ซึ่งส่งผลต่อประสิทธิภาพโดยรวมของร้านค้า คุณมีหน้าท่ีรับผิดชอบในการตรวจสอบให้แน่ใจว่าหน้าร้านของคุณไม่ได้รับผลเสียจากแบบอักษรแบบกำหนดเอง ดูวิธีการใช้แบบอักษรแบบกำหนดเองในธีมของคุณ
กฎ CSS ที่มีผลต่อธีมทั้งหมดถูกจำกัดที่ 1500 อักขระ
กฎ CSS ที่มีผลต่อส่วนใดส่วนหนึ่งถูกจำกัดที่ 500 อักขระ
การอัปเดตธีมอาจทําให้ CSS แบบกำหนดเองของคุณหยุดทำงานได้ ทั้งนี้ขึ้นอยู่กับตัวเลือก CSS หรือหมวดหมู่ที่คุณใช้
Shopify ไม่รองรับการปรับแต่งธีมขั้นสูง หากคุณพบข้อผิดพลาดที่เกี่ยวข้องกับข้อจํากัดเหล่านี้ใน CSS แบบกำหนดเองของคุณ และไม่สามารถระบุได้ว่าสิ่งใดคือสาเหตุของข้อผิดพลาด ให้ดูที่รายการแหล่งข้อมูลด้านความช่วยเหลืออื่นๆ ที่มีให้ใช้งาน
เพิ่ม CSS แบบกำหนดเอง
คุณสามารถเพิ่ม CSS แบบกำหนดเองไปยังธีมทั้งหมด ซึ่งจะมีผลต่อหน้าทั้งหมดในร้านค้าออนไลน์ของคุณ ยกเว้นหน้าการชำระเงินตัวอย่างเช่น คุณสามารถเปลี่ยนวิธีการแสดงปุ่มในร้านค้าทั้งหมดของคุณได้
ขั้นตอน:
- ในส่วน Shopify admin ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
- คลิก ปรับแต่ง
- คลิกที่การตั้งค่าธีม
- คลิกที่ “CSS แบบกำหนดเอง”
- เพิ่มรหัสของคุณ
- คลิกที่ “บันทึก”
นอกจากนี้ คุณยังสามารถเพิ่ม CSS แบบกำหนดเองไปยังส่วนใดส่วนหนึ่งของธีมได้ ตัวอย่างเช่น คุณสามารถใช้ขนาดตัวอักษรหรือสีพื้นหลังแบบกำหนดเองกับส่วนๆ หนึ่งได้
ขั้นตอน:
- ในส่วน Shopify admin ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
- คลิก ปรับแต่ง
- คลิกส่วนที่คุณต้องการเพิ่ม CSS
- ที่ด้านล่างของแผงคุณสมบัติของส่วน ให้คลิก “CSS แบบกำหนดเอง”
- เพิ่มรหัสของคุณ
- คลิกที่ “บันทึก”
แหล่งข้อมูลเพิ่มเติมเกี่ยวกับ CSS
การปรับแต่ง CSS ของคุณจำเป็นต้องมีความคุ้นเคยกับ CSS และ HTML ก่อนคุณจะปรับแต่งธีมของคุณ ตรวจสอบให้แน่ใจว่าคุณเข้าใจแล้วว่ามีระดับความช่วยเหลือได้บ้างที่สามารถรับความช่วยเหลือได้
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ CSS คุณสามารถสำรวจดูแหล่งข้อมูลบางส่วนดังต่อไปนี้ได้: