ตั้งค่าหน้าร้าน Hosted Storefront ของ Shoprocket

Hosted Storefronts คืออะไร?

Shoprocket Hosted Storefronts มีให้บริการใน ทุกแผนของเรา.

Hosted Storefronts เป็นเว็บไซต์ย่อยอิสระที่โฮสต์อยู่บนเครือข่าย Shoprocket ซึ่งตั้งค่าได้อย่างรวดเร็วและสะดวก โดยไม่ต้องมีความรู้ทางเทคนิค เป็นทางเลือกที่เหมาะสมสำหรับผู้ขายที่ยังไม่มีเว็บไซต์ของตนเอง หรือผู้ที่ต้องการแยก Storefront ออกจากเว็บไซต์หลัก (ไม่ว่าจะเป็นทางเลือกหรือข้อจำกัดทางเทคนิคของเว็บไซต์).

เครือข่าย Shoprocket ใช้เครือข่ายการส่งเนื้อหา (CDN) ทั่วโลกเพื่อให้แน่ใจว่าได้รับความเร็วที่รวดเร็วและความสบายใจเมื่อกล่าวถึงเวลาออนไลน์ หน้าสถานะสาธารณะของเราคือ ที่นี่

Shoprocket เป็นแพลตฟอร์มอีคอมเมิร์ซ omnichannel ที่มอบประสบการณ์ลูกค้าที่ราบรื่นไม่ว่าผู้ใช้ของคุณจะช็อปในเว็บไซต์ของคุณเอง, บล็อกของบุคคลที่สาม, Hosted Storefront, หรือช่องทางโซเชียลมีเดียของคุณ ทั้งหมดเชื่อมโยงเข้าสู่แผงการจัดการการขายเดียวกัน.

คุณสามารถดูตัวอย่าง Hosted Storefront ได้ที่นี่: https://demo.shoprocket.io/

1. ไปที่หน้า Hosted Storefront

จากแผงควบคุมของคุณ คลิกที่ ช่องทางการขาย ในแถบด้านซ้าย แล้วเลือก >  Hosted Store.

จากที่นั่น คุณจะพบกับตัวแก้ไข Hosted Storefront พร้อมแผงตัวอย่างแบบเรียลไทม์เพื่อช่วยให้เห็นภาพการเปลี่ยนแปลงที่คุณทำ.

2. การปรับแต่งเบื้องต้นของ Storefront

ส่วน ปรับแต่ง ที่อยู่ด้านซ้ายควรเปิดอยู่แล้ว; ที่นี่คุณจะพบ:

• เปิดใช้งาน Hosted Store - เปิด/ปิดใช้งาน Storefront ที่โฮสต์ของคุณ การปิดจะซ่อน Storefront ของคุณอย่างสมบูรณ์.
• ลิงก์ไปยัง Storefront ของคุณ.
• ฟิลด์ Subdomain - ตั้งชื่อ subdomain: เราขอแนะนำให้ใช้ชื่อ Storefront ของคุณ เช่น my-Storefront-name.shoprocket.io.

คุณยังสามารถใช้ชื่อโดเมนของคุณเอง เช่น my-Storefront-name.com ติดต่อเราผ่านไอคอนแชทสดสำหรับคำแนะนำในการตั้งค่านี้.

3. การเปลี่ยนรูปแบบหน้า

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

• แสดงชื่อ Store - แสดง/ซ่อนชื่อ Storefront ขนาดใหญ่
• โลโก้ Store - แสดง/ซ่อนและเปลี่ยนโลโก้ Store ขนาดใหญ่.
• Favicon - เปลี่ยน favicon: ไอคอนเล็กๆ ที่ปรากฏในแถบ URL/แท็บของเบราว์เซอร์, ข้อมูลเพิ่มเติม ที่นี่.
• แสดงภาพปก - แสดง/ซ่อนและเปลี่ยนภาพใหญ่ที่แสดงอยู่ที่ด้านบนของหน้า (ขนาดที่แนะนำคือ 1200px กว้าง x 300px สูง, ในรูปแบบ .jpg).
• แสดงคำอธิบาย - แสดง/ซ่อนและเปลี่ยนข้อความแนะนำ/เกี่ยวกับ Storefront ด้านล่างภาพปก.

• แสดงข้อความด้านล่าง - แสดง/ซ่อนและเปลี่ยนพื้นที่ข้อความที่แสดงที่ด้านล่างของ Storefront ของคุณ ซึ่งเหมาะสำหรับข้อกำหนด & นโยบายการจัดส่ง.

4. กำหนดค่าตัวเลือกการแสดงผลิตภัณฑ์

ตรวจสอบให้แน่ใจว่า ผลิตภัณฑ์ ถูกเลือกใน ผลิตภัณฑ์/รถเข็น ดรอปดาวน์:

ตัวเลือกต่อไปนี้สามารถใช้ได้โดยการขยาย ส่วนตัวเลือก ด้านล่าง:

• ผลิตภัณฑ์ที่จะแสดง - เลือกที่จะแสดงผลิตภัณฑ์ทั้งหมดหรือเฉพาะผลิตภัณฑ์จากหมวดหมู่เฉพาะ.
• ขนาดผลิตภัณฑ์ - กำหนดขนาดที่จะแสดงในหน้า (เล็ก, กลาง หรือใหญ่).
• การปรับขนาดภาพ - กำหนดว่าภาพผลิตภัณฑ์ควรถูกตัดให้พอดีกับขนาดที่มีอยู่หรือขนาดที่ถูกปรับลดลง (การตัดจะทำให้ภาพทุกภาพมีขนาดเดียวกันและดูสม่ำเสมอ).
• สไตล์ปุ่ม - เลือกจาก "มาตรฐาน" (ปุ่มสี่เหลี่ยมผืนผ้าพร้อมข้อความ) "ขั้นต่ำ" (ปุ่มวงกลมพร้อมไอคอน) หรือ "เมื่อชี้" (ปุ่มวงกลมพร้อมไอคอนที่ปรากฏเฉพาะเมื่อชี้ไปที่ผลิตภัณฑ์)

• ลำดับการจัดเรียงเริ่มต้น - กำหนดลำดับที่ผลิตภัณฑ์จะถูกจัดเรียงตามค่าเริ่มต้น (เริ่มต้น, ใหม่สุด, ชื่อ: A-Z, ชื่อ: Z-A, ราคา: ต่ำ-สูง, ราคา: สูง-ต่ำ).
• ผลิตภัณฑ์ต่อต่อหน้า - ระบุจำนวนผลิตภัณฑ์ที่จะโหลดในแต่ละหน้า (การแบ่งหน้าจะปรากฏหรือหายไปโดยอัตโนมัติ).
• ซ่อนผลิตภัณฑ์ที่หมดสต็อก - เลือกว่าจะซ่อนผลิตภัณฑ์ที่หมดสต็อกอย่างสมบูรณ์หรือแสดงผลพร้อมข้อความ "หมดสต็อก".

5. เลือกฟังก์ชันของหน้าเพื่อรวมไว้

ตรวจสอบให้แน่ใจว่า ผลิตภัณฑ์ ถูกเลือกใน ผลิตภัณฑ์/รถเข็น ดรอปดาวน์ตามด้านบน ขยาย ส่วนรวม.

ฟังก์ชันต่อไปนี้สามารถเปิดหรือปิดได้:

ตัวกรองการ์ดผลิตภัณฑ์

• กล่องค้นหา - แสดงฟิลด์ "ค้นหา" ข้างบนการฝังผลิตภัณฑ์ของคุณ (ใช้ได้เฉพาะในการฝังผลิตภัณฑ์หลายรายการเท่านั้น)
• กล่องจัดเรียง - แสดงเมนูดรอปดาวน์ลำดับการจัดเรียง (ใช้ได้เฉพาะในการฝังผลิตภัณฑ์หลายรายการเท่านั้น)
• กล่องจำกัดต่อหน้า - แสดงเมนูดรอปดาวน์จำนวนรายการต่อหน้า (ใช้ได้เฉพาะในการฝังผลิตภัณฑ์หลายรายการเท่านั้น)
• กล่องสกุลเงิน - แสดงเมนูดรอปดาวน์สกุลเงินให้ลูกค้าเพื่อดูราคาในสกุลเงินที่ต้องการ (ต้องเปิดใช้งานสกุลเงินในตั้งค่า Storefront ของคุณก่อน)
• กล่องภาษา - แสดงเมนูดรอปดาวน์ของภาษาให้ลูกค้าสลับภาษา (ต้องตั้งค่าท้องถิ่นก่อนในตั้งค่าของคุณ ที่นี่)
• กล่องหมวดหมู่ - แสดงเมนูดรอปดาวน์ของหมวดหมู่ เพื่อให้ลูกค้าสามารถกรองผลิตภัณฑ์ตามหมวดหมู่ (ใช้ได้เฉพาะในการฝังผลิตภัณฑ์หลายรายการเท่านั้น)
  

ฟีเจอร์การ์ดผลิตภัณฑ์

• ชื่อผลิตภัณฑ์ - แสดงชื่อผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์).
• ราคาผลิตภัณฑ์ - แสดงราคาในผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์).
• ภาพผลิตภัณฑ์ - แสดงภาพฮีโร่ของผลิตภัณฑ์ (กำหนดค่าในแท็บ สื่อ ของผลิตภัณฑ์),
• สรุปผลิตภัณฑ์ - แสดงข้อความสรุปผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์)
• เปิด Modal เมื่อคลิกที่ภาพ - การคลิกที่ภาพจะเปิดรายละเอียดผลิตภัณฑ์ในโมดัลป๊อปอัพ
• ดูรายละเอียดผลิตภัณฑ์ - แสดงปุ่มเปิดรายละเอียดผลิตภัณฑ์ทั้งหมดในโมดัลป๊อปอัพ
• เพิ่มในรถเข็น - แสดงปุ่มเพื่อเพิ่มรายการในรถเข็น (ตัวเลือกจะปรากฏด้านบนเมื่อชี้ไป ปผลิตภัณฑ์ที่ต้องการตัวเลือก/การเปลี่ยนแปลงที่ซับซ้อนมากขึ้นจะเปิดดูโมดัลผลิตภัณฑ์เมื่อคลิก)
• จำนวนการสั่งซื้อมิน/แม็กซ์ - แสดงจำนวนการสั่งซื้อต่ำสุด & สูงสุดที่มีอยู่ หากตั้งค่าในผลิตภัณฑ์ (กำหนดค่าในแท็บ คลังสินค้า ของผลิตภัณฑ์).

• ริบบิ้นจัดส่งฟรี - แสดงริบบิ้น "จัดส่งฟรี" บนผลิตภัณฑ์ของคุณหากมีการจัดส่งฟรี (กำหนดค่าใน แท็บการจัดส่ง ของผลิตภัณฑ์).
  
• ริบบิ้นผลิตภัณฑ์ใหม่ - แสดงริบบิ้น "ใหม่" บนผลิตภัณฑ์ที่เพิ่มเข้ามาในช่วง 20 วันที่ผ่านมา
  
• ริบบิ้นดาวน์โหลดดิจิตอล - แสดงริบบิ้น "ดิจิตอลดาวน์โหลด" บนผลิตภัณฑ์ที่รวมไฟล์ดาวน์โหลดเมื่อซื้อ (กำหนดค่าใน แท็บไฟล์ ของผลิตภัณฑ์).
  

6. กำหนดค่าตัวป๊อปอัปการแสดงผลิตภัณฑ์

ตรวจสอบให้แน่ใจว่า ผลิตภัณฑ์ ถูกเลือกใน ผลิตภัณฑ์/รถเข็น ดรอปดาวน์ตามด้านบน ขยาย ส่วนดูผลิตภัณฑ์ป๊อปอัป.

ส่วนนี้ใช้ได้เฉพาะกับผลิตภัณฑ์ที่มีอย่างน้อยหนึ่งใน เปิด Modal เมื่อคลิกที่ภาพ หรือ ปุ่มดูผลิตภัณฑ์ เปิดใช้งานในส่วน 5 ข้างต้น.

ป๊อปอัปสามารถกำหนดค่าได้โดยการเปิดหรือปิดฟีเจอร์ต่อไปนี้:

• ชื่อผลิตภัณฑ์ - แสดงชื่อผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์).
• ราคาผลิตภัณฑ์ - แสดงราคาในผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์).
• ภาพผลิตภัณฑ์ - แสดงภาพฮีโร่ของผลิตภัณฑ์ (กำหนดค่าในแท็บ สื่อ ของผลิตภัณฑ์)
• สรุปผลิตภัณฑ์ - แสดงข้อความสรุปผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์)
• คำอธิบายผลิตภัณฑ์ - แสดงคำอธิบายผลิตภัณฑ์ (กำหนดค่าในแท็บ ทั่วไป ของผลิตภัณฑ์)
• เลือกจำนวน - แสดงฟิลด์เลือกจำนวน (หากปิด ใช้ได้เพียง 1 ชิ้นที่เพิ่มไปยังรถเข็นในครั้งเดียว)
• ภาพขนาดเล็ก - แสดงภาพขนาดเล็กในแกลเลอรี
• รีวิวผลิตภัณฑ์ - แสดงรีวิวผลิตภัณฑ์
• SKU ของผลิตภัณฑ์ - แสดงหน่วยการจัดเก็บสินค้า (SKU) ของผลิตภัณฑ์ (กำหนดค่าในแท็บ คลังสินค้า ของผลิตภัณฑ์).
• หมวดหมู่ผลิตภัณฑ์ - แสดงหมวดหมู่ที่เชื่อมโยงกับผลิตภัณฑ์ (กำหนดค่าในแท็บ หมวดหมู่ ของผลิตภัณฑ์).
• ไอคอนการแบ่งปันทางสังคม - แสดงปุ่มที่อนุญาตให้แบ่งปันผลิตภัณฑ์ไปยังช่องทางโซเชียลมีเดียด้วยการคลิก 1 ครั้ง
• ผลิตภัณฑ์ที่เกี่ยวข้อง - แสดงผลิตภัณฑ์ที่เกี่ยวข้อง (กำหนดค่าในแท็บ ที่เกี่ยวข้อง ของผลิตภัณฑ์).
• จำนวนการสั่งซื้อมิน/แม็กซ์ - แสดงจำนวนการสั่งซื้อต่ำสุด & สูงสุดที่มีอยู่ หากตั้งค่าในผลิตภัณฑ์ (กำหนดค่าในแท็บ คลังสินค้า ของผลิตภัณฑ์).

ตัวเลือกเพิ่มเติม

• การปรับขนาดภาพ - กำหนดว่าภาพผลิตภัณฑ์ควรถูกตัดให้พอดีกับขนาดที่มีอยู่หรือขนาดที่ถูกปรับลดลง (การตัดจะทำให้ภาพทุกภาพมีขนาดเดียวกันและดูสม่ำเสมอ).
• รูปแบบขนาดเล็ก - วางตำแหน่งภาพขนาดเล็กในแนวนอนใต้แกลเลอรีภาพ หรือในแนวตั้งทางซ้าย.
• สไตล์การเปลี่ยนแปลง - เลือกจากเมนู "ดรอปดาวน์" แบบมาตรฐานหรือเมนูข้อความ "ธรรมดา".

7. กำหนดค่าสไตล์การแสดงผลิตภัณฑ์

ตรวจสอบให้แน่ใจว่า ผลิตภัณฑ์ ถูกเลือกใน ผลิตภัณฑ์/รถเข็น ดรอปดาวน์ตามด้านบน ขยาย ส่วนสไตล์.

ใช้ "Eyedropper" เพื่อตั้งค่าสีของสิ่งต่อไปนี้:

•  ชื่อผลิตภัณฑ์
•  ราคาผลิตภัณฑ์
•  สรุปผลิตภัณฑ์
•  "ซื้อ" พื้นหลัง
•  "ซื้อ" ข้อความ
•  "ดู" พื้นหลัง
•  "ดู" ข้อความ
•  พื้นหลังผลิตภัณฑ์
•  "ดูรถเข็น" พื้นหลัง
•  "ดูรถเข็น" ข้อความ

ตัวเลือกป๊อปอัปเพิ่มเติม

• การpaddingผลิตภัณฑ์ - เพิ่มการpaddingภายในขอบของการ์ดผลิตภัณฑ์.
• เงาผลิตภัณฑ์ - เพิ่มเอฟเฟกต์เงานอกการ์ดผลิตภัณฑ์.
• มุมโค้ง - เพิ่มมุมโค้งให้กับการ์ดผลิตภัณฑ์.

CSS ที่กำหนดเองสามารถเพิ่มเพื่อให้ควบคุมรูปแบบของ Hosted Storefront ของคุณได้มากขึ้น ตามที่กล่าวไว้ ที่นี่.

8. กำหนดค่าตัวเลือกการแสดงรถเข็น

ตรวจสอบให้แน่ใจว่า รถเข็น ถูกเลือกใน ผลิตภัณฑ์/รถเข็น ดรอปดาวน์ตามด้านล่าง ขยาย ส่วนตัวเลือก.

ตัวเลือกต่อไปนี้สามารถใช้ได้:

• ตำแหน่งตะกร้า - เลือกตำแหน่งที่จะแสดง.

• สไตล์ตะกร้า - เป็นฟองน้ำที่ด้านบนของหน้าเว็บหรือในแถบด้านข้าง.

9. กำหนดสไตล์การแสดงรถเข็น

ตรวจสอบให้แน่ใจว่า รถเข็น ถูกเลือกใน ผลิตภัณฑ์/รถเข็น ดรอปดาวน์ตามที่กล่าวมาย้อนกลับให้ขยาย ส่วนสไตล์.

ใช้ "Eyedropper" เพื่อตั้งค่าสีต่อไปนี้:

• "สีตะกร้า"
• "พื้นหลังตะกร้า"
• "พื้นหลังเคาน์เตอร์ตะกร้า"
• "สีข้อความตะกร้า"
• "สีข้อความเคาน์เตอร์ตะกร้า"
• พื้นหลังรถเข็น
• สีข้อความรถเข็น
• พื้นหลังปุ่มรถเข็น
• สีปุ่มรถเข็น
• สีลิงก์ของรถเข็น
• สีของขอบรถเข็น

เมื่อคุณพอใจกับรูปลักษณ์ของ Storefront ให้กดปุ่ม ปรับปรุงการตั้งค่า เพื่อบันทึก แชร์ลิงก์ Storefront ของคุณ และเริ่มขาย.