Page Collections

Plantilla de página editorial completa para mostrar colecciones o lookbooks. Se organiza en tres zonas independientes:

Cabecera (header) — banner de gran formato (imagen o vídeo) con texto superpuesto opcional y enlace.
Grupos (groups) — una o varias cuadrículas de bloques. Cada bloque puede ser de tipo product, image, video o text, con span de columnas y filas configurable.
Landing (landing) — sección inferior con un content asset embebido y un botón CTA de dos líneas con colores totalmente personalizables.

Vista previa

Sin imagen disponible aún. Añade una captura en ./img/page-collections.jpg y descomenta la línea siguiente.

Comportamiento

fullwidth raíz: si true, la página ocupa el 100% del ancho del viewport sin márgenes laterales.
gap raíz: controla si hay separación vertical entre los grupos.
Cabecera: sólo se renderiza si header.visible: true. Admite banner de imagen o de vídeo (archivo MP4 o YouTube) en la propiedad content.
Texto de cabecera: si header.text.title o header.text.description tienen valor, se superponen sobre el banner. Opcionalmente se puede incluir una imagen de logo (header.text.image).
Grupos: cada grupo es una cuadrícula CSS. La propiedad gap del grupo añade separación entre sus ítems. Los ítems se colocan en orden de documento y pueden ocupar varias columnas (columns) y filas (rows).
Fondo de grupo: cada grupo admite un color de fondo opcional (style.background) que se aplica a toda la cuadrícula, detrás de todos sus ítems.
Enlace de ítem: si link.url tiene valor, el bloque completo queda envuelto en un <a>. Admite expresiones $url de SFCC.
Ítem de tipo product: renderiza el tile de producto usando el ID de SFCC. Las imágenes image_1 y image_2 sobreescriben las imágenes de producto predeterminadas (hover incluido). Admite además un borde opcional (content.style.border) aplicado directamente a la imagen del producto.
Ítem de tipo image: admite logo superpuesto y botón CTA con colores totalmente configurables.
Ítem de tipo video: soporta fichero MP4 (URL directa) o YouTube (ID del vídeo). Opciones de reproducción automática, silencio, bucle y controles.
Ítem de tipo text: bloque de título y texto plano, sin imagen.
Landing: el content asset referenciado por contentAssetId se incrusta en el cuerpo de la página. El botón CTA aparece encima (text.top) y debajo (text.bottom) de dicho asset.

Configuración

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "fullwidth": true,
  "gap": false,
  "header": {
    "visible": true,
    "fullwidth": true,
    "text": {
      "title": "Colección Verano 2025",
      "image": {
        "url": "",
        "alt": ""
      },
      "description": "Descubre los estilos de la temporada"
    },
    "link": {
      "url": "$url('Search-Show', 'cgid', 'novedades')$",
      "target": "_self"
    },
    "content": {
      "type": "image",
      "alt": "Colección Verano 2025",
      "file": {
        "mobile": "pages/collections/summer25/header-mobile.jpg?$staticlink$",
        "desktop": "pages/collections/summer25/header-desktop.jpg?$staticlink$"
      }
    }
  },
  "groups": [
    {
      "gap": true,
      "style": {
        "background": "#ffffff"
      },
      "items": [
        {
          "columns": 2,
          "rows": 2,
          "link": {
            "url": "$url('Search-Show', 'cgid', 'gafas-sol')$",
            "target": "_self"
          },
          "type": "image",
          "content": {
            "alt": "Gafas de sol",
            "mobile": "pages/collections/summer25/block-sol-mobile.jpg?$staticlink$",
            "desktop": "pages/collections/summer25/block-sol-desktop.jpg?$staticlink$",
            "logo": "",
            "button": {
              "text": "Ver gafas de sol",
              "color": {
                "text": "#ffffff",
                "background": "#000000",
                "border": "#000000",
                "hover": {
                  "text": "#000000",
                  "background": "#ffffff",
                  "border": "#ffffff"
                }
              }
            }
          }
        },
        {
          "columns": 1,
          "rows": 1,
          "link": {
            "url": "$url('Product-Show', 'pid', 'HK-ONE-SUNGLASSES-001')$",
            "target": "_self"
          },
          "type": "product",
          "content": {
            "id": "HK-ONE-SUNGLASSES-001",
            "image_1": "",
            "image_2": "",
            "style": {
              "border": {
                "width": "0.6px",
                "color": "#000000"
              }
            }
          }
        },
        {
          "columns": 1,
          "rows": 1,
          "link": {
            "url": "",
            "target": "_self"
          },
          "type": "text",
          "content": {
            "title": "Diseño atemporal",
            "text": "Cada pieza de nuestra colección combina materiales premium con un diseño que trasciende las tendencias."
          }
        },
        {
          "columns": 1,
          "rows": 2,
          "link": {
            "url": "",
            "target": "_self"
          },
          "type": "video",
          "content": {
            "options": {
              "autoplay": true,
              "muted": true,
              "loop": true,
              "controls": false
            },
            "file": {
              "mobile": "https://cdn.hawkers.com/media/collections/summer25/loop-mobile.mp4",
              "desktop": "https://cdn.hawkers.com/media/collections/summer25/loop-desktop.mp4"
            },
            "poster": {
              "mobile": "pages/collections/summer25/video-poster-mobile.jpg?$staticlink$",
              "desktop": "pages/collections/summer25/video-poster-desktop.jpg?$staticlink$"
            }
          }
        }
      ]
    }
  ],
  "landing": {
    "contentAssetId": "summer25-landing-grid",
    "button": {
      "text": {
        "top": "Descubre la colección completa",
        "bottom": "Ver todo"
      },
      "color": {
        "text": "#ffffff",
        "background": "#000000",
        "border": "#000000",
        "hover": {
          "text": "#000000",
          "background": "#ffffff",
          "border": "#ffffff"
        }
      }
    }
  }
}

Propiedades

Raíz

Propiedad	Tipo	Obligatorio	Descripción
`fullwidth`	`boolean`	No	Si `true`, la página no tiene márgenes laterales y ocupa todo el viewport.
`gap`	`boolean`	No	Si `true`, añade separación vertical entre grupos.
`header`	`object`	No	Zona de cabecera con banner y texto superpuesto.
`groups`	`array`	Sí	Listado de grupos, cada uno con su propia cuadrícula de ítems.
`landing`	`object`	No	Sección inferior con content asset embebido y botón CTA.

Cabecera (`header`)

Propiedad	Tipo	Obligatorio	Descripción
`header.visible`	`boolean`	Sí	Si `false`, la cabecera completa no se renderiza.
`header.fullwidth`	`boolean`	No	Si `true`, el banner de cabecera ocupa el ancho completo.
`header.text.title`	`string`	No	Título superpuesto sobre el banner.
`header.text.image.url`	`string`	No	URL de una imagen de logo superpuesta en el área de texto.
`header.text.image.alt`	`string`	No	Texto alternativo de la imagen del logo.
`header.text.description`	`string`	No	Subtítulo o descripción superpuesta sobre el banner.
`header.link.url`	`string`	No	URL de destino al hacer clic en la cabecera.
`header.link.target`	`string`	No	`"_self"` o `"_blank"`.
`header.content`	`object`	Sí	Contenido del banner: imagen o vídeo. Ver formatos a continuación.

Contenido de cabecera

Imagen
Vídeo

{
  "type": "image",
  "alt": "Texto alternativo de la imagen",
  "file": {
    "mobile": "pages/collections/banner-mobile.jpg?$staticlink$",
    "desktop": "pages/collections/banner-desktop.jpg?$staticlink$"
  }
}

Propiedad	Tipo	Descripción
`type`	`string`	Siempre `"image"`.
`alt`	`string`	Texto alternativo (accesibilidad y SEO).
`file.mobile`	`string`	Ruta de la imagen en móvil. Debe terminar en `?$staticlink$`.
`file.desktop`	`string`	Ruta de la imagen en escritorio. Debe terminar en `?$staticlink$`.

{
  "type": "video",
  "options": {
    "autoplay": true,
    "muted": true,
    "loop": true,
    "controls": false
  },
  "desktop": {
    "type": "file",
    "source": "https://cdn.hawkers.com/media/banner-desktop.mp4",
    "poster": "pages/collections/poster-desktop.jpg?$staticlink$"
  },
  "mobile": {
    "type": "youtube",
    "source": "dQw4w9WgXcQ",
    "poster": "pages/collections/poster-mobile.jpg?$staticlink$"
  }
}

Propiedad	Tipo	Descripción
`type`	`string`	Siempre `"video"`.
`options.autoplay`	`boolean`	Reproducción automática al cargar.
`options.muted`	`boolean`	Sin audio (obligatorio para autoplay en la mayoría de navegadores).
`options.loop`	`boolean`	Bucle continuo.
`options.controls`	`boolean`	Muestra los controles del reproductor.
`desktop.type`	`string`	`"file"` (MP4 directo) o `"youtube"` (ID del vídeo de YouTube).
`desktop.source`	`string`	URL del MP4 o ID de YouTube para escritorio.
`desktop.poster`	`string`	Imagen de portada mientras carga el vídeo de escritorio. Debe terminar en `?$staticlink$`.
`mobile.type`	`string`	`"file"` o `"youtube"` para móvil.
`mobile.source`	`string`	URL del MP4 o ID de YouTube para móvil.
`mobile.poster`	`string`	Imagen de portada mientras carga el vídeo de móvil. Debe terminar en `?$staticlink$`.

Grupos e ítems

Propiedad	Tipo	Obligatorio	Descripción
`groups[].gap`	`boolean`	No	Si `true`, añade separación entre los ítems del grupo.
`groups[].style.background`	`string`	No	Color de fondo (hex) aplicado a toda la cuadrícula del grupo, detrás de todos sus ítems.
`groups[].items`	`array`	Sí	Ítems del grupo.
`items[].columns`	`number`	No	Número de columnas que ocupa el ítem en la cuadrícula. Por defecto `1`.
`items[].rows`	`number`	No	Número de filas que ocupa el ítem en la cuadrícula. Por defecto `1`.
`items[].link.url`	`string`	No	URL de destino. Admite expresiones `$url` de SFCC. Si está vacío, el ítem no es clicable.
`items[].link.target`	`string`	No	`"_self"` o `"_blank"`.
`items[].type`	`string`	Sí	Tipo del ítem: `"product"`, `"image"`, `"video"` o `"text"`.
`items[].content`	`object`	Sí	Contenido del ítem. La estructura varía según `type`. Ver tabla por tipo a continuación.

Contenido de ítem

product
image
video
text

{
  "id": "HK-ONE-SUNGLASSES-001",
  "image_1": "pages/collections/custom-front.jpg?$staticlink$",
  "image_2": "pages/collections/custom-side.jpg?$staticlink$",
  "style": {
    "border": {
      "width": "0.6px",
      "color": "#000000"
    }
  }
}

Propiedad	Tipo	Descripción
`id`	`string`	ID del producto en SFCC. El tile usa los datos del catálogo (precio, disponibilidad, etc.).
`image_1`	`string`	Imagen frontal personalizada (sobreescribe la del catálogo). Termina en `?$staticlink$`.
`image_2`	`string`	Imagen lateral/hover personalizada (sobreescribe la del catálogo). Termina en `?$staticlink$`.
`style.border.width`	`string`	Grosor del borde aplicado a la imagen del producto (ej. `"0.6px"`, `"1px"`). Opcional.
`style.border.color`	`string`	Color del borde (hex) aplicado a la imagen del producto. Opcional.

{
  "alt": "Descripción de la imagen",
  "mobile": "pages/collections/block-mobile.jpg?$staticlink$",
  "desktop": "pages/collections/block-desktop.jpg?$staticlink$",
  "logo": "pages/collections/logo-marca.svg?$staticlink$",
  "button": {
    "text": "Descubrir",
    "color": {
      "text": "#ffffff",
      "background": "#000000",
      "border": "#000000",
      "hover": {
        "text": "#000000",
        "background": "#ffffff",
        "border": "#ffffff"
      }
    }
  }
}

Propiedad	Tipo	Descripción
`alt`	`string`	Texto alternativo de la imagen.
`mobile`	`string`	Imagen en móvil. Debe terminar en `?$staticlink$`.
`desktop`	`string`	Imagen en escritorio. Debe terminar en `?$staticlink$`.
`logo`	`string`	Logo superpuesto sobre la imagen. Debe terminar en `?$staticlink$`. Opcional.
`button.text`	`string`	Texto del botón CTA.
`button.color.text`	`string`	Color del texto del botón.
`button.color.background`	`string`	Color de fondo del botón.
`button.color.border`	`string`	Color del borde del botón.
`button.color.hover.text`	`string`	Color del texto al hacer hover.
`button.color.hover.background`	`string`	Color de fondo al hacer hover.
`button.color.hover.border`	`string`	Color del borde al hacer hover.

{
  "options": {
    "autoplay": true,
    "muted": true,
    "loop": true,
    "controls": false
  },
  "file": {
    "mobile": "https://cdn.hawkers.com/media/collections/loop-mobile.mp4",
    "desktop": "https://cdn.hawkers.com/media/collections/loop-desktop.mp4"
  },
  "poster": {
    "mobile": "pages/collections/poster-mobile.jpg?$staticlink$",
    "desktop": "pages/collections/poster-desktop.jpg?$staticlink$"
  }
}

Propiedad	Tipo	Descripción
`options.autoplay`	`boolean`	Reproducción automática.
`options.muted`	`boolean`	Sin audio.
`options.loop`	`boolean`	Bucle.
`options.controls`	`boolean`	Mostrar controles del reproductor.
`file.mobile`	`string`	URL directa del MP4 en móvil (sin $staticlink$ ).
`file.desktop`	`string`	URL directa del MP4 en escritorio (sin $staticlink$ ).
`poster.mobile`	`string`	Imagen de portada en móvil. Debe terminar en `?$staticlink$`.
`poster.desktop`	`string`	Imagen de portada en escritorio. Debe terminar en `?$staticlink$`.

{
  "title": "Diseño atemporal",
  "text": "Cada pieza combina materiales premium con un diseño que trasciende las tendencias."
}

Propiedad	Tipo	Descripción
`title`	`string`	Título del bloque de texto.
`text`	`string`	Cuerpo del texto (sin soporte para HTML).

Landing (`landing`)

Propiedad	Tipo	Obligatorio	Descripción
`landing.contentAssetId`	`string`	Sí	ID del content asset que se incrusta en la zona de landing.
`landing.button.text.top`	`string`	No	Texto del botón CTA que aparece encima del content asset incrustado.
`landing.button.text.bottom`	`string`	No	Texto del botón CTA que aparece debajo del content asset incrustado.
`landing.button.color.text`	`string`	No	Color del texto del botón.
`landing.button.color.background`	`string`	No	Color de fondo del botón.
`landing.button.color.border`	`string`	No	Color del borde del botón.
`landing.button.color.hover.*`	`object`	No	Mismas propiedades (`text`, `background`, `border`) para el estado hover.

Notas y consejos

Fichero de plantilla

pages/collections.isml

Coordina las tres zonas (header, groups, landing) e incluye las subplantillas correspondientes para cada tipo de ítem y de contenido.

Expresiones $url para los enlaces

Usa expresiones $url de SFCC para garantizar que los enlaces funcionen en todos los entornos (sandbox, staging, producción):

"url": "$url('Search-Show', 'cgid', 'ID_DE_CATEGORIA')$"
"url": "$url('Product-Show', 'pid', 'ID_DE_PRODUCTO')$"
"url": "$url('Page-Show', 'cid', 'ID_DE_PAGINA')$"

Vídeos: autoplay requiere muted: true

Los navegadores modernos bloquean el autoplay de vídeos con audio. Para que autoplay: true funcione, muted debe ser true. El usuario puede activar el audio manualmente si se muestran los controles.

Vídeos MP4 en ítems del grid: no usan $staticlink$

Las URLs de los ficheros MP4 en ítems de tipo video (campo file.mobile y file.desktop) son URLs absolutas directas y no llevan ?$staticlink$. Las imágenes de portada (poster) sí la llevan porque son recursos estáticos del cartucho.

columns y rows para construir layouts asimétricos

Combinando columns y rows puedes crear composiciones editoriales complejas — por ejemplo, un bloque 2×2 junto a dos bloques 1×1 apilados:

{ "columns": 2, "rows": 2, "type": "image", ... },
{ "columns": 1, "rows": 1, "type": "product", ... },
{ "columns": 1, "rows": 1, "type": "text", ... }

La landing incrusta otro content asset

landing.contentAssetId referencia un content asset independiente (por ejemplo, un grid adicional de productos) que se renderiza dentro de la landing. Los botones CTA arriba y abajo dan acceso a la categoría o página destino. Si contentAssetId está vacío, la zona de landing no se renderiza.

Vista previa​

Comportamiento​

Configuración​

Propiedades​

Raíz​

Cabecera (header)​

Contenido de cabecera​

Grupos e ítems​

Contenido de ítem​

Landing (landing)​

Notas y consejos​