การเพิ่ม CSS แบบกำหนดเองไปยังธีมของคุณ

หน้านี้พิมพ์ขึ้นเมื่อ May 10, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/theme-structure/extend/add-css?utm_campaign=social_care&utm_medium=community&utm_source=social

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

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

ในหน้านี้

ข้อควรพิจารณาสำหรับการใช้ CSS แบบกำหนดเอง

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

  • ไม่รองรับตัวเลือก CSS ต่อไปนี้ใน CSS แบบกำหนดเอง:

    • ไม่สามารถใช้ @import @charset และ @namespace กฎได้
    • อนุญาตให้ CSS ระดับส่วน เฉพาะกฎ @media @container @layer และ @supports เท่านั้น
    • สำหรับ CSS ในระดับส่วน คุณไม่สามารถกำหนดเป้าหมาย ID หรือหมวดหมู่ขององค์ประกอบการครอบ Shopify Section ซึ่งเรนเดอร์โดยธีมที่มีหมวดหมู่ shopify-section ได้

  • หากมีการประกาศกฎ CSS แบบกำหนดเองโดยมีแท็กที่ครอบองค์ประกอบของส่วนหลัก จะถือว่าเป็นแท็กแบบเว้นวรรค และกฎการออกแบบจะถูกปรับใช้กับส่วนดังกล่าว โปรดทราบว่าตามค่าเริ่มต้นแล้ว ส่วนหลักจะถูกครอบด้วยแท็ก <div> แต่นักพัฒนาธีมสามารถกำหนดให้เป็นค่าที่อนุญาตใดก็ได้ในโครงร่างของส่วน

  • ขณะนี้มีเพียงโดเมน https://cdn.shopify.com เท่านั้นที่ได้รับอนุญาต เมื่อใช้ URL ใน CSS แบบกำหนดเอง

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

  • กฎ CSS ที่มีผลต่อธีมทั้งหมดถูกจำกัดที่ 1500 อักขระ

  • กฎ CSS ที่มีผลต่อส่วนใดส่วนหนึ่งถูกจำกัดที่ 500 อักขระ

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

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

เพิ่ม CSS แบบกำหนดเอง

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

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. คลิก ปรับแต่ง
  3. คลิกที่การตั้งค่าธีม
  4. คลิกที่ “CSS แบบกำหนดเอง”
  5. เพิ่มรหัสของคุณ
  6. คลิกที่ “บันทึก”

ตำแหน่งที่ตั้งของกล่อง CSS แบบกำหนดเองในการตั้งค่าธีม

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

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. คลิก ปรับแต่ง
  3. คลิกส่วนที่คุณต้องการเพิ่ม CSS
  4. ที่ด้านล่างของแผงคุณสมบัติของส่วน ให้คลิก “CSS แบบกำหนดเอง”
  5. เพิ่มรหัสของคุณ
  6. คลิกที่ “บันทึก”

ตำแหน่งที่ตั้งของกล่อง CSS แบบกำหนดเองในการตั้งค่าส่วน

แหล่งข้อมูลเพิ่มเติมเกี่ยวกับ CSS

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

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

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี