Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Como adiciono o efeto lupa nas fotos dos produtos?

ara melhorar a visualização do produto você pode utilizar plugins javascript, como o efeito de lupa.

Para usar a lupa, deve ser incluído no layout.tpl a chamada para o plugin:

{{ 'cloud-zoom.1.0.2.min.js' | static_url | script_tag }}

Modo de uso:

<!-- Mais informações em http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm -->
<a href="{{ product.featured_image | product_image_url('original') }}" id="zoom" class="cloud-zoom" rel="position: 'inside', showTitle: false, loading: 'Cargando...'">
{{ product.featured_image | product_image_url('medium') | img_tag }}
</a>
<!—código para a miniatura -->
<a href="{{ image | product_image_url('original') }}" class="cloud-zoom-gallery" rel="useZoom: 'zoom', smallImage: '{{ image | product_image_url('large') }}' ">
{{ image | product_image_url('thumb') | img_tag(product.name) }}
</a>