--- title: Cómo utilizar el Editor de Código para temas personalizados de Productos description: --- Puedes agregar contenido dinámico a tus publicaciones en línea haciendo que los hotspots de Producto muestren los detalles del producto directamente en la página. Haz clic aquí para aprender más s --- [Ir directamente al contenido](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#main-content) - [Español](https://support.publitas.com/es/c%C3%B3mo-utilizar-el-editor-de-c%C3%B3digo-para-temas-personalizados-de-productos) - [Deutsch](https://support.publitas.com/de/using-code-editor-for-custom-product-themes) - [English](https://support.publitas.com/using-code-editor-for-custom-product-themes) - [Nederlands](https://support.publitas.com/nl/using-code-editor-for-custom-product-themes) Español Traducciones de Mostrar submenú de [Contacte Soporte Tecnico](https://support.publitas.com/es/kb-tickets/new?hsLang=es) ![8e7d93d34c6a0dffd24a52422ca035bf10d6814b.png\]](https://support.publitas.com/hs-fs/hubfs/8e7d93d34c6a0dffd24a52422ca035bf10d6814b.png?height=36&name=8e7d93d34c6a0dffd24a52422ca035bf10d6814b.png) Abrir navegación principal Cerrar navegación principal - - [Español](https://support.publitas.com/es/c%C3%B3mo-utilizar-el-editor-de-c%C3%B3digo-para-temas-personalizados-de-productos) - [Deutsch](https://support.publitas.com/de/using-code-editor-for-custom-product-themes) - [English](https://support.publitas.com/using-code-editor-for-custom-product-themes) - [Nederlands](https://support.publitas.com/nl/using-code-editor-for-custom-product-themes) Español Traducciones de Mostrar submenú de - [Contacte Soporte Tecnico](https://support.publitas.com/es/kb-tickets/new) - Regreso a Publitas Regreso a Publitas ¿Cómo podemos ayudarte? - No hay sugerencias porque el campo de búsqueda está vacío. 1. [Centro de Ayuda](https://support.publitas.com/es?hsLang=es) 2. [Publicaciones Dinámicas.](https://support.publitas.com/es/publicaciones-din%C3%A1micas?hsLang=es) 3. [Cómo crear contenido dinámico](https://support.publitas.com/es/publicaciones-din%C3%A1micas?hsLang=es#c%C3%B3mo-crear-contenido-din%C3%A1mico) # Cómo utilizar el Editor de Código para temas personalizados de Productos ***Disponible en Enterprise*** *ACCESO ANTICIPADO: Si estás interesado en utilizar esta función y tienes [plan Enterprise](https://www.publitas.com/enterprise), por favor ponte en contacto con tu gerente de éxito, quien la activará para ti.* *No todas las [variables disponibles](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#available) are listed as imported attributes in [this article](https://support.publitas.com/setting-up-your-product-feed?hsLang=es). This list will be updated as soon as the feature is officially released.* *---* Puedes agregar contenido dinámico a tus publicaciones en línea haciendo que los hotspots de Producto muestren los detalles del producto directamente en la página. Haz clic aquí para aprender más sobre cómo agregar [contenido dinámico](https://support.publitas.com/es/c%C3%B3mo-agregar-contenido-din%C3%A1mico?hsLang=es). Usando el *Editor de Temas de Producto*, puedes cambiar qué detalles del producto mostrar dinámicamente y personalizar el diseño de los detalles para que coincidan con la apariencia de tu marca. Utilizando HTML y CSS, puedes cambiar el color y tamaño del texto, agregar formas, usar fuentes personalizadas y más. Puedes crear y almacenar diferentes temas, lo que te permite utilizar contenido dinámico en diferentes aplicaciones y admitir diseños creativos. El uso del Editor de Temas de Producto requiere un buen entendimiento de HTML y CSS. Si necesitas ayuda, nuestro equipo de Servicios estará encantado de crear nuevos temas para ti, en cuyo caso puedes contactar a tu Gerente de Éxito para una presentación. Los temas de producto también se pueden personalizar sin necesidad de código. Para obtener más información, [haz clic aquí.](https://support.publitas.com/es/c%C3%B3mo-utilizar-las-opciones-de-tema-del-producto-en-hotspots-de-productos-din%C3%A1micos?hsLang=es)   En este artículo: - [Cómo acceder al editor de código:](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#Accessing) - [Cómo crear y actualizar Temas de Producto](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#Creating) - [Variables disponibles](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#available) - [Funciones de procesamiento disponibles](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#processor) - [Uso de CSS](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#CSS) - [Cómo utilizar fuentes personalizadas:](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#custom) - [Consejos y trucos](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#tips) - [Ejemplos](https://support.publitas.com/es/cómo-utilizar-el-editor-de-código-para-temas-personalizados-de-productos#examples) *El Editor de Código* ![](https://support.publitas.com/hs-fs/hubfs/image-png-Jul-28-2026-02-58-48-2050-PM.png?width=252&height=638&name=image-png-Jul-28-2026-02-58-48-2050-PM.png) ### Cómo acceder al editor de código: Puedes abrir el editor de código haciendo clic en el símbolo \ en la esquina inferior derecha del editor de hotspots.  *Cómo acceder al editor de código*:![](https://support.publitas.com/hs-fs/hubfs/image-png-Jul-28-2026-02-59-41-4678-PM.png?width=670&height=335&name=image-png-Jul-28-2026-02-59-41-4678-PM.png) ### Cómo crear y actualizar Temas de Producto Después de acceder al editor, puedes seleccionar un tema para editar desde la lista desplegable. En la parte inferior de la lista, encontrarás la opción para crear un nuevo tema. Después de darle un nombre al nuevo tema, se agregará a la lista. Cada tema consiste en una sección de HTML y CSS. Utiliza la sección de HTML para determinar qué elementos incluir en el tema. Utiliza la sección de CSS para ajustar la apariencia de los elementos seleccionados. No se admite el uso de CSS en la sección de HTML y viceversa. *Cómo crear un nuevo Tema de Producto:* ![](https://support.publitas.com/hs-fs/hubfs/escreatenewtheme-gif.gif?width=670&height=336&name=escreatenewtheme-gif.gif) Junto al menú desplegable, encontrarás opciones para cambiar el nombre o eliminar un tema. ### Variables disponibles La sección de HTML determina el orden en que aparecen los elementos en la página y los elementos utilizados en el diseño. Para cargar contenido dinámico, puedes seleccionar de entre las siguientes variables: - - {{id}} - - {{title}} - {{description}} - {{link}} - {{image\_link}} - {{availability}} - {{price}} - {{sale\_price}} - {{effective\_sale\_price}} - {{discount\_percentage}} - {{product\_type}} - {{brand}} - {{gtin}} - {{mpn}} - {{custom\_label\_0}} - {{custom\_label\_1}} - {{custom\_label\_2}} - {{custom\_label\_3}} - {{custom\_label\_4}} - {{custom\_label\_5}} - {{custom\_label\_6}} - {{custom\_label\_7}} - {{custom\_label\_8}} - {{custom\_label\_9}} - {{custom\_label\_10}} - {{custom\_label\_11}} - {{custom\_label\_12}} - {{custom\_label\_13}} - {{custom\_label\_14}} - {{custom\_label\_15}} - {{custom\_label\_16}} - {{custom\_label\_17}} - {{custom\_label\_18}} - {{custom\_label\_19}} Variables del lector de pantalla - - {{sr\_original\_price}} - {{sr\_sale\_price}} **IMPORTANTE:** Si una variable contiene contenido depende de si está disponible en el [feed de productos](https://support.publitas.com/product-feed-integration?hsLang=es) conectado al grupo asociado. La variable {{effective\_sale\_price}} es la única variable calculada que no proviene directamente del feed. Esta variable mostrará el {{sale\_price}} si su valor es menor que el valor {{price}} y mayor que cero. En otros casos, devolverá vacío. De manera similar, {{discount\_percentage}} mostrará el valor numérico (sin incluir "%") si tanto el precio original como el precio de venta están disponibles en el feed de productos. ### Funciones de procesamiento disponibles Así como el HTML predeterminado muestra el precio solo si está disponible, es posible que desees agregar condiciones específicas a una variable u optimizar su valor para ciertos casos de uso. Para hacerlo, puedes utilizar los ayudantes integrados del [motor de plantillas handlebars](https://handlebarsjs.com/guide/builtin-helpers.html) y las funciones de procesador enumeradas a continuación - **sanitize:** Convierte a minúsculas una cadena y reemplaza todos los espacios con - *(sanitize Round Cement Planter =\> round-cement-planter)* - **numeral:** Obtiene el numeral de un número flotante *(numeral 5.66 =\> 5)* - **fraction:** Obtiene la fracción de un número flotante *(fraction 5.66 =\> 66)* - **formatPrice:** Formatea el número como precio *(formatPrice 5.66 =\> 5.66) (formatPrice 5 =\> 5.00)* ### Triple bigote (contenido sin procesar frente a contenido analizado) Por defecto, las variables entre dos bigotes se muestran como texto sin formato. Esto significa que cualquier código HTML incluido en el valor se escapará y se mostrará como texto. Ejemplo: {{description}} Muestra solo texto sin formato (el HTML no se analiza). Si quieres que el contenido se muestre como HTML, puedes utilizar tres barras invertidas. Ejemplo: {{{description}}} Muestra el contenido HTML analizado. ### Uso de CSS En el editor de CSS, puedes seleccionar las diferentes clases utilizadas en el editor de HTML. Dependiendo de tu necesidad, también puedes cambiar el nombre de las clases en el editor de HTML o agregar nuevas. Por ejemplo: ![](https://support.publitas.com/hs-fs/hubfs/CleanShot%202023-12-18%20at%2006-52-41-png.png?width=617&height=398&name=CleanShot%202023-12-18%20at%2006-52-41-png.png) En este ejemplo, las partes en negrita hacen referencia a las clases encontradas en el HTML del tema predeterminado, y se aplican las siguientes propiedades: Se ajustan el color y tamaño del título del producto y los precios, y se amplía y reposiciona la imagen del producto. Para cambiar el estilo base del hotspot dinámico, para aplicar un color de fondo en general, por ejemplo, selecciona #publication .dynamic-hotspot:![](https://support.publitas.com/hs-fs/hubfs/CleanShot%202023-12-19%20at%2012-03-58@2x-png.png?width=662&height=82&name=CleanShot%202023-12-19%20at%2012-03-58@2x-png.png) ### Cómo utilizar fuentes personalizadas: Hay dos formas de utilizar fuentes personalizadas: 1\. Puedes utilizar la función de fuente personalizada de Publitas para usar cualquier fuente que desees. **[Lee aquí sobre cómo agregar fuentes personalizadas en Publitas.](https://support.publitas.com/es/c%C3%B3mo-cargar-fuentes-personalizadas?hsLang=es).** 2\. You can also use @font-face to apply a custom font. Instead of referring to the font hosted externally, the font needs to be embedded directly in the CSS content, converting it from [WOFF to base64 encoded string](https://www.giftofspeed.com/base64-encoder/).  *Embedded font, where XXXXXXX is replaced with the base64 encoded string:* ![](https://support.publitas.com/hs-fs/hubfs/CleanShot%202023-12-19%20at%2006-48-54@2x-png.png?width=619&height=243&name=CleanShot%202023-12-19%20at%2006-48-54@2x-png.png) ### Consejos - **Utiliza un tema separado para probar cambios.** Para evitar publicar cambios en publicaciones en vivo, puedes probar nuevos temas o cambios en temas existentes en un tema temporal. - **Ten en cuenta las imágenes de productos cuadradas.** Es común que las imágenes de los productos sean cuadradas. Dependiendo de las dimensiones y orientación del producto, las imágenes pueden contener espacios en blanco que afectan el diseño. Recomendamos tener esto en cuenta y probar el tema utilizando diversos productos. - **Restablecer el HTML**. Si eliminas el HTML del Editor de Temas de Producto, se aplicará el HTML predeterminado nuevamente. Simplemente actualiza la pestaña HTML después de hacer clic en *Guardar y Aplicar.* - **Crea un espacio de trabajo más grande.** Utiliza el botón de flecha ↤ en la parte inferior para ampliar el Editor y obtener una mejor vista de la estructura de tu código. - **Habilita que las imágenes siempre se ajusten dentro del hotspot.** El tema predeterminado puede hacer zoom en las imágenes cuando el hotspot se vuelve más estrecho. Esto es ideal para evitar espacios en blanco excesivos y hacer que los productos parezcan más grandes. En caso de que esto no complemente tu diseño, puedes asegurarte de que las imágenes siempre se ajusten dentro del área del hotspot agregando el siguiente código en la parte CSS del editor de temas: ``` img { max-width: 100%; object-fit: contain;} ``` ### Ejemplos **Libris.nl** *Catálogo: ![019](https://support.publitas.com/hs-fs/hubfs/019.png?width=638&height=506&name=019.png)* *Tema de Producto:* *![020](https://support.publitas.com/hs-fs/hubfs/020.png?width=208&height=308&name=020.png)* **Coop** *Catálogo: ![021](https://support.publitas.com/hs-fs/hubfs/021.png?width=545&height=428&name=021.png)* *Tema de Producto:* ![022](https://support.publitas.com/hs-fs/hubfs/022.png?width=299&height=417&name=022.png) **Do It Center** Para el segundo tema, las imágenes de los productos se añaden por separado utilizando  [hotspots de imagen](https://support.publitas.com/es/c%C3%B3mo-agregar-una-imagen-o-animaci%C3%B3n?hsLang=es). *Tema de Producto1: ![023](https://support.publitas.com/hs-fs/hubfs/023.png?width=259&height=378&name=023.png)* *Tema de Producto 2:* ![024](https://support.publitas.com/hs-fs/hubfs/024.png?width=277&height=141&name=024.png)   - [Gestión de publicaciones.](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#main-content) - [Crea contenido en Publitas.](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#crea-contenido-en-publitas) - [Administra tus publicaciones.](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#administra-tus-publicaciones) - [Editar paginas](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#editar-paginas) - [Cómo Actualizar la URL de la Publicación](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#c%C3%B3mo-actualizar-la-url-de-la-publicaci%C3%B3n) - [SEO](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#seo) - [Solución de Problemas](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#soluci%C3%B3n-de-problemas) - [Crear contenido adaptativo en Publitas](https://support.publitas.com/es/gesti%C3%B3n-de-publicaciones?hsLang=es#crear-contenido-adaptativo-en-publitas) - [Añadir ''Hotspots''](https://support.publitas.com/es/a%C3%B1adir-hotspots?hsLang=es#main-content) - [Utilizando el editor de hotspots](https://support.publitas.com/es/a%C3%B1adir-hotspots?hsLang=es#utilizando-el-editor-de-hotspots) - [Explicación de los Hotspots](https://support.publitas.com/es/a%C3%B1adir-hotspots?hsLang=es#explicaci%C3%B3n-de-los-hotspots) - [Automatización de Hotspots](https://support.publitas.com/es/a%C3%B1adir-hotspots?hsLang=es#automatizaci%C3%B3n-de-hotspots) - [Personalizando el Lector](https://support.publitas.com/es/personalizando-el-lector?hsLang=es#main-content) - [Ajustes del lector](https://support.publitas.com/es/personalizando-el-lector?hsLang=es#ajustes-del-lector) - [Estrategia de marca](https://support.publitas.com/es/personalizando-el-lector?hsLang=es#estrategia-de-marca) - [Banners](https://support.publitas.com/es/personalizando-el-lector?hsLang=es#banners) - [Publicación de Publicaciones.](https://support.publitas.com/es/publicaci%C3%B3n-de-publicaciones?hsLang=es#main-content) - [Compartir](https://support.publitas.com/es/publicaci%C3%B3n-de-publicaciones?hsLang=es#compartir) - [Integrar](https://support.publitas.com/es/publicaci%C3%B3n-de-publicaciones?hsLang=es#integrar) - [Disponibilidad](https://support.publitas.com/es/publicaci%C3%B3n-de-publicaciones?hsLang=es#disponibilidad) - [Generando alcance](https://support.publitas.com/es/publicaci%C3%B3n-de-publicaciones?hsLang=es#generando-alcance) - [Comercio Electrónico y Feed de Productos](https://support.publitas.com/es/comercio-electr%C3%B3nico-y-feed-de-productos?hsLang=es#main-content) - [Como Importar Feed the Productos](https://support.publitas.com/es/comercio-electr%C3%B3nico-y-feed-de-productos?hsLang=es#como-importar-feed-the-productos) - [Cómo gestionar los detalles del producto:](https://support.publitas.com/es/comercio-electr%C3%B3nico-y-feed-de-productos?hsLang=es#c%C3%B3mo-gestionar-los-detalles-del-producto) - [Soluciones de E-Commerce](https://support.publitas.com/es/comercio-electr%C3%B3nico-y-feed-de-productos?hsLang=es#soluciones-de-e-commerce) - [Publicaciones Dinámicas.](https://support.publitas.com/es/publicaciones-din%C3%A1micas?hsLang=es#main-content) - [Cómo crear contenido dinámico](https://support.publitas.com/es/publicaciones-din%C3%A1micas?hsLang=es#c%C3%B3mo-crear-contenido-din%C3%A1mico) - [Análisis de Publicaciones.](https://support.publitas.com/es/an%C3%A1lisis-de-publicaciones?hsLang=es#main-content) - [Tablero de Publicación](https://support.publitas.com/es/an%C3%A1lisis-de-publicaciones?hsLang=es#tablero-de-publicaci%C3%B3n) - [Google Analytics](https://support.publitas.com/es/an%C3%A1lisis-de-publicaciones?hsLang=es#google-analytics) - [Otras Integraciones](https://support.publitas.com/es/an%C3%A1lisis-de-publicaciones?hsLang=es#otras-integraciones) - [Conclusiones y recomendaciones](https://support.publitas.com/es/an%C3%A1lisis-de-publicaciones?hsLang=es#conclusiones-y-recomendaciones) - [API](https://support.publitas.com/es/api?hsLang=es#main-content) - [API de Publitas](https://support.publitas.com/es/api?hsLang=es#api-de-publitas) - [Privacidad y Seguridad.](https://support.publitas.com/es/privacidad-y-seguridad?hsLang=es#main-content) - [Seguridad de la cuenta](https://support.publitas.com/es/privacidad-y-seguridad?hsLang=es#seguridad-de-la-cuenta) - [Cookies, privacidad y políticas](https://support.publitas.com/es/privacidad-y-seguridad?hsLang=es#cookies-privacidad-y-pol%C3%ADticas) - [Cuenta](https://support.publitas.com/es/cuenta?hsLang=es#main-content) - [Nombre de usuario y contraseña](https://support.publitas.com/es/cuenta?hsLang=es#nombre-de-usuario-y-contrase%C3%B1a) - [Gestionar tu cuenta](https://support.publitas.com/es/cuenta?hsLang=es#gestionar-tu-cuenta) - [Facturación.](https://support.publitas.com/es/facturaci%C3%B3n?hsLang=es#main-content) - [Detalles de facturación](https://support.publitas.com/es/facturaci%C3%B3n?hsLang=es#detalles-de-facturaci%C3%B3n) - [Suscripción](https://support.publitas.com/es/facturaci%C3%B3n?hsLang=es#suscripci%C3%B3n) - [Tráfico de Datos](https://support.publitas.com/es/facturaci%C3%B3n?hsLang=es#tr%C3%A1fico-de-datos) - [Socios e integraciones](https://support.publitas.com/es/socios-e-integraciones?hsLang=es) - [Centro de Aprendizaje](https://support.publitas.com/es/centro-de-aprendizaje?hsLang=es#main-content) - [Tutoriales](https://support.publitas.com/es/centro-de-aprendizaje?hsLang=es#tutoriales) - [Confianza y seguridad](https://support.publitas.com/es/confianza-y-seguridad?hsLang=es) [![publitas logo blue](https://support.publitas.com/hs-fs/hubfs/01.%20Brand%20kit/Publitas-logo-trans-publitas-blue-backg-02_900px.png?width=162&height=64&name=Publitas-logo-trans-publitas-blue-backg-02_900px.png "publitas logo blue")](http://publitas.com) Copyright © 2026, Publitas B.V.