Com construir una botiga en línia: productes, cistell, pagament i inventari

Per construir una botiga en línia necessites un catàleg de productes, un cistell, un pagament que es processi amb un proveïdor com Stripe, una manera de registrar les comandes i descomptar l'estoc, i una vista d'administració per preparar-les. Un creador d'apps amb IA pot muntar tot això a partir d'una descripció clara. El que més val la pena pensar no és l'aparador, sinó les parts que tenen a veure amb els diners: quan una comanda es considera pagada, com es reserva l'estoc i com gestiones els impostos, els enviaments i els reemborsaments.

Botiga pròpia o Shopify? Decideix primer

Sigues honest amb això abans de construir res.

Una plataforma de comerç allotjada (Shopify, Squarespace Commerce, WooCommerce i similars) sol ser millor quan:

• Vens productes físics amb tarifes d'enviament, etiquetes i devolucions
• Necessites calcular impostos en moltes regions
• Un equip no tècnic afegirà productes i processarà comandes cada dia
• Vols una botiga d'apps amb complements: ressenyes, màrqueting per correu, fidelització
• Vens per diversos canals i necessites un sol recompte d'estoc

Els plans de Shopify són una subscripció mensual amb descompte si es paga anualment, i els pagaments amb targeta tenen comissions de processament a sobre; consulta la seva pàgina de preus per al teu país, perquè els preus varien segons la regió.

Una botiga pròpia sol funcionar millor quan:

• El producte és inusual: configuradors per encàrrec, reserves més productes, descàrregues digitals amb llicències, llistes de preus B2B per client
• La botiga és una part d'una aplicació més gran (una plataforma de cursos, un lloc de socis, un mercat)
• Vens un catàleg petit i vols control total sobre el disseny i el flux de pagament
• Vols ser propietari del codi i evitar dependre d'una plataforma

Molts venedors petits van millor amb una plataforma. Si les teves necessitats són habituals, és una bona notícia: pren la drecera.

Què necessita una botiga en línia

Dades

Guarda el preu en el moment de la compra a cada línia de comanda. Si canvies un preu el mes que ve, les comandes antigues han de continuar mostrant el que va pagar el client.

Pàgines

• Aparador: inici, pàgines de categoria o col·lecció, pàgines de producte, cistell, redirecció al pagament i confirmació de la comanda.
• Administració: productes i estoc, comandes amb estat (pagada, preparada, enviada, reemborsada), clients, xifres de vendes senzilles.
• Legal i polítiques: enviaments, devolucions, privadesa i condicions. Els compradors les busquen abans de comprar, i moltes regions n'exigeixen algunes per llei.

Permisos

Permet que els compradors comprin sense compte: el pagament com a convidat elimina un pas, i els comptes poden arribar més endavant. Només els administradors han de poder veure les comandes i editar els productes; protegeix l'àrea d'administració amb un inici de sessió real i comprovacions al servidor.

Com ha de funcionar el pagament

El patró més segur per a una botiga pròpia és una pàgina de pagament allotjada. Amb Stripe:

1. El comprador fa clic a Pagar. El teu servidor torna a comprovar els preus i l'estoc des de la base de dades —sense confiar mai en el que envia el navegador— i crea una sessió de Stripe Checkout.
2. El comprador paga a la pàgina de Stripe. Les dades de la targeta mai arriben al teu servidor.
3. Stripe crida el webhook de la teva aplicació per dir que el pagament s'ha fet. Només llavors marques la comanda com a pagada i descomptes l'estoc.
4. El comprador arriba a la teva pàgina de confirmació, i tu envies un correu de confirmació.

Dos errors a evitar: crear la comanda «pagada» a partir de la redirecció de la pàgina d'èxit (la gent tanca pestanyes, i les redireccions es poden falsificar) i calcular el total al navegador. Tots dos són fàcils d'equivocar per a una IA si no ho especifiques.

La tarifa estàndard de Stripe és un percentatge més una quota fixa per cada pagament amb targeta reeixit, sense cost d'alta ni mensual (a setembre de 2026); la tarifa exacta depèn del teu país i de la targeta. Construeix-ho tot primer en mode de prova de Stripe amb els seus números de targeta de prova. La nostra guia sobre com afegir pagaments a la teva app explica claus, mode de prova i webhooks.

Decisions sobre impostos, enviaments i inventari

Són decisions empresarials que la IA no pot prendre per tu:

• Impostos. Si has de cobrar IVA o impost de vendes, i a quin tipus, depèn d'on siguis tu i els teus clients. Stripe ofereix un producte per a això (Stripe Tax), o pots fixar tipus si la teva situació és senzilla. Demana-ho a un comptable si tens dubtes.
• Enviaments. Comença amb pocs preus fixos (nacional, internacional, gratuït a partir d'un llindar). Les tarifes de transportistes en temps real i la impressió d'etiquetes són on plataformes com Shopify t'estalvien molta feina.
• Inventari. Decideix si l'estoc es reserva quan comença el pagament o només quan aquest es completa. Per a botigues petites, descomptar l'estoc en el pagament i tornar a comprovar-lo just abans és més senzill; llavors pot passar de tant en tant que es venguin d'més l'últim article, així que decideix com ho gestionaràs. Per al seguiment d'estoc més enllà de la botiga, consulta com construir una app de gestió d'inventari.

Un primer prompt que funciona

Construeix una botiga en línia per a Loam & Clay, un petit estudi de ceràmica que ven tasses, bols i gerros. Aparador: pàgina d'inici amb productes destacats, pàgina de botiga amb filtres per categoria, pàgines de producte amb galeria d'imatges, variants de color i estat d'estoc, i un cistell que es desplega lateralment. Guarda productes, variants, comandes i línies de comanda en una base de dades i crea 10 productes realistes. Àrea d'administració (cal iniciar sessió) per afegir i editar productes, pujar imatges, canviar l'estoc i veure les comandes amb estat pagada / preparada / enviada. El botó de pagament pot ser un marcador de posició de moment; afegirem Stripe Checkout després. Disseny càlid i minimalista, pensat primer per al mòbil. Sense ressenyes falses ni afirmacions com «enviament gratuït a tot el món».

Començar amb el pagament com a marcador de posició és intencionat: primer fes bé el catàleg i l'administració, i després afegeix els pagaments en un pas separat que puguis provar com cal.

Passos de construcció

1. Catàleg i pàgines de producte, amb noms, preus i fotos reals.
2. Cistell que sobrevisqui a una recàrrega de la pàgina.
3. Administració: productes, variants, estoc, pujada d'imatges. Protegeix-la amb inici de sessió.
4. Stripe Checkout en mode de prova, amb el servidor que torna a comprovar preus i estoc.
5. Webhook que marca les comandes com a pagades i descompta l'estoc. Prova-ho de principi a fi amb una targeta de prova.
6. Correus de comanda al client i a tu.
7. Polítiques i SEO: pàgines d'enviaments i devolucions, títols i descripcions de producte, imatges per compartir. Consulta SEO per a webs fetes amb IA.
8. Publicar: canvia a les claus reals de Stripe, fes una comanda petita real tu mateix i reemborsa-la.

Errors habituals

• Confiar en els preus del navegador. Calcula sempre-ho de nou al servidor.
• Marcar les comandes com a pagades a la pàgina d'èxit en lloc de fer-ho amb el webhook.
• Sobreescriure els números d'estoc en lloc de registrar moviments: perds l'historial de per què ha canviat l'estoc.
• Llançar sense pàgines d'enviaments i devolucions.
• Imatges de producte enormes. Comprimeix-les i serveix-les des d'emmagatzematge de fitxers, no dins del codi.
• Construir llistes de desitjos, ressenyes i punts de fidelització abans de la primera venda.

Costos de funcionament

Prevé: allotjament i una base de dades, comissions de processament de pagaments en cada venda, un domini, un proveïdor de correu per a les confirmacions de comanda i possiblement un servei d'impostos. Una botiga pròpia evita la subscripció a una plataforma i les comissions de les apps, però assumeixes el manteniment: quan alguna cosa falla al pagament, la reparació és teva.

Si vols tenir venedors diferents a tu —diversos proveïdors, cadascun cobrat— això és un mercat, amb regles de pagament diferents. Consulta com construir un mercat.

Construir-ho amb Mythex

A Mythex descrius la botiga i l'agent construeix el catàleg, el cistell i l'administració en una vista prèvia en directe, amb una base de dades Postgres per a productes i comandes i emmagatzematge de fitxers per a les imatges de producte. La documentació de casos d'ús de botiga recomana exactament l'ordre anterior: primer el catàleg, després el pagament.

Els pagaments usen el teu propi compte de Stripe: afegeixes les claus de Stripe com a secrets del projecte i demanes a l'agent que afegeixi Checkout, i després proves amb les targetes de prova de Stripe a la vista prèvia (recepta de Stripe). Els webhooks necessiten una URL pública, així que publica abans d'apuntar-hi Stripe (recepta de webhooks). Els impostos, els enviaments i la sincronització d'inventari no són funcions integrades de Mythex, i no hi ha integració nativa amb Shopify: si necessites això com a producte acabat, Shopify és la millor opció. Per a un punt de partida, consulta les plantilles de botiga, com la botiga de comerç electrònic.

Preguntes