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

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

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

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

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

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

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.

Dónde va el botón respecto al de tu tema

De fábrica el botón sale donde pongas el bloque en el editor: encima o debajo del bloque «Buy buttons» de tu tema, en su propia fila. Si lo quieres pegado al botón «Añadir al carrito», usa el ajuste Position del bloque, en la sección Theme integration & placement:

Where the block is placed: como hasta ahora.
Above the theme’s add to cart / Below the theme’s add to cart: justo encima o justo debajo de la línea del botón de tu tema. «Debajo» queda entre ese botón y los de pago rápido (Shop Pay, PayPal).
Side by side, left / right: los dos botones en la misma línea, mitad y mitad, a la misma altura. Gap es la separación con el botón del tema, en cualquiera de las posiciones, y Stack on mobile los apila a ancho completo en pantallas estrechas, porque medio ancho en un móvil parte la etiqueta.

No hay que tocar el tema: la app encuentra sola el botón «Añadir al carrito» en los temas que hemos probado. Si en el tuyo no lo encuentra, el botón se queda donde está el bloque y puedes indicarle el selector CSS de tu botón en Add to cart selector, o escribirnos. Al lado, el botón toma el ancho de su mitad; los colores, el texto, el icono y la tipografía siguen siendo los del bloque.

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.

Cuando la montura está agotada

El botón sigue a la variante como el botón de compra de tu tema. Si la variante que el cliente tiene seleccionada no se puede vender, el botón se muestra desactivado con el texto «Agotado»; si cambia a un color con stock, vuelve a activarse sin recargar. En el mismo bloque, bajo Ajustes avanzados, el ajuste When the frame is sold out deja elegir entre ese botón desactivado y ocultarlo del todo. La palabra «Agotado» se cambia en Diseño › Textos de cada formulario.

Aunque el cliente consiguiera abrir el configurador con una montura agotada, «Añadir» no la enviaría al carrito: le diría «La montura X está agotada. Elige otra montura».

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.