# เพิ่มคอมเมิร์ซให้เว็บไซต์ที่คุณมีอยู่แล้ว

> สคริปต์แท็กแบบ async หนึ่งแท็กเปลี่ยนเว็บไซต์ใดก็ได้ให้เป็นร้านค้า ใช้ได้กับ WordPress, Webflow, Ghost, Carrd, Framer, HTML ล้วน, React / Next.js / Vue ไม่ต้องสร้างใหม่ ไม่ต้องใช้ปลั๊กอิน ไม่ต้องเปลี่ยนธีม

สคริปต์แท็กแบบ async หนึ่งแท็ก กับคอนเทนเนอร์ HTML ไม่กี่อัน เว็บไซต์ที่คุณมีอยู่ก็กลายเป็นร้านค้า ใช้ได้กับ WordPress, Webflow, Ghost, Carrd, Framer, HTML ล้วน หรือ CMS ใดๆ ที่ให้วางสคริปต์แท็ก ไม่ต้องสร้างใหม่ ไม่ต้องใช้ปลั๊กอิน ไม่ต้องเปลี่ยนธีม

[เริ่มทดลองใช้ฟรี](https://app-v3.shoprocket.io/signup?lang=th)[ดูสนิปเป็ต](#the-snippet)

ทดลองใช้ฟรี 14 วัน

ไม่ต้องใช้บัตรเครดิต

ค่าธรรมเนียมแพลตฟอร์ม 0%

ใช้ได้ทุกแผน

1

บรรทัดที่ต้องฝัง

ทุกแบบ

เว็บไซต์

ครบ

ตะกร้าและชำระเงิน

0%

ค่าธรรมเนียมแพลตฟอร์ม

● ปัญหา

## คุณมีเว็บไซต์ คุณอยากขายบนนั้น ไม่ใช่สร้างใหม่

แพลตฟอร์มคอมเมิร์ซส่วนใหญ่อยากให้คุณเปลี่ยนเว็บไซต์ปัจจุบันมาใช้ของเขา WordPress ขอให้ใช้ WooCommerce Wix อยากให้ใช้ Wix Stores Squarespace อยากให้ใช้ Squarespace Commerce Shopify อยากให้ทั้งหมดอยู่บนสแต็กของเขา คุณต้องการร้านค้า ไม่ใช่โปรเจกต์ย้ายระบบ

01

### เว็บไซต์ของคุณใช้งานได้ดีอยู่แล้ว

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

02

### CMS ของคุณไม่ใช่ปัญหา

WordPress ดีอยู่แล้ว Webflow สวย Ghost สมบูรณ์แบบสำหรับเนื้อหา Carrd เร็ว ไม่มีตัวไหนควรบังคับให้คุณจากไปเพียงเพราะมันไม่รองรับคอมเมิร์ซโดยกำเนิด

03

### ร้านค้าของคุณควรอยู่ในเว็บไซต์ของคุณ

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

● ทำงานอย่างไร

## HTML สามบรรทัด วิดเจ็ตสี่ประเภท

วางสคริปต์โหลดเดอร์ครั้งเดียว วางคอนเทนเนอร์ HTML ตรงที่คุณต้องการให้คอมเมิร์ซปรากฏ วิดเจ็ตเมานต์อัตโนมัติทุกอันที่พบเมื่อเรนเดอร์

การติดตั้ง

### สคริปต์แท็กเดียว Async ไม่บล็อก

สคริปต์แท็กอยู่ใน head ของเว็บไซต์ หรือก่อนแท็กปิด body หรือในเทมเพลต header ของ CMS ของคุณ โหลดแบบ async จึงไม่เคยบล็อกการเรนเดอร์หน้าเว็บของคุณ เมื่อโหลด มันสแกนหน้าเพื่อหาองค์ประกอบ HTML ใดๆ ที่มีแอตทริบิวต์ data-shoprocket และเมานต์วิดเจ็ตที่ตรงกันตรงนั้น หากไม่มีองค์ประกอบวิดเจ็ตบนหน้า มันยังบูตตะกร้าลอย เพื่อให้ปุ่มร้านค้าที่อื่นบนเว็บไซต์ของคุณทำงานต่อได้

- ✓ โหลดแบบ async ไม่กระทบ LCP หรือ CLS
- ✓ เมานต์องค์ประกอบ data-shoprocket ทุกอันบนหน้าอัตโนมัติ
- ✓ ตะกร้าลอยบูตทั่วเว็บไซต์แม้ในหน้าที่ไม่มีวิดเจ็ต

● ประเภทวิดเจ็ต

## สี่รูปแบบ ทั้งหมดบนหน้าเดียวกันได้

เลือกอันที่ต้องการตรงที่ต้องการ หน้าแรกมีวิดเจ็ตสินค้าแนะนำได้ หน้าร้านโดยเฉพาะมีแคตตาล็อกเต็มได้ และบทความมีเอ็มเบดสินค้าเดียวแบบอินไลน์ได้ ทั้งหมดบนเว็บไซต์เดียวกัน จากร้านค้าเดียวกัน

01

### แคตตาล็อก

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

02

### สินค้า

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

03

### ตะกร้า

ตัวตะกร้าเองในรูปวิดเจ็ตบนหน้า หรือให้ตะกร้าลอยจัดการทั่วเว็บไซต์ สคริปต์บูตให้อัตโนมัติ

04

### ชำระเงิน

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

● ทำงานในที่ที่คุณอยู่

## ถ้าใส่สคริปต์แท็กได้ Shoprocket ก็ฝังได้

ทดสอบและมีเอกสารสำหรับตัวสร้างเว็บด้านล่างโดยเฉพาะ ในทางปฏิบัติ ที่ไหนที่วาง HTML ได้ก็ใช้ได้

01

### WordPress

โฮสต์เองหรือ WordPress.com ธีมใดก็ได้ ตัวสร้างหน้าใดก็ได้ (Elementor, Gutenberg, Divi ฯลฯ) ไม่ต้องใช้ WooCommerce ไม่มีปลั๊กอินให้ดูแล

02

### Webflow

ใช้องค์ประกอบ Embed ตรงที่ต้องการให้เป็นร้านค้า คงแผน Webflow CMS ของคุณไว้ ไม่ต้องอัปเกรด Ecommerce

03

### Ghost

การ์ด HTML ในโพสต์หรือหน้าใดก็ได้ Ghost เหมาะกับครีเอเตอร์ที่ส่งเนื้อหาควบคู่กับสินค้า

04

### Carrd, Framer, Notion

ตัวสร้างแบบหน้าเดียวและเน้นดีไซน์ ใช้ได้กับเอ็มเบด Carrd Pro Standard, คอมโพเนนต์โค้ด Framer และ Notion ผ่านตัวห่อ Super.so / HeyNotion

05

### HTML ล้วนและ JAMstack

Cloudflare Pages, Netlify, Vercel, HTML ล้วน บิลด์ Jekyll / Hugo / Astro / 11ty ใดก็ได้ วางสนิปเป็ตแล้วไปต่อ

06

### React, Next.js, Vue, Svelte

ติดตั้งแพ็กเกจ npm \`@shoprocket/widget\` เพื่อการรวมกับเฟรมเวิร์กอย่างแน่นแฟ้น นำเข้าคอมโพเนนต์ เมานต์ตรงที่ต้องการให้เป็นร้านค้า

● ประสิทธิภาพ

## Core Web Vitals ของคุณยังเขียวอยู่

ประเด็นทั้งหมดของคอมเมิร์ซที่ฝังได้ทุกที่คือเว็บไซต์ของคุณยังทำงานเหมือนเว็บไซต์ของคุณ

เป็นตัวเลข

### สคริปต์ async คอนฟิกที่แคช เมานต์เร็ว

สคริปต์โหลดเดอร์ส่งแบบ async LCP จึงไม่ถูกแตะ คอนฟิกร้านค้าดึงจาก API ของเราและแคชที่เอดจ์ (TTL 1 ชั่วโมง) การเข้าชมซ้ำจึงไม่ต้องสอบถามใหม่ วิดเจ็ตเรนเดอร์ในคอนเทนเนอร์ที่สำรองไว้ จึงไม่มี layout shift เว็บไซต์ที่เขียวบน Lighthouse ก่อนฝังก็ยังเขียวหลังฝัง

- ✓ สคริปต์แท็ก async: ไม่กระทบ LCP หรือ CLS
- ✓ คอนฟิกร้านค้าแคชที่เอดจ์ ส่งจาก CDN เมื่อเข้าชมซ้ำ
- ✓ คอนเทนเนอร์เมานต์ที่สำรองไว้หมายความว่าไม่มี cumulative layout shift

● คำถามที่พบบ่อย

## คำถามเรื่องการฝัง ตอบให้แล้ว

สิ่งที่คนถามก่อนวางสนิปเป็ต

ตะกร้าและขั้นตอนชำระเงินทำงานที่ไหนจริงๆ +

ตะกร้า ที่อยู่ และการเลือกการจัดส่งทั้งหมดทำงานภายในเอ็มเบดบนหน้าของคุณ ไม่มีใครออกจากเว็บไซต์ของคุณระหว่างส่วนเรียกดูและเลือก ขั้นตอนชำระเงินสุดท้ายเปลี่ยนเส้นทางไปยังผู้ประมวลผลการชำระเงินที่เชื่อมต่อของคุณ (Stripe, PayPal) เพื่อให้สอดคล้อง PCI และส่งลูกค้ากลับมาที่เว็บไซต์ของคุณเพื่อดูการยืนยันคำสั่งซื้อ นี่คือวิธีที่ขั้นตอนชำระเงินสมัยใหม่ทุกแบบทำงาน การแสร้งว่าไม่ใช่จะไม่ซื่อสัตย์

มีหลายวิดเจ็ตบนหน้าเดียวกันได้ไหม +

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

ทำให้เว็บไซต์ช้าลงไหม +

ไม่มีผลกระทบที่มีนัยสำคัญ สคริปต์โหลดเดอร์เป็น async จึงไม่บล็อกการเรนเดอร์หน้าของคุณ คอนฟิกร้านค้าแคชที่เอดจ์ ผู้เข้าชมซ้ำจึงไม่ต้องสอบถามใหม่ วิดเจ็ตเมานต์ในคอนเทนเนอร์ที่สำรองไว้ จึงไม่มี cumulative layout shift หากเว็บไซต์ของคุณผ่าน Core Web Vitals มาก่อน ก็ยังผ่านหลังจากนั้น

ถ้าฉันใช้ React / Next.js / Vue ล่ะ +

ติดตั้งแพ็กเกจ npm \`@shoprocket/widget\` โดยตรง นำเข้าคอมโพเนนต์ เมานต์ตรงที่ต้องการร้านค้า ส่ง props สำหรับการตั้งค่า ให้การควบคุมละเอียดที่การฝังด้วยสคริปต์แท็กให้ไม่ได้

แล้ว Wix และ Squarespace ล่ะ +

Squarespace ใช้ได้ดี ใช้องค์ประกอบ Code Block ในแผน Core ขึ้นไป วางสนิปเป็ต เสร็จ Wix แยกเอ็มเบดของบุคคลภายนอกทุกอันไว้ใน iframe ซึ่งทำให้ขั้นตอนชำระเงินใช้ไม่ได้ เราจึงไม่แนะนำ คำตอบตามตรงสำหรับผู้ใช้ Wix คือหน้าร้านที่โฮสต์ของ Shoprocket หรือย้ายไปตัวสร้างที่อนุญาตเอ็มเบดจริง ดูหน้า Wix โดยเฉพาะของเราสำหรับสามทางออก

ใช้โดเมนของฉันเองได้ไหม +

ได้ วิดเจ็ตทำงานบนโดเมนใดก็ตามที่หน้าโฮสต์อยู่ สินค้า ตะกร้า และขั้นตอนชำระเงินของคุณทั้งหมดอยู่ที่ your-site.com ไม่มีซับโดเมน Shoprocket แยก ไม่มีการเปลี่ยนเส้นทาง ลูกค้าไม่รู้ว่ามีบุคคลภายนอกอยู่เบื้องหลังเลเยอร์คอมเมิร์ซ

ปรับแต่งหน้าตาวิดเจ็ตอย่างไร +

วิดเจ็ตสืบทอด CSS ของเว็บไซต์คุณสำหรับบริบทเลย์เอาต์ (ความกว้างคอนเทนเนอร์ พื้นฐานตัวอักษร) สำหรับ UI คอมเมิร์ซเอง เลือกจากธีม 40+ แบบ พร้อมชุดสีสว่าง / มืดผ่านแอตทริบิวต์ data บนองค์ประกอบเมานต์ สำหรับการปรับแต่งลึกกว่านั้น ตั้งตัวแปร CSS ในสไตล์ชีตของเว็บไซต์ แล้ววิดเจ็ตจะรับไป

ถ้ามีคอนฟิกเอ็มเบดหลายชุดสำหรับหน้าต่างๆ ล่ะ +

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

Shoprocket ไม่เก็บค่าธรรมเนียมแพลตฟอร์ม 0% จริงหรือ +

จริง ผู้ประมวลผลการชำระเงินของคุณ (Stripe, PayPal ฯลฯ) ยังเรียกเก็บค่าธรรมเนียมการประมวลผลมาตรฐานของเขา นั่นคือต้นทุนของการโอนเงิน แต่ Shoprocket ไม่บวกเพิ่มเลย ค่าธรรมเนียมแพลตฟอร์ม 0% ใช้กับทุกแผน รวมถึงการติดตั้งแบบฝังทุกที่ทุกครั้ง

## เว็บไซต์ของคุณ ตอนนี้มีคอมเมิร์ซ

ทดลองใช้ฟรี 14 วัน ไม่ต้องใช้บัตรเครดิต วางสนิปเป็ต เปิดร้านค้า และเก็บเว็บไซต์เดิมไว้

[เริ่มทดลองใช้ฟรี](https://app-v3.shoprocket.io/signup?lang=th)[คุยกับเรา](https://v3.shoprocket.io/th/contact.md)

---

- HTML version: https://v3.shoprocket.io/th/features/sell-on-any-website
- Language: ไทย (th)
- Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [日本語](https://v3.shoprocket.io/ja/features/sell-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-on-any-website.md)