Erro para centralizar as imagens na descrição do produto

[Joaobadm10]

Boa tarde

Estou com problema para centralizar as imagens na descrição do produto, a imagem até centraliza dentro da Shopify, mas na exibição da loja não centraliza, o que pode ser?

[LarissaAlves]

Boa noite. Também tenho o mesmo problema

[Family_35]

Olá

Testei o seguinte na minha loja e deu certo.

Substitua a tag <img> da sua descrição na Shopify pela tag <img> a seguir.

<img style="display: block; margin-left: auto; margin-right: auto; width: 50%" src=(coloque o src da sua imagem aqui)>

Para alterar o tamanho da imagem, mude a porcentagem em “width”.

Fonte: https://community.shopify.com/c/shopify-discussions/custom-html-how-to-center-an-image/td-p/720648 

[KauanSales]

Não entendi bem como fazer isso, tem várias "Img" no código da minha descrição, como faço isso?

[Family_35]

Olá.

Para centralizar a imagem na página do seu produto real, sugiro que você faça este procedimento da primeira vez com um produto duplicado ou com um produto aleatório, no modo rascunho em qualquer caso. Se você apagar alguma informação sem querer, nada será perdido.

Na página da Shopify onde você edita a descrição do produto, insira a imagem.

Como você notou, a opção “Exibir HTML” deve ser selecionada.

Depois que selecionou “Exibir HTML”, você viu algo assim:

 Como você percebeu, o “img” faz parte do código que representa a imagem.

Perceba também que toda imagem começa com este símbolo “<”, que é seguido por img, uma série de outras informações e termina com o símbolo “>”.

Ou seja, de forma geral, as imagens são representadas assim <img ... >

Vou centralizar a primeira imagem.

Para facilitar, você pode separar a imagem ( <img ... > ) dos outros símbolos com Enter.

Para fazer isso, posicione o ponteiro do seu mouse antes do símbolo que inicia a imagem, ou seja, antes do símbolo “<”.

Em seguida, aperte a tecla Enter.

Vai ficar algo assim.

Esses espaços não vão interferir na distância entre as suas imagens na página do produto. A distância entre as imagens vai ficar como era antes.

Então, para ficar mais fácil de enxergar a imagem na forma <img ...>, você pode usar Enter mais vezes.

Vai aparecer algo assim.

Agora, você precisa fazer o mesmo procedimento de separar com Enter com o final da sua imagem na forma <img ... > , ou seja, com o sinal de “>”.

Para isso, localize o símbolo que representa o fim da imagem.

Coloque o ponteiro do mouse depois dele.

Use a tecla Enter e algo como a imagem na forma <img ...> a seguir vai aparecer para você.

Vou apertar mais vezes a tecla Enter para ficar mais fácil de ver.

Agora você vai selecionar este código e copiar.

<img style="display: block; margin-left: auto; margin-right: auto; width: 50%" src=(cole o seu src aqui)>

Cole o que foi copiado abaixo da sua imagem original na forma <img ...>

Selecione e copie na página do seu produto, o equivalente da sua página ao destaque amarelo na imagem abaixo. Ou seja, a informação depois de "src=".

Você deve copiar as aspas também.

No código abaixo da sua imagem na forma <img ...>, você deve substituir o que está no retângulo vermelho, ou seja, a expressão “(cole o src aqui)” por tudo o que você acabou de copiar, isto é, pelo equivalente na sua página ao que está em destaque amarelo.

Vai ficar algo assim.

Em seguida, você pode apagar a imagem de cima, que é o formato antigo da sua imagem.
Deixe apenas a de baixo, o formato centralizado.

Geralmente, 50% é um tamanho pequeno para imagens.

Para ajustar o tamanho da sua imagem na página do produto, você precisa alterar a porcentagem.

Vou ajustar o tamanho da imagem para 70%.

Basta substituir 50% por 70%.

Para visualizar a imagem e a sua página de descrição de novo, selecione “Exibir editor”.

Pronto. A sua imagem ficou centralizada.

Espero que consigam centralizar suas imagens.
@Magdiel 
@KauanSales

[Magdiel]

Muito obrigado ajudou bastante, uma pena que tem que fazer em cada imagem vou ver se troco de tema por essa questão!

[TariqAugusto]

E quando as imagens ficam centralizadas no celular mas não na versão em desktop?