Exibir a segunda imagem ao passar o mouse

Snippet da listagem dos produtos para exibir a segunda imagem ao passar o mouse.

Validar se o tema utiliza a opção de Edição do tema com o novo editor ou o antigo. Se utilizar o antigo, o código deve ser o inserido no arquivo settings.html, caso utilize o novo editor o código deve ser inserido no arquivo structure.json. Para maiores informações sobre o Editor de temas clique aqui.

Editor antigo - HTML para inserir no arquivo settings.html

HTML

<div class="item">
    <div class="box-option">
        <div class="msg">Exibir a segunda imagem ao passar o mouse?</div>
        <div class="list-radio flex">
            <label class="option flex align-center">
                <input type="radio" name="image_list" value="1">
                <div class="dot"></div>
                <div class="text">Sim</div>
            </label>
            <label class="option flex align-center">
                <input type="radio" name="image_list" value="0">
                <div class="dot"></div>
                <div class="text">Não</div>
            </label>
        </div>
    </div>
</div>

Novo Editor - JSON para inserir no arquivo structure.json

JSON

{
  "label": "Imagem do produto",
  "fields": [
    {
      "label": "Exibir a segunda imagem ao passar o mouse?",
      "type": "toggle",
      "description": "",
      "field": "image_list"
    }
  ]
}

HTML para inserir no arquivo snippets/product.html

HTML

<a href="{{ product.link }}" class="space-image{{ settings.image_list and product.images[1] and (not utils.is_mobile) ? ' second' }}">
    <img src="{{ product.images[0].large }}" alt="{{ product.name }}">
    {% if settings.image_list and product.images[1] and (not utils.is_mobile) %}
        <img src="{{ product.images[1].large }}" alt="{{ product.name }}">
    {% endif %}
</a>  

CSS para ser incluso dentro do arquivo de estilo da loja, por exemplo o style.css

CSS

.product .space-image {
    display: block;
    position: relative;
    overflow: hidden;
    height: 200px;
}

.product .space-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}

.product .space-image.second img:nth-child(2) {
    opacity: 0
}

.product:hover .space-image.second img:nth-child(1) {
    opacity: 0
}

.product:hover .space-image.second img:nth-child(2) {
    opacity: 1
}

Lembrando que se o tema utiliza o CSS minificado, o mesmo deve ser aplicado para esse item também. Faça as alterações no arquivo CSS e salve. Para que as modificações sejam refletidas na loja é necessário atualizar o arquivo CSS minificado, o style.min.css. Copie todo o código do arquivo style.css e utilize uma ferramenta de minificação de CSS. Recomendamos a ferramenta CSS Minifier. Você pode acessar ela clicando aqui.

Copie o código minificado gerado pela ferramenta e cole no arquivo style.min.css sobrescrevendo todo o conteúdo já existente. Salve as alterações utilizando o botão salvar.