วิธีปรับแต่งผลการค้นหาของคุณด้วย CSS

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

เริ่มต้นใช้งาน

ทั้ง Shoply AI Chat และ AI Search สามารถแสดงผลการค้นหาได้ ดังนั้นตัวเลือกการปรับแต่ง CSS ที่คุณเพิ่มจะมีผลกับทั้งสองส่วน หมายเหตุ: ฟีเจอร์ AI Summary ใช้งานได้เฉพาะใน Shoply AI Search เท่านั้น

เพิ่ม CSS ของคุณที่ไหน

หากต้องการซ่อนแถบตัวกรองทั้งหมด ให้ใช้ตัวควบคุมที่มีมาให้: ไปที่ Customize AI Search → Search filters ปิด Show filters in search results แล้วคลิก Save ไม่จำเป็นต้องใช้ CSS ดูรายละเอียดได้ที่ Hide Search Filters 

1. ไปที่ส่วน Customize AI Search ในแอดมินคอนโซลของแอป Shoply
2. ค้นหาช่องข้อความ CSS styles for search elements
3. ป้อนโค้ด CSS แบบกำหนดเองของคุณลงในช่องข้อความ
4. คลิก Save เพื่อใช้การเปลี่ยนแปลงของคุณ

พื้นฐาน CSS

CSS ช่วยให้คุณเปลี่ยนสี แบบอักษร ระยะห่าง เส้นขอบ และอื่น ๆ ได้ ไวยากรณ์พื้นฐานคือ:

.class-name {
    property: value;
}

ตัวอย่างเช่น หากต้องการเปลี่ยนสีข้อความเป็นแดงเข้ม:

.shoply-product-name {
    color:rgb(82, 2, 2);
}

ทำความเข้าใจคลาส CSS เฉพาะของ Shoply

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

Shoply ยังได้กำหนดสไตล์เริ่มต้นบางอย่างไว้สำหรับคลาสเหล่านี้ด้วย คุณสามารถตรวจสอบสไตล์เหล่านั้นได้โดยใช้ Chrome DevTools  และค้นหาแต่ละคลาส หากคุณต้องการเขียนทับสไตล์เริ่มต้น ให้เพิ่มคำสั่ง !important ลงในกฎ CSS ของคุณตามที่อธิบายไว้ใน เอกสาร MDN CSS !important 

คลาสของการ์ดสินค้า

สไตล์สำหรับคอนเทนเนอร์:

• .shoply-product-image - จัดสไตล์รูปภาพสินค้า
• .shoply-product-card - จัดสไตล์คอนเทนเนอร์การ์ดสินค้า

สไตล์สำหรับข้อมูลข้อความ:

• .shoply-product-brand - จัดสไตล์ชื่อแบรนด์/ผู้ขายของสินค้าที่แสดงเหนือชื่อสินค้า
• .shoply-product-name - จัดสไตล์ชื่อ/หัวข้อสินค้า

สไตล์สำหรับราคา:

• .shoply-product-price - จัดสไตล์ราคาสินค้า (หลังจากใช้ส่วนลดแล้ว)
• .shoply-product-original-price-before-discount - จัดสไตล์ราคาเดิมก่อนส่วนลด (มีขีดทับเป็นค่าเริ่มต้น)
• .shoply-product-discount-percent - จัดสไตล์ข้อความเปอร์เซ็นต์ส่วนลด (แสดงเป็นข้อความสีแดงตัวหนาโดยค่าเริ่มต้น)

สไตล์สำหรับปุ่มการทำงาน:

• .shoply-product-action-button - จัดสไตล์ปุ่มการทำงานหลัก (Add to Cart, View Product เป็นต้น)
• .shoply-product-action-button-sold-out - จัดสไตล์ปุ่มการทำงานเมื่อสินค้าหมด (สถานะปิดใช้งาน)

หมายเหตุ: ในส่วน Customize AI Search ของแอดมินคอนโซลแอป Shoply คุณสามารถตั้งค่าสิ่งที่จะเกิดขึ้นเมื่อลูกค้าคลิกปุ่มการทำงานได้—สามารถเพิ่มสินค้าลงตะกร้า พาไปยังหน้าสินค้า หรือคุณสามารถเลือกซ่อนปุ่มการทำงานทั้งหมดก็ได้

คลาส AI Summary

• .shoply-ai-summary-box - จัดสไตล์กล่องคอนเทนเนอร์สำหรับสรุปที่สร้างโดย AI
• .shoply-ai-summary-button - จัดสไตล์ปุ่มที่ใช้เรียกการสร้าง AI Summary

ตัวอย่างการปรับแต่งการ์ดสินค้าในผลการค้นหาด้วย CSS

เปลี่ยนสไตล์แบรนด์สินค้า

แบรนด์สินค้าจะแสดงอยู่เหนือชื่อสินค้า ต่อไปนี้คือการปรับแต่งที่พบบ่อย:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

ปรับแต่งชื่อสินค้า

ชื่อสินค้าเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุด ปรับแต่งให้เข้ากับแบรนด์ของคุณ:

/* Make product title bold and larger */
.shoply-product-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 8px;
}
 
/* Add hover effect */
.shoply-product-name:hover {
    color: #0066cc;
    text-decoration: underline;
}

ตัวอย่างการจัดสไตล์ราคาสินค้า

ทำให้ราคาของคุณโดดเด่นด้วยสไตล์แบบกำหนดเอง:

/* Style the current price (after discount) */
.shoply-product-price {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
    margin-top: 10px;
}
 
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
    text-decoration: line-through;
}

ปรับแต่งปุ่มการทำงาน

ปุ่มการทำงานของคุณ (Add to Cart, View Product) สามารถจัดสไตล์ให้เข้ากับดีไซน์ร้านค้าของคุณได้:

/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
}
 
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
 
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

จัดสไตล์รูปภาพสินค้า

ทำให้รูปภาพสินค้าของคุณน่าสนใจยิ่งขึ้นด้วยเส้นขอบ เงา หรือเอฟเฟกต์เมื่อโฮเวอร์:

/* Add border and shadow to product images */
.shoply-product-image {
    border-radius: 8px;
    border: 2px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
 
/* Add hover effect of the product image*/
.shoply-product-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

ตัวอย่างการปรับแต่งส่วน AI Summary

สำหรับร้านค้าที่เปิดใช้งาน AI Search, AI Summary จะปรากฏที่ด้านบนของผลการค้นหาและอธิบายทันทีว่าควรซื้ออะไรและเพราะเหตุใดโดยอิงจากผลการค้นหา — ก่อนที่ลูกค้าจะเลื่อนดูสินค้าเสียอีก

คุณสามารถปิดใช้งาน AI Summary ได้ในหน้า Customize AI Search ในแอดมินคอนโซลของแอป และยังสามารถปรับแต่งรูปลักษณ์ของมันด้วย CSS ตามที่แสดงด้านล่างได้ด้วย

จัดสไตล์กล่อง AI Summary

    /* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
 
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

ปรับแต่งปุ่ม AI Summary

โดยค่าเริ่มต้น AI Summary จะถูกย่อให้สั้นและกระชับเพื่อประหยัดพื้นที่หน้าจอ ลูกค้าสามารถคลิก “AI Summary Button” เพื่อขยายและดูรายละเอียดทั้งหมดได้ ต้องการให้เข้ากับแบรนด์ของคุณหรือไม่? คุณสามารถปรับแต่งปุ่มนี้ได้เช่นกัน! ลองดูตัวอย่างด้านล่าง

/* Customize the summary button */
.shoply-ai-summary-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
 
/* Add hover effect */
.shoply-ai-summary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

การแก้ไขปัญหา

การเปลี่ยนแปลง CSS ของฉันไม่แสดงผล

1. ตรวจสอบการพิมพ์ผิด: ตรวจสอบให้แน่ใจว่าชื่อคลาส CSS ของคุณสะกดถูกต้อง (ขึ้นต้นด้วย .shoply-)
2. ล้างแคชเบราว์เซอร์: บางครั้งเบราว์เซอร์อาจแคชสไตล์เก่าไว้
3. ตรวจสอบไวยากรณ์ CSS: ตรวจสอบให้แน่ใจว่ากฎ CSS ทั้งหมดของคุณปิดอย่างถูกต้องด้วย }
4. ใช้ !important: หากสไตล์ไม่ถูกนำไปใช้ คุณอาจต้องเพิ่ม !important เพื่อเขียนทับสไตล์เริ่มต้น:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

สไตล์ดูแตกต่างกันบนมือถือ

บางสไตล์อาจต้องปรับเฉพาะสำหรับมือถือ ใช้ media queries:

@media (max-width: 768px) {
    .shoply-product-name {
        font-size: 14px;
    }
}

ต้องการรีเซ็ตกลับเป็นสไตล์เริ่มต้น

เพียงล้างข้อความในช่อง CSS แล้วบันทึก แอปจะกลับไปใช้สไตล์เริ่มต้น

ต้องการความช่วยเหลือเพิ่มเติม?

หากคุณต้องการความช่วยเหลือเพิ่มเติมเกี่ยวกับการปรับแต่ง CSS:

1. ดูตัวอย่างภาพในตั้งค่าแอป (Product Card Preview และ AI Summary Preview)
2. อ้างอิงแหล่งข้อมูลเอกสาร CSS เช่น MDN Web Docs 
3. ติดต่อทีมซัพพอร์ตของเราเพื่อรับความช่วยเหลือแบบเฉพาะบุคคลได้ที่ customer-obsession@shoplyai.ai

ขอให้สนุกกับการปรับแต่ง! 🎨

ด้วยคลาส CSS เหล่านี้ คุณจะควบคุมรูปลักษณ์ของผลการค้นหาได้อย่างเต็มที่ ลองปรับแต่ง ทดสอบ และสร้างประสบการณ์การค้นหาที่เข้ากับแบรนด์ของคุณได้อย่างสมบูรณ์แบบ!