Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Como mostrar as fotos na pagina do produto?

Código para mostrar a imagem de um único produto:

{% if product.featured_image %}
    <a href="{{ product.featured_image | product_image_url('original') }}"> {{ product.featured_image | product_image_url('medium') | img_tag }} </a>
{% endif %}

Existem tamanhos pré-fixados para as imagens (largura em pixels)

  • "tiny" → 50px
  • "thumb" → 100px
  • "small" → 240px
  • "medium" → 320px
  • "large" → 480px
  • "huge" → 640px
  • "original" → tamanho original da imagem


Com as propriedades max-width e max-height do CSS também é possível modificar o tamanho das imagens. 

E se o produto tem mais de uma foto?

{% if product.images_count > 1 %}
    {% for image in product.images %}
        <a href="{{ image | product_image_url('original') }}"> {{ image | product_image_url('thumb') | img_tag(product.name) }} </a>
    {% endfor %}
{% endif %}