Ir al contenido principal

Cómo cambiar el nombre de los encabezados de Accesorios o Artículos Alternativos en tu galería de Squarespace

Aprende a renombrar los títulos de Accesorios y Artículos Alternativos en tu galería de Goodshuffle Pro con un script en Squarespace.

Escrito por Sierra Burton

Esta función está disponible en todos los planes de Goodshuffle Pro.

Descripción general

Puedes cambiar el nombre de los encabezados de Accesorios y Artículos alternativos en tu galería de Goodshuffle Pro por cualquier texto que prefieras, como "Tamaños disponibles" o "Combina bien con". Solo necesitas agregar un pequeño script a tu sitio de Squarespace y te tomará unos cinco minutos.

Esto es útil cuando las etiquetas predeterminadas no coinciden con el uso que le das a esas secciones. Por ejemplo, si enlazas diferentes tamaños de un mantel como artículos alternativos, "Tamaños disponibles" le muestra a tus clientes exactamente lo que están viendo.

Antes de comenzar

  • Verifica tu plan de Squarespace. Agregar scripts requiere el plan Core o superior. Si tienes el plan Personal, la opción de Inyección de código no estará disponible.

  • Decide qué debe decir cada encabezado. La nueva etiqueta se aplicará a todos los artículos de tu galería, no solo a uno. Si algunos artículos usan Accesorios para accesorios reales (servilletas, caminos de mesa, bases) y otros lo usan para tamaños, elige un texto que funcione para ambos, o deja ese encabezado como está.

  • Evita encabezados duplicados. Si un artículo tiene tanto Accesorios como Artículos alternativos, ponle una etiqueta diferente a cada uno para que los clientes no vean dos secciones con el mismo nombre.

Nota sobre el soporte: Este es un cambio de código personalizado en tu sitio de Squarespace, por lo que está fuera del alcance del soporte de Goodshuffle Pro. Si algo no se ve bien, solo elimina el script y tus encabezados volverán a los valores predeterminados de inmediato.

Paso 1: Copia y personaliza el script

Copia el siguiente script. Luego cambia el texto a la derecha de cada línea por la etiqueta que desees. Mantén las comillas y la coma al final de la primera línea.

<script>(function () {  const LABELS = {    'Accessories': 'Tamaños disponibles',    'Alternate Items': 'Otros tamaños'  };  function relabel() {    document.querySelectorAll('.gspro-c-item-detail__related h3').forEach(function (h) {      const text = h.textContent.trim();      if (LABELS[text]) h.textContent = LABELS[text];    });  }  new MutationObserver(relabel).observe(document.body, { childList: true, subtree: true });  relabel();})();</script>

¿Solo quieres cambiar un encabezado? Borra la línea del otro y elimina la coma de la línea que queda. Por ejemplo:

const LABELS = {  'Alternate Items': 'Tamaños disponibles'};

El texto de la izquierda debe coincidir exactamente con el encabezado actual, incluyendo mayúsculas: Accessories o Alternate Items.

Paso 2: Agrega el script a Squarespace

  1. Inicia sesión en Squarespace y abre tu sitio.

  2. Haz clic en Sitio web en el menú de la izquierda, desplázate hasta abajo y haz clic en Herramientas del sitio web, luego en Código personalizado.

    En algunos diseños antiguos, esto está en Configuración > Avanzado.

  3. Haz clic en Inyección de código.

  4. Pega el script completo, incluyendo las líneas <script> y </script>, en el cuadro de Pie de página.

  5. Haz clic en Guardar.

Si ya tienes otro código en el cuadro de Pie de página, pega el script debajo de ese código. No reemplaces lo que ya está.

¿Solo quieres el cambio en una página? En vez de los pasos anteriores, ve a Páginas, pasa el cursor sobre la página de la galería, haz clic en el ícono de engranaje, abre Avanzado y pega el script en Inyección de código de encabezado de página.

Paso 3: Revisa tu sitio en vivo

  1. Abre tu sitio web en vivo en una nueva pestaña del navegador. Puede que necesites cerrar sesión en Squarespace o usar una ventana privada para ver lo que ven tus clientes.

  2. Actualiza la página y ve a tu galería.

  3. Haz clic en un artículo que tenga accesorios o artículos alternativos y confirma que el encabezado muestre el nuevo texto.

  4. Haz clic en varios artículos de diferentes categorías para asegurarte de que la nueva etiqueta tenga sentido en todos los casos.

Opcional: Haz el encabezado más pequeño

Si el encabezado se ve muy grande, agrega esto en Sitio web > Herramientas del sitio web > Código personalizado > CSS personalizado (o en Diseño > CSS personalizado en diseños antiguos):

gspro-item-detail .gspro-c-item-detail__related h3 {  font-size: 1.5rem !important;  line-height: 1.2 !important;  margin-bottom: 1rem !important;}

Aumenta o disminuye 1.5rem hasta que se vea bien. 1rem equivale a unos 16 píxeles, así que 1.5rem son unos 24 píxeles. Esto solo afecta los encabezados en la sección de artículos relacionados, no otros encabezados de tu sitio.

Solución de problemas

El encabezado no cambió.

  • Asegúrate de que el texto de la izquierda en la línea de la etiqueta coincida exactamente con el encabezado actual, incluyendo mayúsculas.

  • Verifica que pegaste todo el script, incluyendo las líneas de apertura <script> y cierre </script>.

  • Confirma que hiciste clic en Guardar en Inyección de código y luego actualiza tu sitio en vivo. La inyección de código no siempre se muestra en la vista previa del editor de Squarespace.

No veo la opción de Inyección de código.

Probablemente tu sitio está en el plan Personal de Squarespace, que no permite scripts personalizados. Necesitarás actualizar a Core o superior para usar esto.

Ahora hay dos secciones con el mismo nombre.

Pon etiquetas diferentes para Accesorios y Artículos alternativos en el script, como "Tamaños disponibles" y "Otros tamaños".

¿Cómo deshago esto?

Elimina el script de Inyección de código y haz clic en Guardar. Tus encabezados volverán a los valores predeterminados de inmediato.


¿Necesitas ayuda adicional? Haz clic en la burbuja azul de chat en la esquina inferior de tu pantalla para enviar un mensaje a nuestro equipo de soporte. ¡Estamos para ayudarte!

Descargo de responsabilidad: Este artículo fue traducido usando IA. Si tienes preguntas o necesitas aclaraciones, contáctanos usando la burbuja de chat en la esquina inferior de tu pantalla.

¿Ha quedado contestada tu pregunta?