การเพิ่ม CSS แบบกำหนดเองไปยังธีมของคุณ
Cascading Style Sheet (CSS) เปลี่ยนวิธีการแสดงองค์ประกอบต่างๆ ในธีมของคุณ และสามารถควบคุมลักษณะที่ปรากฏได้หลายหน้าในคราวเดียว คุณสามารถปรับแต่งธีมของคุณนอกเหนือจากการตั้งค่าที่มีอยู่ในธีมได้โดยใช้ฟีเจอร์ 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 แบบกำหนดเองไปยังธีมทั้งหมด ซึ่งจะมีผลต่อหน้าทั้งหมดในร้านค้าออนไลน์ของคุณ ยกเว้นหน้าการชำระเงินตัวอย่างเช่น คุณสามารถเปลี่ยนวิธีการแสดงปุ่มในร้านค้าทั้งหมดของคุณได้
ขั้นตอน:
ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
คลิก ปรับแต่ง
คลิกที่การตั้งค่าธีม
คลิกที่ “CSS แบบกำหนดเอง”
เพิ่มรหัสของคุณ
คลิกที่ “บันทึก”

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

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