Para este tutorial, estamos utilizando un tema que aún no es compatible con la colocación predeterminada o la de plantilla. Vamos a configurar la página del producto; los pasos son los mismos para cualquier ubicación en tu tienda.

Paso 1

Navega a la pestaña “Advanced”. Esta sección se utiliza para configurar la aplicación para los temas no soportados. Aquí, puedes modificar los Selectores DOM para decidir dónde aparecerá la oferta en tu tienda.

Paso 2
​

Ve a tu sitio. Haz clic derecho en cualquier parte de la página y selecciona la opción “Inspeccionar”. Esto abrirá la herramienta de desarrollador.

Paso 3
​

Elige dónde en la página te gustaría que aparezca la oferta (Queremos que la oferta aparezca debajo de los botones). Después de hacerlo, inspecciona el elemento haciendo clic en el ícono de selección de elementos en la esquina superior izquierda del panel.

Paso 4
​

Haz clic en el elemento de la página donde se ubicará la oferta, ya sea antes o después (En este tutorial, los elementos son los botones, porque queremos que nuestra oferta aparezca después de los botones). Después de hacer clic en el elemento, verás el código fuente revelado en el panel de inspección.

Paso 5

Ubica el elemento que está resaltado en la herramienta de desarrollador bajo la pestaña “Elements”. El elemento tendrá un nombre de clase o un ID. Puedes copiar el nombre de la clase o el ID para usarlos en la aplicación como el Selector DOM. Ten en cuenta que cada elemento puede tener varios nombres de clase, separados por un espacio. Puedes copiar el primer nombre de clase para casos como este. En este caso, el elemento tiene un nombre de clase, por lo que copiaremos ese nombre de clase para agregarlo a la aplicación.

Paso 6
​

Regresa a In Cart Upsell.
​

Un selector de clase es un nombre precedido por un punto (“.”) y un selector de ID es un nombre precedido por un carácter de numeral (“#”).

Estamos utilizando el nombre de la clase como el selector, por lo que debemos agregar el punto antes del nombre. Por ejemplo, “.product-form__item”.

Después de agregar el punto o el carácter de numeral si se está utilizando un nombre de ID, pega el nombre en la pestaña Advanced en la sección donde estás realizando la colocación de la oferta. En este caso, estamos configurando la página del producto.

Desplázate hacia abajo hasta la sección Dom Action y haz clic en la flecha desplegable para abrir la lista de opciones. Selecciona “Before” si el widget de la oferta debe aparecer por encima del elemento seleccionado, o “After” si el widget de la oferta debe aparecer por debajo del elemento seleccionado.

Desplázate hasta el final de la página. Si deseas que todas tus ofertas aparezcan en la misma posición en tu tienda, selecciona la opción para hacer que la configuración sea predeterminada para cada oferta. Por otro lado, si prefieres que cada oferta aparezca en una posición diferente, puedes dejar esta opción desmarcada. Guarda tu oferta como borrador o publícala.

​
​