El botón del producto
El botón que abre el configurador vive en la página de producto, así que tiene que parecerse a los demás botones de tu tienda. Se configura en el editor de temas, no dentro de la app.
Dónde se configura
Sección titulada «Dónde se configura»- En tu admin de Shopify, ve a Tienda online → Temas → Personalizar.
- Abre una página de producto.
- Pulsa sobre el bloque Optical Form.
Todos los ajustes que verás se aplican solo a ese bloque, y afectan a todos los productos que usen esa plantilla de producto.
El botón no hereda nada
Sección titulada «El botón no hereda nada»Esto es importante y va a contracorriente de lo que uno esperaría: el botón no coge colores de ningún sitio. Ni de tu tema, ni de la pestaña Diseño del formulario.
Es a propósito. Los temas de Shopify definen sus botones cada uno a su manera, y no hay forma fiable de adivinarlo. En vez de acertar a medias, la app te deja decidirlo todo.
Lo que trae de fábrica es un botón gris muy oscuro con texto blanco, que es neutro y encaja de forma discreta en casi cualquier tienda hasta que lo ajustes.
Contenido
Sección titulada «Contenido»- Texto del botón — lo que pone. Si lo dejas vacío, se usa el texto traducido de la app, que se adapta solo al idioma de cada cliente. Si escribes algo aquí, ese texto sale igual en todos los idiomas.
- Icono (opcional) — una imagen de tu biblioteca de Archivos. Va mejor un PNG cuadrado con fondo transparente, de unos 128×128. Déjalo vacío para un botón solo de texto.
- Posición del icono — antes o después del texto. Solo aparece cuando hay icono.
- Separación entre icono y texto — de 0 a 32 px. Se ignora si la alineación del contenido separa las piezas a los extremos.
Colores
Sección titulada «Colores»Seis colores: fondo, texto y borde, cada uno con su versión al pasar el ratón por encima.
El borde solo se ve si además le pones un grosor mayor que cero, más abajo. Si dejas el color de borde vacío, no se ve borde aunque tenga grosor.
Forma y tipografía
Sección titulada «Forma y tipografía»Estos valores son comunes a escritorio y móvil, porque casi nunca conviene que cambien de un sitio a otro:
- Radio de las esquinas — de 0 (cuadrado) a 60 (píldora).
- Grosor del borde — 0 significa sin borde.
- Grosor de la letra, espaciado entre letras y mayúsculas/minúsculas.
Escritorio y móvil por separado
Sección titulada «Escritorio y móvil por separado»Lo que sí cambia entre pantallas tiene su propio juego de ajustes:
| Ajuste | Para qué |
|---|---|
| Ajustar al contenido | El botón ocupa solo lo que mide su texto, en vez de una anchura fija. Es lo habitual en escritorio |
| Ancho | Porcentaje del espacio disponible. En móvil casi siempre 100% |
| Relleno vertical y horizontal | El aire entre el texto y el borde del botón. Lo que le da el tamaño |
| Tamaño de letra | |
| Alineación del contenido | Dónde quedan el icono y el texto dentro del botón: centrados, a la izquierda, a la derecha o separados a los extremos |
| Tamaño del icono | De 10 a 48 px. Solo aparece cuando hay icono |
La versión móvil se aplica en pantallas de menos de 750 píxeles de ancho, que es el corte estándar de Shopify.
Ajustes avanzados
Sección titulada «Ajustes avanzados»El campo Selector de input de variante está pensado para desarrolladores y casi nunca hace falta: solo para temas raros donde la app no detecta qué variante ha elegido el cliente. Déjalo vacío salvo que te lo indique el soporte.
Y los demás textos, ¿dónde están?
Sección titulada «Y los demás textos, ¿dónde están?»- El idioma del panel de la app: en Ajustes dentro de la app. Ver Idiomas y textos.
- Los textos del formulario que ve el cliente: dentro de cada paso, en el editor del formulario.
- Los colores del configurador (el panel que se abre): en la pestaña Diseño de cada formulario. Ver Diseño y carrito.