En Shopify normalmente las páginas utilizan URLs como:

/pages/nombre-de-la-pagina

Pero en Aromas queríamos compartir un documento de sostenibilidad con una URL más limpia y profesional:

https://www.aromas.co.cr/info/estrategiasostenibilidad

Además, necesitábamos que el PDF se visualizara directamente dentro del sitio web, sin obligar al usuario a descargarlo.

La solución fue crear una plantilla personalizada en Shopify utilizando Liquid e incrustar el PDF mediante un iframe.

¿Qué hicimos?

1. Subimos el PDF a Shopify

Primero subimos el archivo PDF al administrador de archivos de Shopify:

Content → Files

Esto genera una URL pública similar a:

https://cdn.shopify.com/s/files/...

En este caso:

https://cdn.shopify.com/s/files/1/0738/8233/7434/files/Estrategia_de_sostenibilidad_Aromas_FINAL.pdf?v=1779898958

2. Creamos una plantilla personalizada llamada “PDF”

Luego creamos una nueva plantilla para páginas.

Ruta:

Online Store → Themes → Customize

o directamente desde:

Edit code → Templates

Creamos una plantilla llamada:

page.pdf.json

La idea fue tener una plantilla reutilizable para mostrar documentos PDF dentro del sitio.

3. Añadimos una sección con Liquid personalizado

Dentro de la plantilla agregamos un bloque de “Custom Liquid” con un iframe.

Código utilizado:

<div style="width:100%; max-width:1100px; margin:0 auto; padding:20px 0;">
  <iframe 
    src="https://cdn.shopify.com/s/files/1/0738/8233/7434/files/Estrategia_de_sostenibilidad_Aromas_FINAL.pdf?v=1779898958"
    style="width:100%; height:85vh; border:none;"
    title="Estrategia de Sostenibilidad Aromas">
  </iframe>
</div>

<div style="width:100%; max-width:1100px; margin:0 auto; padding:20px 0;">
  <iframe 
    src="https://cdn.shopify.com/s/files/1/0738/8233/7434/files/Estrategia_de_sostenibilidad_Aromas_FINAL.pdf?v=1779898958"
    style="width:100%; height:85vh; border:none;"
    title="Estrategia de Sostenibilidad Aromas">
  </iframe>
</div>

Esto permite:

✅ visualizar el PDF directamente dentro del sitio
✅ mantener al usuario navegando en la página
✅ una experiencia más profesional
✅ compatibilidad con escritorio y móvil

4. Creamos la página en Shopify

Después creamos una página normal:

Online Store → Pages

Y le asignamos la plantilla:

PDF

Así Shopify carga automáticamente el iframe y muestra el documento.

5. Creamos una URL personalizada más limpia

Finalmente configuramos una redirección URL.

Ruta:

Content → Menus → URL Redirects

Redirección:

/info/estrategiasostenibilidad
→
/pages/estrategiasostenibilidad

Con esto logramos compartir una URL mucho más elegante:

https://www.aromas.co.cr/info/estrategiasostenibilidad

¿Por qué esta solución es buena?

Esta estrategia tiene varias ventajas:

• Mejora la presentación del documento
• Hace la URL más amigable
• Mantiene el branding del sitio
• Evita depender de plataformas externas
• Permite reutilizar la plantilla para futuros PDFs
• Es fácil de mantener desde Shopify

Ideas para mejorar aún más

Algunas mejoras que podrías agregar en el futuro:

• Botón de descarga del PDF
• Protección mediante acceso restringido
• SEO personalizado para documentos
• Breadcrumbs
• Visor fullscreen
• Analytics para medir visualizaciones
• Automatización para cargar PDFs dinámicamente

Resultado final

Ahora Aromas cuenta con una página profesional para compartir documentos corporativos directamente desde Shopify, utilizando una plantilla reutilizable y una URL limpia.

Ejemplo final:

https://www.aromas.co.cr/info/estrategiasostenibilidad

Una solución simple, elegante y muy útil para mostrar catálogos, manuales, reportes, políticas o documentos institucionales dentro de Shopify 🚀