De forma padrão, as fotos dos produtos geralmente são exibidas no lado esquerdo da imagem principal do produto.

image.png

Para alterar a posição, por exemplo, para baixo, siga os passos abaixo.

O resultado será esse:

image.png

Como fazer

Para deixar o slider de imagens pequenas na pagina de produto na direção horizontal, será necessário usar o comando no CLI "ws mod", e criar um módulo personalizado. Ele será usado apenas na pagina do produto, então marque apenas essa opção.

  1. Abra a pasta ./sys/default-modules/ws-pag-prod-desktop/1.0

image.png

  1. Copie o html inteiro do ws-pag-prod-desktop.html e navegue até o modulo personalizado que foi criado na pasta ./layout/modulos_loja/{seu modulo}

  2. Dentro dessa pasta também irá haver 4 arquivos, procure o {seu modulo}.html e cole o HTML que você copiou.

  3. Vá para o arquivo ajuda.txt, leia as instruções, copie a tag e cole no arquivo ./layout/estrutura_pagina_produto.html

2.png

  1. No seu html do módulo personalizado, busque por volta da linha 12, um span com o atributo data-wsjs-product="dots", esse elemento irá possuir outro atributo, o data-wsjs-slide.

É esse atributo que configura o slider, basta alterar o "vertical: true;" para "vertical: false;".

Após isso, vá no modulo personalizado e procure o {seu modulo}.css e adicione o seguinte CSS:

.prod-photo-container {
flex-direction: column-reverse;
}

.prod-photo-container [data-wsjs-product="dots"] {
width: 100%;
display: flex;
flex-direction: row;
height: fit-content;
margin-top: 1rem;
gap: 0;
position: relative;
}

.prod-photo-container [data-wsjs-product="dots"] .arrow--prev span[data-wsjs-icon] svg[ico=arrow],
.prod-photo-container [data-wsjs-product="dots"] .arrow--prev span[data-wsjs-icon] svg[ico=Arrow] {
transform: scaleY(1) rotateZ(90deg);
}

.prod-photo-container [data-wsjs-product="dots"] .arrow--next svg {
transform: scaleY(1) rotateZ(270deg);
}