ป๊อป

ธีมที่เรียบง่ายที่สุดและออกแบบมาเพื่อให้เนื้อหาของคุณเข้าถึงได้ง่าย Pop เหมาะสำหรับร้านค้าที่มีสินค้าคงคลังขนาดเล็กถึงปานกลาง และได้รับการออกแบบให้มีแถบการนำทางด้านข้างขนาดใหญ่เพื่อให้เข้าถึงเนื้อหาของคุณได้ง่าย

ตัวอย่างร้านค้าออนไลน์ที่ใช้ Pop

เครื่องมือแก้ไขธีม

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

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

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

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

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

ป๊อป ประกอบด้วยส่วนคงที่ต่อไปนี้:

  • โลโก้และเมนู
  • แถบประกาศ
  • ส่วนท้าย
  • หน้าสินค้า
  • หน้าคอลเลกชัน
  • หน้ารายการคอลเลกชัน
  • บทความ

ส่วนไดนามิก

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

ป๊อป ประกอบด้วยส่วนไดนามิกต่อไปนี้:

  • โพสต์บล็อก
  • รายการคอลเลกชัน
  • คอลเลกชันแนะนำ
  • รูปภาพพร้อมข้อความ
  • สไลด์โชว์
  • สินค้าที่แนะนำ
  • จดหมายข่าว
  • แผนที่
  • Rich Text
  • วิดีโอ
  • HTML แบบกำหนดเอง

หน้าสินค้า

ในส่วนหน้าสินค้า คุณสามารถเพิ่มหรือลบองค์ประกอบต่อไปนี้ได้:

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

วิธีแก้ไขการตั้งค่าสำหรับหน้าสินค้า:

  1. จากเมนูดรอปดาวน์ในแถบด้านบน ให้เลือกหน้าสินค้า

  2. คลิกที่ ส่วน

  3. คลิกที่หน้าสินค้า

  4. วิธีแสดงแบรนด์หรือผู้ขายสินค้า ให้ทำเครื่องหมายที่แสดงผู้ขายสินค้า หากต้องการแสดงแบรนด์หรือผู้ขาย คุณต้องเพิ่มผู้ขายลงในสินค้าก่อน

  5. หากต้องการให้ลูกค้าสามารถซูมเข้ารูปภาพสินค้าได้โดยใช้เม้าส์เลื่อนเหนือรูปภาพสินค้า ให้ทำเครื่องหมายที่เปิดใช้การซูมรูปภาพ

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

  7. หากต้องการแสดงตัวเลือกจำนวน ให้ทำเครื่องหมายที่แสดงตัวเลือกจำนวน

  8. หากต้องการให้แสดงปุ่มชำระเงินแบบไดนามิก ให้ทำเครื่องหมายที่แสดงปุ่มชำระเงินแบบไดนามิก

  9. วิธีแสดงไอคอนสำหรับแชร์ลงโซเชียล ให้ทำเครื่องหมายที่เปิดใช้การแชร์สินค้า

  10. คลิกที่บันทึก

จดหมายข่าว

คุณสามารถเพิ่มการสมัครรับจดหมายข่าวลงในหน้าแรกของคุณได้ ซึ่งช่วยให้คุณสามารถรวบรวมอีเมลลูกค้าเพื่อใช้ในแคมเปญการตลาดผ่านอีเมลได้ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับการตลาดผ่านอีเมลได้ในบล็อกของ Shopify

วิธีเพิ่มการสมัครรับจดหมายข่าวลงในหน้าแรกของคุณ:

  1. คลิกที่ ส่วน

  2. คลิกที่เพิ่มส่วน > จดหมายข่าว

  3. ป้อนหัวเรื่องสำหรับการสมัครรับจดหมายข่าวของคุณในช่องหัวเรื่อง หัวเรื่องเริ่มต้นคือ "สมัครรับข้อมูลจดหมายข่าวของเรา"

  4. ป้อนหัวเรื่องย่อยสำหรับการสมัครรับจดหมายข่าวของคุณในช่องข้อความรอง ข้อความเริ่มต้นคือ "โปรโมชัน สินค้าใหม่ และส่วนลด ส่งตรงไปยังกล่องจดหมายคุณ"

  5. กำหนดสีพื้นหลังสำหรับส่วนการสมัครรับจดหมายข่าวได้โดยคลิกที่ตัวอย่างสีพื้นหลัง แล้วเลือกสีตามต้องการ

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

วิดีโอ

คุณสามารถเพิ่มวิดีโอที่มีโฮสต์บน YouTube หรือ Vimeo ลงในหน้าแรกของคุณได้ วิดีโอจะช่วยดึงดูดลูกค้าและสร้างความน่าสนใจให้แก่ธุรกิจของคุณ

วิธีเพิ่มวิดีโอลงในหน้าแรกของคุณ:

  1. คลิกที่ ส่วน

  2. คลิกเพิ่มส่วน > วิดีโอ

  3. ป้อนหัวเรื่องสำหรับวิดีโอของคุณในช่องหัวเรื่อง

  4. ป้อนลิงก์สำหรับแชร์วิดีโอของคุณในช่องลิงก์วิดีโอ

    ลิงก์สำหรับแชร์วิดีโอของ YouTube จะมีลักษณะดังนี้: https://youtu.be/OTJXAUZY9t0 คุณสามารถดูวิธีคัดลอกลิงก์สำหรับแชร์วิดีโอของ YouTube ได้ในบทความของ YouTube ความช่วยเหลือ

    ลิงก์สำหรับวิดีโอของ Vimeo จะมีลักษณะดังนี้: https://vimeo.com/281332510 คุณสามารถดูวิธีคัดลอกลิงก์สำหรับแชร์วิดีโอของ Vimeo ได้ในบทความจาก Vimeo Help Center นี้

  5. คลิกที่บันทึก

HTML แบบกำหนดเอง

ในส่วน HTML ที่กำหนดเอง คุณสามารถใช้โค้ด HTML เพื่อสร้างเนื้อหาที่กำหนดเองสำหรับหน้าแรกของคุณ เช่น คุณสามารถใช้ HTML เพื่อจัดรูปแบบบล็อกข้อความ สร้างตาราง หรือเนื้อหาแบบฝังจากเว็บไซต์ภายนอกได้

เพิ่มส่วน HTML ที่กำหนดเองลงในหน้าแรกของคุณ

  1. คลิก เพิ่มส่วน

  2. คลิก HTML แบบกำหนดเอง จากนั้นคลิกเลือก

  3. คลิก HTML ที่กำหนดเอง แล้วป้อนโค้ด HTML ที่คุณต้องการเพิ่มไปยังหน้าแรกของคุณ

  4. คลิกที่บันทึก

คุณสามารถใช้การตั้งค่าธีมเพื่อปรับแต่งสีและตัวพิมพ์บนร้านค้าออนไลน์ของคุณได้ คุณยังสามารถตั้งค่าลิงก์ไปยังบัญชีผู้ใช้โซเชียลมีเดีย แก้ไขการตั้งค่าตะกร้าสินค้า และเพิ่ม Favicon ได้

ป๊อป มีการตั้งค่าธีมดังต่อไปนี้:

  • สี
  • ตัวพิมพ์
  • Favicon
  • หน้าตะกร้า
  • โซเชียลมีเดีย
  • การชำระเงิน

สี

คุณสามารถเลือกสีส่วนต่างๆ ในร้านค้าออนไลน์ของคุณได้

วิธีปรับการตั้งค่าสีของคุณ

  1. คลิก การตั้งค่าธีม
  2. คลิก สี
  3. หากต้องการเปิดเครื่องมือเลือกสี ให้คลิกที่ตัวอย่างสีสำหรับสีของประเภทเนื้อหาที่คุณต้องการเปลี่ยนแปลง โดยบริเวณที่เลือกล่าสุดจะแสดงสีที่คุณเพิ่งเลือกไปสำหรับธีมของคุณ และบริเวณที่ใช้งานอยู่จะแสดงสีที่คุณกำลังใช้งานอยู่ในส่วนอื่นๆ ของธีม

    หากต้องการตั้งค่ารหัสสี Hex ที่เจาะจง ให้คลิกที่ช่องข้อความเพื่อป้อนรหัสสี

    หากต้องการตั้งค่าสีให้โปร่งใส ให้ลบค่ารหัส Hex ออกจากช่องข้อความ

  4. คลิกที่บันทึก

ตัวพิมพ์

คุณสามารถกำหนดขนาดและแบบอักษรของข้อความบนร้านค้าออนไลน์ของคุณได้ โดยคุณสามารถเลือกแบบอักษรของระบบหรือแบบอักษรที่กำหนดเองก็ได้

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

วิธีปรับแต่งการตั้งค่าตัวพิมพ์ของคุณ

  1. คลิก การตั้งค่าธีม

  2. คลิก ตัวพิมพ์

  3. คลิกที่ เปลี่ยน เพื่อใช้เครื่องมือเลือกแบบอักษรสำหรับข้อความแต่ละประเภท

  4. ค้นหาแบบอักษรโดยใช้ช่องค้นหา หรือคลิก โหลดเพิ่มเติม

    หากต้องการดูแบบอักษรที่พร้อมใช้งานทั้งหมด โปรดไปที่ไลบรารีแบบอักษรของ Shopify

  5. คลิกชื่อแบบอักษรที่คุณต้องการใช้งาน

  6. หากต้องการเปลี่ยนแบบอักษรเป็นรูปแบบอื่นให้คลิกที่ชื่อแบบอักษรปัจจุบัน จากนั้นเลือกรูปแบบอักษรใหม่จากเมนูดรอปดาวน์

  7. คลิกที่เลือก

  8. คลิกที่บันทึก

โซเชียลมีเดีย

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

วิธีปรับแต่งการตั้งค่าโซเชียลมีเดีย:

  1. คลิกที่การตั้งค่าธีม

  2. คลิกที่ โซเชียลมีเดีย

  3. วิธีอัปโหลด รูปภาพสำหรับแชร์ลงโซเชียล ในพื้นที่ของ รูปภาพสำหรับแชร์ลงโซเชียล ให้คลิกที่ เลือกรูปภาพ หรือ ค้นหารูปภาพฟรี

  4. วิธีเพิ่มลิงก์ไปยังบัญชีผู้ใช้โซเชียลมีเดียของคุณ ในพื้นที่ของบัญชีผู้ใช้โซเชียลมีเดีย ให้ใส่ลิงก์ไปยังบัญชีผู้ใช้ของคุณในช่องที่กำหนด ป้อนลิงก์แบบเต็ม เช่น https://instagram.com/shopify หรือ https://twitter.com/shopify

    ลิงก์ที่เชื่อมโยงไปยังบัญชีผู้ใช้โซเชียลมีเดียของคุณจะแสดงในส่วนท้ายของร้านค้าออนไลน์ของคุณ

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

    คุณสามารถเพิ่มปุ่มสำหรับแชร์ต่อไปนี้ได้:

- แชร์ใน Facebook - ทวีตใน Twitter - ปักหมุดบน Pinterest (โพสต์บล็อกไม่สามารถใช้งานการแชร์นี้ได้)

  1. คลิกที่บันทึก

หมายเหตุ: ในการแสดงปุ่มสำหรับแชร์ลงโซเชียลในหน้าสินค้าและโพสต์บล็อก คุณจะต้องเปิดใช้ปุ่มดังกล่าวในส่วนของหน้าเหล่านั้นด้วย

เพิ่มเมนูย่อยลงในแถบด้านข้าง

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

ขนาดโลโก้ร้านค้าที่เหมาะสมที่สุด

โลโก้ขนาดเล็กกะทัดรัดจะดูดีที่สุดในธีม Pop เนื่องจากแสดงโลโก้ของคุณในแถบด้านข้าง โลโก้ที่คล้ายกับแบนเนอร์ ที่มีความกว้างขนาดใหญ่และความสูงค่อนข้างเล็ก จะดูไม่ดีในธีมนั้น

ความกว้างสูงสุดสำหรับโลโก้ของคุณคือ 450 พิกเซล และความสูงสูงสุดคือ 200 พิกเซล จะปรับขนาดไฟล์โลโก้ที่คุณอัปโหลดให้เหมาะสมกับข้อจำกัดเหล่านั้น

รูปแบบที่เหมาะคือ PNG

ลดพื้นที่ว่างรอบโลโก้แถบด้านข้าง

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

นี่คือโลโก้ที่มีพื้นที่ว่างเชิงลบมากมายรอบๆ:

นี่คือโลโก้เดียวกันเมื่อตัดแต่งแล้ว — จะมีการครอบตัดพื้นที่ว่างเชิงลบออกไป

โลโก้ที่ไม่ได้ตัดแต่งจะปรากฏขึ้นด้านล่างเมื่อใช้ในธีม Pop:

โลโก้ที่ตัดแต่งแล้วจะปรากฏขึ้นด้านล่างเมื่อใช้ในธีม Pop:

เมื่อคุณได้อัปโหลดโลโก้ที่ตัดแต่งแล้วลงในเนื้อหาธีมของคุณแล้ว คุณสามารถปรับความกว้างของแถบด้านข้างได้โดยไปที่เครื่องมือแก้ไขธีม ในส่วนส่วนหัวและการนำทาง ให้แก้ไขค่า "การกำหนดขนาด > ความกว้างเมนูเดสก์ท็อป" ตามต้องการ

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

  1. ในส่วนชิ้นงาน ให้คลิกที่ timber.scss.liquid เพื่อเปิดสไตล์ชีตธีมของคุณในเครื่องมือแก้ไขรหัสออนไลน์ หรือไปที่ URL นี้

  2. ที่ด้านล่างของไฟล์ ให้เพิ่มสิ่งนี้:

```sass {% comment %} ฟังก์ชันการค้นหาสื่อต่อไปนี้สร้างสิ่งนี้: หน้าจอ @media และ (ความกว้างต่ำสุด: 1025 พิกเซล) { ... } แถบด้านข้างจะปรากฏเฉพาะเมื่อความกว้าง > 1025 พิกเซล {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. บันทึกไฟล์ของคุณ

แก้ไขการตั้งค่าสำหรับหน้าสินค้า

ในส่วนหน้าสินค้า คุณสามารถเพิ่มหรือลบองค์ประกอบต่อไปนี้ได้:

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

วิธีแก้ไขการตั้งค่าสำหรับหน้าสินค้า:

  1. จากเมนูดรอปดาวน์ในแถบด้านบน ให้เลือกหน้าสินค้า

  2. คลิกที่ ส่วน

  3. คลิกที่หน้าสินค้า

  4. วิธีแสดงแบรนด์หรือผู้ขายสินค้า ให้ทำเครื่องหมายที่แสดงผู้ขายสินค้า หากต้องการแสดงแบรนด์หรือผู้ขาย คุณต้องเพิ่มผู้ขายลงในสินค้าก่อน

  5. หากต้องการให้ลูกค้าสามารถซูมเข้ารูปภาพสินค้าได้โดยใช้เม้าส์เลื่อนเหนือรูปภาพสินค้า ให้ทำเครื่องหมายที่เปิดใช้การซูมรูปภาพ

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

  7. หากต้องการแสดงตัวเลือกจำนวน ให้ทำเครื่องหมายที่แสดงตัวเลือกจำนวน

  8. ในการแสดงปุ่มชำระเงินแบบไดนามิก ให้ทำเครื่องหมายที่แสดงปุ่มชำระเงินแบบไดนามิก

  9. วิธีแสดงไอคอนสำหรับแชร์ลงโซเชียล ให้ทำเครื่องหมายที่เปิดใช้การแชร์สินค้า

  10. คลิกที่บันทึก

ประเภทรูปภาพสินค้าที่ดีที่สุดสำหรับ Pop

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

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

ถ้าจะให้ดี รูปภาพที่แสดงของคุณควรมีอัตราส่วนความกว้างและความสูงเดียวกันทุกรูปเพื่อให้ดูสมบูรณ์แบบในหน้าคอลเลกชัน

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

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