item 1 <a class="smooth-scroll " href="#comprar"> imagens com botão comprar para

fazer a rolagem
item 2 <a id="comprar"> onde você quer que a rolagem do comprar pare
item 3 <a href="linkbuybutton"> link individual de compra por variação de cada produto

__________________________________________________

<div id="buy-buttom" class="fixed-bottom" style="color: #fff; background-color: rgba(0, 0, 0,

0.8);"><a href="#checkout"><img src="https://confortaveis.com/wp-
content/uploads/2019/08/Buttonv2Brazil-1.gif" style="width: 65%;" /></a></div>
<div class="h-page" style="text-align: start;">

<!-- CONTEÚDO EM IMAGENS -->

Colocar a primeira imagem a partir daqui - dar alguns espaços com enter e depois apagar
até a imagem ficar no topo da página

<!-- ESTILO DA PÁGINA (NÃO MEXER) -->

</a></div>
</div>
</div>
<style media="screen"><!--
.fixed-top-h {
width: 100% !important;
height: 50px;
text-align: center;
color: #fff;
font-family: Arial, sans-serif;
line-height: 50px;
position: fixed;
top: 0
}

.fixed-bottom {
width: 100% !important;
text-align: center;
height: auto;
margin-top: 10px;
position: fixed;
margin: 0px;
padding: 10px;
bottom: 0px;
display: none;
}

.h-page {
 max-width: 600px;
margin: auto;
display: flex;
flex-wrap: wrap
}

.hackify-section {
width: 100%
}

.hackify-section.grey {
background: #ccc;
width: 100%
}

.flex-block {
width: auto;
font-size: 1.5em;
flex: 1;
padding: 15px
}

.yt-video {
width: 100% !important
}

@media only screen and (max-width:768px) {

.flex-block.video-yt {
height: 300px
}

.h-page {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: column
}

.h-page.img {
height: 250px !important
}
}

#MainContent {
padding-top: 0 !important
}
 .section-header {
margin-bottom: 0 !important
}

.medium-up--push-one-twelfth {
left: 0 !important
}

#shopify-section-footer {
display: none !important
}

.medium-up--five-sixths {
width: 100% !important
}

#shopify-section-header {
display: none !important
}

.page-width {
max-width: 2000px !important;
padding-left: 0 !important;
padding-right: 0 !important
}

.rte a:not(.btn) {
border-bottom: none !important;
padding-bottom: 25px
}

.section-header {
display: none !important
}
-->
--></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('.smooth-scroll').on('click', function(evt) {
evt.preventDefault();
$('html, body').animate(
{ scrollTop: $($(this).attr('href')).offset().top},
1000
);
});
});
// ]]></script>