(VOCÊ IRÁ ABRIR 3 GUIAS: DUAS SHOPIFY E UMA DA LOJA)

1- Vá em shopify>loja virtual>clique no olhinho para que você tenha uma visualização da

sua loja

2- Vá em shopify>loja virtual>temas>clica nos 3 pontos>duplicar (isso serve para fazer uma

cópia da sua loja, caso dê algum erro na que você for editar)

3- feito o processo acima, clique nos 3 pontos>editar código>vá em Seções> clica em

Adicionar um novo seção>coloque o nome carrossel-promocional

4- Copie esse código abaixo e cole dentro da seção que você criou (apague antes o que
estiver dentro da seção e depois cole o código abaixo)

<!-- INÍCIO DO SCRIPT PROMOÇÃO CARROSSEL -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.
min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQ
QR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/
slick.css"
integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v8
6FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<div class="wrapper">
<div class="my-slider">

<a href="Link do produto aqui"><div>Imagem do Slide 1

aqui</div></a>
<a href="Link do produto aqui"><div>Imagem do Slide 2
aqui</div></a>
<a href="Link do produto aqui"><div>Imagem do Slide 3
aqui</div></a>
<a href="Link do produto aqui"><div>Imagem do Slide 4
aqui</div></a>
<a href="Link do produto aqui"><div>Imagem do Slide 5
aqui</div></a>
<a href="Link do produto aqui"><div>Imagem do Slide 6
aqui</div></a>

</div>
</div>
<style>
.wrapper{
 padding: 70px 0;
overflow-x: hidden;
}

.my-slider{
padding: 0 40px;
}
.slick-initialized .slick-slide{
background-color:#e9e9e900;
color: #bbb;
height: 200px;
margin: 0 15px 0 0;
display: flex;
align-items: center;
/*justify-content: center;*/
text-decoration: none;
}

.slick-next, .slick-prev{
z-index: 5;
display:none;
}
.slick-next{
right: 15px;
display:none!important;
}
.slick-prev{
left: 15px;
display:none!important;
}
.slick-next:before, .slick-prev:before{
color: #000;
font-size: 26px;
}
.banner, .banner img {
height: 682px;
}
</style>
<script>
$('.my-slider').slick({
infinite: true,
dots: false, /* aqui são os pontinhos que fica no banner,se quiser
quer apareça, mude o false para true */
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
speed: 300, /* tempo de transição */
infinite: true,
 autoplaySpeed: 5000, /* tempo que demora para iniciar a animação,
está em milisegundos */
autoplay: true, /* aqui está programado para o carrossel começar
sozinho */
});
</script>
{% schema %}
{
"presets": [
{
"name": "Carrossel promocional",
"category":"Image",
"settings": {
}
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
<!-- FINAL DO SCRIPT PROMOÇÃO CARROSSEL -->

5- Agora vá em shopify>loja virtual>temas>personalizar>adicionar seção> clica na que você

criou>clica em salvar e saia

6- Volte para a guia dos códigos>aonde está escrito Link do produto aqui, o primeiro, você
colocará o link do produto no qual quer promover dessa forma

Agora vá na sua loja>clica no produto no qual quer promover>copie o link dele no topo e
cole esse link onde está escrito Link do produto aqui lá nos códigos

7- Agora vamos criar uma imagem para colocar no Imagem do Slide 1 aqui
Vá no canva>criar design>tamanho personalizado>coloque na largura o número 420 e na
altura: 200>clique em criar novo design (agora você irá criar a sua imagem assim como
mostro no vídeo)
8- Agora vá na shopify<produtos>adicionar produto>clica em inserir imagem e escolha a
imagem que você criou>clique em </> (exibir html)>copia o código que aparecer> volte para
os códigos da shopify e cole esse código que você copiou da imagem no lugar do Imagem
do Slide 1 aqui, feito isso, agora salva

9- Agora vá na loja e veja como ficou

(agora vocè irá fazer em todos, siga o mesmo procedimento, do 6° passo em diante, você
fará em linhas diferentes, é claro. tem 6 linhas lá, assim como mostro na foto abaixo
novamente)

10- Para colocar vídeo ao invés de fotos:

Vá nos códigos da shopify>coloque esse script informado abaixo no lugar de Imagem do

Slide 1 aqui (ou no que você quiser, me refiro a numeração, temos 6 Imagem do Slide,
assim como mostro na imagem acima)

<iframe width="420" height="315" src="LINK DO VIDEO AQUI"

title="Lucasnodrop" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Após colocado o script>vá em shopify>configurações>arquivos>fazer upload de

arquivo>clica no vídeo que você quiser>clica em link, feito isso você copiará o link desse
vídeo e colocará no lugar de LINK DO VIDEO AQUI no script acima