Los 4 storefronts de demostración de Vertex — Vertex, Throttle, OfficeIT, Inkline
Una licencia del tema Vertex. Cuatro aspectos de storefront listos para producción. Cada preset está ajustado a un vertical industrial B2B / B2C específico — colores de acento distintos, composiciones de página de inicio distintas, finders distintos, imágenes de estilo de vida distintas, ganchos de copy distintos. Cambiar entre ellos es un clic en el customizer (permanente) o un parámetro URL (vista previa temporal).
Si vende en varios verticales — o está decidiendo con cuál vertical liderar antes del lanzamiento — esta es la guía que elige el punto de partida correcto para su storefront.
No necesita comprar Vertex cuatro veces. Los 4 presets se incluyen en el mismo archivo del tema. También puede remezclarlos — elegir la página de inicio de OfficeIT pero el color de acento de Throttle, o anular cualquier preset con el selector Paleta personalizada. Son puntos de partida, no plantillas bloqueadas.
¿Por qué 4 presets?
La Shopify Theme Store recompensa los temas que demuestran versatilidad. Un comprador que escanea el directorio de temas quiere ver su industria de un vistazo — no una demostración genérica de "tema B2B" que tenga que traducir mentalmente a su caso de uso.
Vertex aborda esto incluyendo cuatro storefronts de demostración totalmente poblados bajo una única licencia de tema. Cada preset es:
- Ajustado a la industria — color, copy, composición del hero y orden de las secciones de la página de inicio están elegidos para un recorrido de comprador específico
- Consciente del finder — las autopartes obtienen un finder de ajuste Make/Model/Year; los suministros de impresión obtienen un finder Printer Brand/Model/Color; el preset industrial no tiene finder (se apoya en la navegación facetada de colecciones)
- Imágenes completas — ~9 imágenes de hero / estilo de vida / cuadrícula de industria por preset, todas generadas para la estética de ese vertical. Sin desajuste de fotos de stock.
- Personalizables de forma independiente — cada preset tiene su propio archivo de anulaciones CSS (
assets/demo-{preset}.css) que cambia los colores de acento, los acentos del finder y cualquier elección tipográfica por preset
El resultado: puede lanzar Vertex como un storefront industrial MRO, un catálogo de autopartes, un distribuidor de suministros de oficina o un proveedor de imprenta sin encargar ningún diseño personalizado.
Los 4 presets en detalle
Preset 1 — Vertex (predeterminado)
| Industria | Suministro industrial, MRO, ferretería, fijaciones, herramientas manuales, fluidos, abrasivos |
| Color de acento | Ámbar #fbbf24 |
| Finder | Ninguno — se apoya en filtros facetados + búsqueda predictiva |
| Hero de la página de inicio | Tipografía atrevida + imágenes de estilo de vida de taller / almacén |
| Ganchos B2B | "Precios por volumen", "NET-30 disponible", "Certificado ISO 9001", "Despacho en 24h" |
| Ideal para | Distribuidores industriales genéricos, proveedores MRO, comerciantes de fijaciones / ferretería, catálogos de herramientas, proveedores JanSan |
Este es el predeterminado. Cuando instala Vertex desde la Shopify Theme Store, esto es lo que carga. El acento ámbar se asocia a un lenguaje visual industrial, cálido, McMaster-Carr / Grainger / Fastenal que los compradores de compras reconocen de inmediato.
Preset 2 — Throttle (autopartes)
| Industria | Autopartes, rendimiento, mercado de repuestos, recambio OEM, motocicleta, marina, deportes de motor |
| Color de acento | Rojo-naranja #ec5f24 |
| Finder | Cascada de ajuste Make / Model / Year (3 desplegables) |
| Hero de la página de inicio | Mensajería que prioriza el ajuste ("Encuentre piezas para su vehículo") con el finder encima de las colecciones de productos |
| Ganchos B2B | "Precios comerciales", "Despacho desde almacén", "Referencia cruzada OEM", "Cuentas de distribuidor" |
| Ideal para | Distribuidores de autopartes, talleres de rendimiento, piezas de moto / marina / RV, ATV / UTV / deportes de motor |
La característica definitoria del preset Throttle es el finder de ajuste — un desplegable en cascada de 3 pasos (Make ▸ Model ▸ Year) renderizado en el hero de la página de inicio, la barra lateral de la página de colección y como barra fija opcional. Los compradores seleccionan su vehículo una vez; las vistas de productos posteriores se filtran solo a piezas que coinciden con el ajuste.
El acento rojo-naranja se asocia a un lenguaje visual de rendimiento / automoción / energía — RockAuto + Summit Racing en un solo tema.
Preset 3 — OfficeIT (oficina, IT, electrónica)
| Industria | Suministros de oficina, hardware IT, electrónica, papel de copiadora, monitores, teclados, portátiles, consumibles a granel |
| Color de acento | Azul (corporativo, calidad IT) |
| Finder | Cascada Brand / Category / Capacity (3 desplegables) — p. ej., "HP ▸ Toner ▸ 5000 páginas" |
| Hero de la página de inicio | Mensajería de pedido por volumen, ganchos de cuenta B2B, CTAs de NET-30 / facturación |
| Ganchos B2B | "Descuentos por volumen", "Net-30 para empresas", "Envío gratis por encima de $X", "Gestor de cuenta dedicado" |
| Ideal para | Distribuidores de suministros de oficina, revendedores de IT, mayoristas de electrónica, suministros para escuelas / gobierno, proveedores de compras corporativas |
OfficeIT lidera con pedidos de oficina B2B por volumen — el recorrido del comprador es "Necesito equipar una oficina de 50 escritorios" en lugar de "Necesito un ratón". El copy del hero y los CTAs muestran prominentemente el pedido por volumen, RFQ y NET-30; la página de inicio destaca la almohadilla rápida de pedido por volumen encima de la colección destacada estándar.
El acento azul se asocia al lenguaje visual IT corporativo / Quill / Staples Business Advantage que los compradores esperan de esta categoría.
Lo que hay dentro de cada preset
Cada preset incluye sus propias copias de estos activos:
| Activo | Variante por preset |
|---|---|
| Plantilla de página de inicio | templates/index.json (Vertex predeterminado) + templates/index.throttle.json, index.officeit.json, index.printsupply.json |
| Plantilla de colección | templates/collection.json + variantes por preset donde el orden de las secciones difiere (p. ej., Throttle pone el finder encima de los filtros) |
| Plantilla de producto | templates/product.json + variantes por preset (p. ej., Inkline añade una pestaña "impresoras compatibles") |
| Anulación CSS | assets/demo-{preset}.css — anula --color-accent, --color-on-accent, acento del finder, paradas del degradado |
| Imágenes del hero | ~3 variantes de hero por preset, todas generadas para la estética del vertical |
| Imágenes de estilo de vida | ~3 fotos de estilo de vida por preset (taller / concesionario / oficina / imprenta) |
| Imágenes de cuadrícula de industria | ~3 imágenes de tarjeta de industria por preset (p. ej., HVAC + fabricación + instalaciones para Vertex; coches + motos + barcos para Throttle) |
| Copy de demostración | Titulares del hero, subtítulos, etiquetas de CTA, texto de testimonio — todo ajustado por preset |
Esto significa que cambiar de preset no es "cambia un color y reza" — es un intercambio coherente de storefront.
Cómo cambiar de preset
Tiene dos maneras de cambiar — permanente y vista previa temporal.
Permanente — a través del customizer
- Abra el panel de Shopify y vaya a Online Store ▸ Themes.
- Haga clic en Customize en Vertex.
- En la barra lateral izquierda, haga clic en Theme settings ▸ Colors.
- Desplácese hasta Starter color palette.
- Elija uno de:
- Custom — paleta totalmente personalizada (utiliza sus selectores de color manuales a continuación)
- Vertex — industrial ámbar (predeterminado)
- Throttle — autopartes rojo-naranja
- OfficeIT — azul corporativo
- Inkline — verde azulado impresión/repro
- Save en la parte superior derecha.
El color de acento cambia al instante. Para también cambiar la página de inicio al diseño de ese preset, consulte Cambiar la plantilla de la página de inicio a continuación.
El preset de color en Theme settings ▸ Colors solo cambia los colores. Para obtener la experiencia completa del preset (diseño de página de inicio, finder, imágenes de estilo de vida), también necesita aplicar el sufijo de plantilla de página de inicio correspondiente — consulte la siguiente sección.
Temporal — a través de vista previa por URL
Para previsualizar un preset en cualquier URL del storefront sin aplicarlo:
| Preset | Parámetro URL de vista previa |
|---|---|
| Vertex | (predeterminado — sin parámetro) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
Por ejemplo:
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
Esto utiliza la característica nativa de sufijo de plantilla de Shopify — el storefront se renderiza utilizando el archivo de plantilla alternativo (index.throttle.json) para esa única vista de página. Nada se guarda; al refrescar sin el parámetro se vuelve al predeterminado.
Utilice esto para:
- Hacer pruebas A/B de un preset con una pequeña audiencia antes de comprometerse
- Enviar una URL de demostración a un interesado ("vea cómo se sentiría la versión de autopartes de nuestra tienda")
- Comparar composiciones de hero lado a lado en dos pestañas del navegador
Cambiar la plantilla de la página de inicio
Para aplicar permanentemente el diseño de página de inicio de un preset:
- Abra Online Store ▸ Themes ▸ Customize ▸ Home.
- En el selector de plantilla superior, elija Add template o seleccione la variante
index.{preset}.jsondel preset. - Guarde.
Alternativamente, configure una página de inicio con el sufijo de plantilla correspondiente en la configuración de la página, o edite settings_data.json directamente si se siente cómodo.
Nada le obliga a usar la página de inicio de un preset con su acento. Puede usar el diseño de página de inicio de Throttle (porque le encanta la composición que prioriza el finder de ajuste) con el acento verde azulado de Inkline (porque coincide con su marca) y la sección de almohadilla de pedido por volumen de OfficeIT (porque sus compradores pegan desde hojas de cálculo). Vertex es componible.
Cómo funciona la anulación del color de acento
Cada preset incluye un pequeño archivo CSS en assets/demo-{preset}.css:
/* assets/demo-throttle.css */
:root {
--color-accent: 236 95 36; /* ec5f24 — Throttle red-orange */
--color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }
Cuando el ajuste Starter color palette se establece en Throttle, el layout incluye este archivo a través de {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %}.
Las variables CSS de acento --color-accent + --color-on-accent fluyen a través de cada componente — botones, pastillas, distintivos, enlaces, anillos de enfoque, resaltados de desplegables, la barra ámbar de bienvenida B2B, desplegables del finder, CTAs del hero. Cambiar la paleta cambia el acento de todo el storefront en un solo renderizado.
Esto significa que también puede crear su propio preset:
- Copiando uno de los archivos
demo-*.cssexistentes - Renombrándolo a
demo-mybrand.css - Ajustando los valores de
--color-accent+--color-on-accent - Conectándolo en
layout/theme.liquidcon otra rama{% if %} - (Opcional) Añadiendo una plantilla de página de inicio correspondiente en
templates/index.mybrand.json
Un usuario avanzado puede producir un 5º preset en menos de una hora.
Eligiendo su preset — matriz de decisión
Use esto para elegir un punto de partida. Recuerde: puede anular cualquier cosa después.
| Si vende... | Empiece con | Razón |
|---|---|---|
| Fijaciones, herramientas manuales, lubricantes, abrasivos, ferretería, MRO general | Vertex | Línea base industrial genérica, no se necesita finder (los filtros facetados hacen el trabajo) |
| Piezas de auto / moto / marina / RV / deportes de motor | Throttle | El finder de ajuste es la característica determinante para este vertical |
| Oficina, IT, electrónica, suministros de copiadoras, suministros para escuelas / gobierno | OfficeIT | Pedidos de oficina B2B por volumen + lenguaje visual IT corporativo |
| Tinta de impresora, tóner, papel de gran formato, consumibles de reprografía | Inkline | El finder de cartuchos de impresora elimina el error #1 del comprador en este vertical |
| Limpieza / sanitización (JanSan) | Vertex | La línea base MRO de Vertex se asocia limpiamente con JanSan; no se necesita finder especializado |
| Productos químicos industriales / lubricantes con hojas de datos técnicos | Vertex | Las tablas de especificaciones técnicas + bloque de documentos son centrales en el preset Vertex |
| Materiales de construcción (madera, hormigón, paneles de yeso) | Vertex | La línea base Vertex + página de pedido por volumen funcionan bien; considere el azul OfficeIT si quiere una paleta más fría |
| Productos promocionales con impresión de logo personalizada | Inkline | El acento verde azulado + lenguaje visual de imprenta se alinea con la categoría, aunque el finder es más útil para tinta/tóner |
| Solo mayorista (sin B2C) | Vertex o OfficeIT | Cualquiera funciona; elija el acento que coincida con su marca. Cambie Modo Storefront a B2B-only. |
Personalizar un preset
Los presets son puntos de partida. Después de instalar, puede:
| Personalizar | Cómo |
|---|---|
| Color de acento | Theme settings ▸ Colors ▸ Starter palette ▸ Custom, luego elija su propio --color-accent |
| Logo | Theme settings ▸ Logo — reemplace el logo de demostración con su propio SVG o PNG |
| Orden de las secciones de la página de inicio | Customizer ▸ Home — arrastre secciones para reordenar, o añada/elimine secciones de la paleta de 30+ secciones |
| Imágenes del hero | Haga clic en la sección Hero en el customizer, reemplace la imagen de cada diapositiva |
| Imágenes de estilo de vida / industria | Reemplace por sección en el customizer; cada sección tiene un selector de imagen |
| Etiquetas y datos del desplegable del finder | (Throttle / OfficeIT / Inkline) — consulte la Guía de configuración del finder para la estructura de datos basada en metafields |
| Tipografía | Theme settings ▸ Typography — fuente de encabezado, fuente de cuerpo, ratio de escala |
| Copy / CTAs | Edite el texto en línea en el customizer para cada sección |
| Traducciones | Theme settings ▸ Languages — proporcione cadenas personalizadas a través de anulaciones de locales/*.schema.json |
Después de personalizar, puede guardar su trabajo como un tema con nombre en Online Store ▸ Themes ▸ Theme library — útil cuando se ejecutan pruebas A/B o se preparan cambios visuales.
Lectura relacionada
- Visión general — Por qué Vertex incluye 4 presets en un tema
- Instalación — Instalación del tema + selección de preset durante la configuración
- Referencia de ajustes del tema — Colors ▸ Starter palette y ajustes por preset
- Markets y multidivisa — Cada preset funciona idénticamente en todos los mercados
- Guía de modos Storefront — Cómo interactúan Hybrid / B2B-only / B2C-only con los presets
- Panel de la cuenta de cliente — Idéntico en todos los presets (solo cambia el color de acento)
- Guía de la página RFQ — Idéntica en todos los presets
- Guía de configuración B2B — La misma configuración B2B funciona para los 4 presets
Resumen
- Vertex incluye 4 presets de demostración en una única licencia de tema: Vertex (industrial ámbar), Throttle (autopartes rojo-naranja), OfficeIT (oficina/IT azul), Inkline (suministros de impresión verde azulado).
- Cada preset tiene su propia plantilla de página de inicio, finder, CSS de acento y ~9 imágenes de estilo de vida.
- Cambie permanentemente en Theme settings ▸ Colors ▸ Starter palette + aplicando el sufijo de plantilla de página de inicio del preset.
- Cambie temporalmente para vistas previas añadiendo
?view=throttle | officeit | printsupplya cualquier URL del storefront. - Los presets son puntos de partida — color de acento, diseño de página de inicio, finder, imágenes y copy son todos anulables de forma independiente.
- Un 5º preset personalizado tarda aproximadamente una hora en crearse copiando un archivo
demo-*.cssexistente y conectándolo enlayout/theme.liquid.