Problema al crear un bloque selector de imagen.

[asahic]

Hola, estoy tratando de crear un bloque dentro de la sección máin-product en una plantilla Dawn. 

Estoy utilizando estós códigos:

En la sección de {% schema %} estoy utilizando esté: 

{
  "type": "mensaje_pagos",
  "name": "metodo pagos",
  "limit": 1,
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Imagen"
    }
  ]
},

En la section coloque este: 

 {%- when 'mensaje_pagos' -%}
  {% assign image = section.settings.image.src | img_url: 'master' %}


  <div id="sku-{{ section.id }}" {{ block.shopify_attributes }}>
    <img src="{{ image }}" style="width:100%; height:auto; display:block; border:1px solid #ddd;" class="img-responsive">
  </div>

Al momento de personalizar mi tema, me muestra el bloque correctamente, me deja elegir la imagen, pero no se ve la imagen. 

No se si me puedan ayudar en que estoy haciendo mal, apenas estoy empezando a aprender a programar e igual estoy empezando con liquid así que estoy un poco perdido. Muchas gracias. 

[Javier]

Hola @asahic,

Gracias por ponerte en contacto y por compartir el código que estás usando para intentar personalizar tu tema.

Solo para aclarar, modificaciones de código se quedan fuera del alcance del soporte de Shopify. Sin embargo, recomendamos que sigas los consejos en la guía 'Editar código de tema' para prevenir problemas y garantizar que tengas versiones de tu tema anteriores de los cambios que haces. Así, puedes revertir modificaciones si no funcionan como quieres.

Mientras esperas por una espera de otro desarrollador, te sugiero a subir tu pregunta en inglés en nuestros foros para los desarrolladores. Ese sub-foro tiene muchos participantes que son desarrolladores y participan activamente a responder a muchas dudas puestas por parte de varios usuarios.

Otra cosa que puedes hacer es juntarte al grupo de Discord para los desarrolladores de Shopify aquí y subir tu pregunta allá.

Saludos,

[joseamayadev]

La logica esta correcta, solo debes quitar el src cuando quieras usar el filtro de de imagen y te recomiendo usar image_url en lugar de img_url que esta obsoleto pero sigue teniendo soporte.

El código debe verse de la siguiente forma, para que puedas extraer el atributo de url con el filtro image_url sin usar la propierdad src:

{% assign image = section.settings.image | image_url %} 

Este es un ejemplo de como lo uso en los temas de Shopify:

section.settings.imageObjectTop | image_url: width: '584', format: 'pjpg' 

Y si quisieras extraer el atributo alt de la imagen solo debes acceder al siguiente objeto imagen section.settings.image.alt y ya con esto puedes tener dinamico toda la asignación y visualización de imágenes. 

Puedes conocer mas del filtro acá:

https://shopify.dev/docs/api/liquid/filters/image_tag

Espero te ayude la respuesta, un saludo