ความช่วยเหลือ
เข้าสู่ระบบ

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

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

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

ในหน้านี้

ข้อควรพิจารณาในการใช้ CSS ที่กำหนดเอง

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

  • ตัวเลือกและคุณสมบัติของ CSS ต่อไปนี้ไม่รองรับใน CSS ที่กำหนดเอง
    • ไม่สามารถใช้ At-rules @import, @charset และ @namespace ได้
    • สำหรับ CSS ระดับส่วน จะอนุญาตให้ใช้เฉพาะ At-rules @media, @container, @layer และ @supports เท่านั้น
    • สำหรับ CSS ระดับส่วน คุณไม่สามารถกำหนดเป้าหมาย ID หรือคลาสขององค์ประกอบส่วน Shopify ที่ครอบอยู่ซึ่งธีมแสดงผลด้วยคลาส shopify-section ได้
    • คุณสมบัติ content ไม่มีให้ใช้งานใน CSS ที่กำหนดเอง
  • หากมีการประกาศกฎ CSS ที่กำหนดเองด้วยแท็กที่ครอบองค์ประกอบส่วนหลัก แท็กนั้นจะถือว่าเป็นแท็กสืบทอด และกฎการจัดรูปแบบจะมีผลกับส่วนดังกล่าว โปรดทราบว่าโดยค่าเริ่มต้น ส่วนหลักจะถูกครอบด้วยแท็ก <div> แต่นักพัฒนาธีมสามารถตั้งค่านี้เป็นค่าใดก็ได้ที่ได้รับอนุญาตในสคีมาของส่วน
  • ในปัจจุบัน อนุญาตให้ใช้เฉพาะโดเมน https://cdn.shopify.com เท่านั้นเมื่อใช้ URL ใน CSS ที่กำหนดเอง
  • ไม่มีการจำกัดแบบอักษรที่กำหนดเอง อย่างไรก็ตาม แบบอักษรที่กำหนดเองเป็นทรัพยากรแยกต่างหากที่เบราว์เซอร์จะดาวน์โหลดก่อนที่จะแสดงข้อความ ซึ่งอาจส่งผลกระทบต่อประสิทธิภาพโดยรวมของร้านค้าได้ คุณมีหน้าที่รับผิดชอบในการตรวจสอบให้แน่ใจว่าหน้าร้านของคุณไม่ได้รับผลกระทบในทางลบจากแบบอักษรที่กำหนดเอง ดูวิธีใช้แบบอักษรที่กำหนดเองในธีมของคุณ
  • กฎ CSS ที่มีผลกับทั้งธีมจะจำกัดอยู่ที่ 1,500 อักขระ
  • กฎ 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. ที่ด้านล่างของแผงคุณสมบัติของส่วน ให้คลิก Custom CSS

  5. เพิ่มโค้ดของคุณ

  6. คลิกบันทึก

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

แหล่งข้อมูลเพิ่มเติมสำหรับ CSS

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

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