PokeStore: un tema de WordPress a medida para tiendas de cartas coleccionables

Una tienda de cartas coleccionables no vende lo mismo que una tienda de ropa. Quien compra una carta suelta quiere verla de cerca, saber en qué estado está y si está bien centrada. Quien busca una caja de sobres japonesa la busca por su código, no por su nombre. Y casi nadie compra una sola cosa: lo normal es ir guardando lo que te interesa y volver otro día.

PokeStore es un tema de WordPress y WooCommerce que hice desde cero pensando en eso. Empezó como un encargo para una tienda que al final tomó otro camino, y decidí terminarlo igualmente. Lleva meses de trabajo y es uno de los proyectos más grandes que tengo.

Este artículo es un recorrido por la tienda tal como la vería quien compra en ella, más un apartado final para quien la gestiona. El tema no está publicado para descargar. Si tienes una tienda y te interesa, escríbeme.

La tienda de ejemplo

Todas las capturas son de una instalación local con datos de prueba: Abdell Cards, una tienda con 229 productos de Pokémon y One Piece en japonés, coreano, chino, inglés y español. Hay cajas de sobres, sobres sueltos, cartas individuales, fundas, protectores y algún pin del Pokémon Center. El nombre de la tienda, el logo y los textos salen del Personalizador; el tema se llama PokeStore por dentro, pero no lo impone por fuera.

La portada

Lo primero es un slider a pantalla completa con las novedades. Cada diapositiva tiene su fondo, su producto y su botón, y todo se edita desde el panel sin tocar código. Se puede pasar con las flechas, con los puntos de abajo o con el teclado.

Debajo vienen las categorías destacadas, cada una con su imagen y el número de productos, y una sección de novedades con pestañas por franquicia. Más abajo hay un bloque para la comunidad (WhatsApp e Instagram) y otro con la dirección, el horario y el mapa de la tienda física.

En toda la tienda hay dos botones flotantes: WhatsApp a la izquierda y el carrito a la derecha. Los dos se pueden desactivar.

El catálogo y los filtros

Los filtros de una tienda genérica (precio y categoría) no bastan aquí. El panel lateral filtra por lo que de verdad usa un coleccionista:

• Franquicia: Pokémon, One Piece, accesorios, merchandising.
• Expansión: 151, Heroes Ascendentes, Black Bolt...
• Idioma: japonés, coreano, chino, inglés o español, con su bandera.
• Tipo de producto: caja de sobres, blister, Elite Trainer Box, lata, carta suelta...
• Rango de precio, con un deslizador de dos puntos.

Arriba hay dos filtros rápidos, En stock y Ofertas. Cada opción muestra cuántos productos tiene y se pueden combinar varias. Lo que tienes activo aparece como chips en la parte superior, cada uno con su X, junto a un botón para borrarlos todos.

Filtrar no recarga la página: los productos cambian al momento. Pero la URL sí cambia, así que puedes compartir una búsqueda filtrada o volver atrás con el navegador y recuperar los filtros que tenías.

Buscar por código

En este mundo, cada producto tiene un código: OP01 es la primera expansión de One Piece, sv11b es Black Bolt, y la tienda tiene su propio SKU para cada artículo. El buscador de la cabecera los entiende todos.

Los resultados salen mientras escribes, con la foto, la categoría, el código en una pastilla y el precio (tachado si está en oferta). Desde el mismo resultado se puede añadir a la lista de deseos o al carrito. Se cierra con Esc.

La ficha de una carta

Aquí es donde más se nota que el tema está hecho para cartas.

Efecto holográfico

Al pasar el ratón por encima, la carta se inclina en 3D siguiendo el cursor y un reflejo tornasolado se desplaza por su superficie, como cuando giras una carta holo bajo la luz. Al quitar el ratón vuelve a su sitio con un pequeño rebote.

El mismo efecto, más suave, aparece en las tarjetas del catálogo. En pantallas táctiles y en sistemas con el movimiento reducido activado no se aplica: la carta se queda quieta y no gasta batería.

Lupa de inspección y guía de centrado

Con el botón Lupa de Inspección, el cursor se convierte en una lupa redonda que amplía la zona de la carta que tienes debajo. Sirve para mirar las esquinas, los bordes o el brillo de la superficie antes de comprar.

En ese modo aparece también Guía Centrado, que dibuja sobre la carta la retícula que usan PSA y BGS para medir el centrado: el margen exterior y el área donde debería caer la ilustración.

Estado de la carta

Junto al título, cada producto lleva su estado: Near Mint, Lightly Played, Played o graduada. El enlace Guía de Estados TCG abre una ventana que explica cada uno con los criterios de Cardmarket, TCGplayer y PSA: qué se tolera en el centrado, las esquinas, los bordes y la superficie, y qué nota de graduación cabe esperar.

Para quien empieza a coleccionar, esto resuelve la duda más habitual. Para la tienda, deja claro qué significa cada estado antes de que haya una reclamación.

El resto de la ficha

• Stock bajo. Si queda una sola unidad, aparece ¡Quedan solo 1! en naranja. Si un producto admite reservas, lo indica también.
• Compartir carta por WhatsApp, Telegram o X, o copiar el enlace.
• Sellos de confianza: autenticidad, embalaje, envío y garantía. Los textos se cambian desde el panel.
• Descripción, información adicional y valoraciones en pestañas.
• También te puede interesar: un carrusel con los productos que la tienda haya elegido como relacionados o, si no ha elegido ninguno, los que WooCommerce sugiere.
• Visto recientemente: los últimos productos que has abierto, sin repetir el que estás viendo.

Productos con variantes

Muchas cartas existen en varios idiomas a precios distintos. En lugar del desplegable de WooCommerce, el tema muestra cada idioma como un botón. Al elegir uno, el precio, el stock y la oferta se actualizan sin recargar. Las combinaciones agotadas aparecen tachadas.

Las ofertas llevan un distintivo con el porcentaje exacto de descuento. Si cada variante tiene un descuento distinto, muestra el mayor: Hasta -40%.

Vista rápida y carrito lateral

En el catálogo, al pasar el ratón por un producto aparece un icono de ojo. Abre una vista rápida con la foto, el precio y el botón de compra, para añadir algo al carrito sin salir de la lista.

Al añadir un producto desde el catálogo o la vista rápida, se abre un carrito lateral. Desde ahí puedes cambiar cantidades, quitar productos o vaciarlo, y el subtotal se recalcula al momento. El icono del carrito de la cabecera también abre este panel en vez de llevarte a otra página.

Tanto la vista rápida como el carrito se cierran con Esc, con la X o haciendo clic fuera. Mientras están abiertos, el tabulador no se escapa del panel: el foco se queda dentro hasta que lo cierras.

Abrir sobres

Esta es la parte que más me divertí haciendo. En la página Abrir Sobres eliges uno de cuatro sobres (tres de Pokémon y uno de One Piece), pulsas ¡Rasgar y Abrir Sobre! y el sobre se abre con una animación, un estallido de partículas y sonido. Dentro hay cinco cartas.

El truco está en lo que sale: no son cartas inventadas, sino productos reales de la tienda elegidos al azar, cada uno con su precio y su botón para añadirlo al carrito. Es un juego, pero también es otra forma de enseñar el catálogo.

El sonido se genera en el propio navegador; no hay archivos de audio que descargar.

La lista de deseos como un álbum

Cualquier producto se puede guardar en la lista de deseos con el corazón, sin necesidad de tener cuenta. La lista tiene buscador y dos vistas: cuadrícula y Álbum 3x3, que coloca los productos como las páginas de una carpeta de cartas, nueve por página.

La vista elegida se recuerda para la próxima vez.

Mi cuenta

La página de acceso tiene su propio diseño, con una imagen de la tienda a un lado y el formulario al otro, y un botón para mostrar la contraseña. Dentro de la cuenta, el escritorio, los pedidos, las direcciones y los datos personales usan las plantillas del tema en lugar de las de WooCommerce. Todas las rutas están en español: /mi-cuenta/, /carrito/, /lista-de-deseos/, /categoria-producto/...

Modo claro

El tema arranca en oscuro, que es como mejor lucen las cartas, pero el icono del sol de la cabecera lo pasa a claro. La elección se guarda y se aplica antes de pintar la página, así que no hay un parpadeo oscuro al cargar.

El efecto holográfico también se ajusta: en claro el reflejo es más suave para que la ilustración se siga leyendo.

En el móvil

Todo lo anterior funciona en el móvil. La cabecera se reorganiza, el menú pasa a un panel lateral con submenús desplegables y los filtros de la tienda se pliegan.

Accesibilidad

No es un añadido de última hora; lo revisé con una auditoría específica y corregí lo que salió:

• Se puede usar entera con el teclado: menús, filtros, slider, pestañas, modales y carrito.
• Los paneles atrapan el foco mientras están abiertos y se cierran con Esc.
• Los botones que solo tienen icono (buscar, cambiar tema, cerrar, añadir a la lista) llevan una etiqueta en español para los lectores de pantalla.
• Los desplegables del menú móvil y de los filtros indican si están abiertos o cerrados.
• El efecto holográfico se desactiva si el sistema tiene activado el movimiento reducido.

Para quien lleva la tienda

Hasta aquí, lo que ve quien compra. Pero un tema a medida solo es útil si el dueño de la tienda puede mantenerlo sin llamarme cada vez que quiere cambiar un texto. Por eso casi todo está en el Personalizador de WordPress, con vista previa en directo:

• Cabecera: logo a la izquierda o centrado con el menú debajo.
• Colores del tema y barra superior (el aviso de envío gratis y su enlace).
• Slider de la portada, categorías destacadas, pestañas de productos y sección de comunidad.
• Botones flotantes de WhatsApp y del carrito, cada uno activable por separado.
• Pie de página: número de columnas, descripción, logo y texto de copyright, donde [year] se sustituye por el año actual.
• Métodos de pago que se muestran en el pie, ubicación y mapa, página de acceso y datos legales de la empresa, que alimentan el aviso legal y las políticas.

Además:

• Traducible sin plugins pesados. Todos los textos del tema se pueden traducir con un archivo .po. Para tener la tienda en dos idiomas a la vez, dejé documentadas las dos opciones que no cargan la web: una red multisitio de WordPress o Polylang.
• SEO de serie. El tema genera los datos estructurados que Google usa para mostrar precio, stock y valoraciones en los resultados, las migas de pan y las etiquetas para compartir en redes. Las páginas personales (carrito, cuenta, lista de deseos) no se indexan.
• Imágenes ligeras. Las fotos de producto se convierten a WebP al subirlas y se sirven al tamaño que necesita cada pantalla.
• Nada externo. Fuentes, iconos y scripts van dentro del tema. La tienda no hace ninguna petición a otros servidores para pintarse.

Cómo lo hice

PokeStore es un tema clásico de WordPress, en PHP, con Tailwind CSS para los estilos y JavaScript sin frameworks, repartido en 21 módulos. Los de la portada, la tienda, la ficha o el simulador solo se cargan en esas páginas. Sobrescribe 13 plantillas de WooCommerce y lleva 266 commits.

Algunas decisiones que tomé pronto y que marcaron el resto:

• Un tema clásico y no de bloques. El dueño de la tienda iba a tocar textos, colores y productos, no a maquetar. El Personalizador le da justo eso, con menos margen para romper el diseño.
• Cero CDNs. Por velocidad y por privacidad: sin fuentes de Google ni librerías de terceros que carguen de otro sitio, el tema no añade terceros que declarar en la política de cookies.
• Pocas dependencias. Ni plugins de filtros, ni de listas de deseos, ni de vista rápida. Cada uno habría añadido sus propios estilos y scripts en todas las páginas.
• Funciones de coleccionista, no de tienda genérica. El holo, la lupa, el centrado, los estados y la búsqueda por código salieron de pensar en cómo compra alguien que colecciona cartas.

Usé asistentes de IA como herramienta, para escribir más rápido, revisar código y generar pruebas. Las decisiones de qué construir, cómo debía comportarse y qué se quedaba fuera fueron mías, igual que la revisión de todo lo que entró en el tema.

¿Te interesa?

PokeStore no está a la venta ni para descargar. Si tienes una tienda de cartas, o cualquier tienda con WooCommerce que necesite algo más que una plantilla genérica, y te gustaría algo así, escríbeme y lo hablamos.