Custom HTML (Store)

<div class="offerCode" style="margin-top:15px; margin-bottom:15px">
<div class="outer-seat" id="div-inline">
<div class="inner-seat">
<p style="margin-top:10px; text-align:center; vertical-align: middle"><b>50% Off</b> On First Order <br>Use Code: <b>XOOOM</b><br><small style="color:#FFFFFF">t&amp;C applies*</small></p></div></div>

<div class="outer-seat" id="div-inline">
<div class="inner-seat">
<p style="margin-top:10px; text-align:center; vertical-align: middle"><b>30% Off</b> On First Order <br>Use Code: <b>FIRST</b><br><small style="color:#FFFFFF">t&amp;C applies*</small></p></div></div>
<br class="clearBoth">
</div>

CSS

.offerCode {
overflow: hidden;
display: inline-block;
text-align: center;
}
.offerCode {
width: 20%;
float: left;
}
.offerCode {
position: relative;
width: 100%;
margin: 0;
left: 0;
text-align: left;
/animation: 20s slideshow infinite;/
}
@media screen and (max-width: 767px) {
.offerCode {
overflow: hidden;
width: 100%;
margin: 0 auto;
}
}
.outer-seat{
width: 175px;
height: 80px;
border-radius: 9px;
border: 3px solid #F89917;
background: white;
position: relative;
margin: 4px;
}
.inner-seat{
width: 165px;
height: 70px;
border-radius: 4px;
top: 50%;
left: 50%;
margin: -35px 0px 0px -83px;
background: #F89917;
position: absolute;
color:#ffffff;
}
#div-inline{float: left; }
.outer-seat:hover{
border-color: #F89917;
}
#div-inline:hover .inner-seat{
background: #F89917;
}
.clearBoth { clear:both; }
.selected-innerColor {
background-color: #F89917;
}
.selected-outerColor {
border-color: #F89917;
}

Better way to do the same

STORE CUSTOM HTML

<div class="offerslider-wrapper bg-light py-20 my-0">

  <a class="offerslider-wrapper__img-wrapper" href="#" style="position: relative; max-height:200px">
  <div class="outer-seat" id="div-inline">
  <div class="inner-seat">

  <p style="margin-top:10px; text-align:center; vertical-align: middle"><b>50% Off</b> On First Order <br>Use Code: <b>XOOOM</b><br><small style="color:#FFFFFF">t&amp;C applies*</small></p></div></div>

  <canvas height="0" width="0" style="border-radius: inherit; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"></canvas></a>

   
</div>

CUSTOM CSS

.offerslider-wrapper {
	margin-top: 1rem;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	margin-bottom: 1rem;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.offerslider-wrapper::-webkit-scrollbar {
	display: none;
}
.offerslider-wrapper__img-wrapper {
	display: inline-block;
}

 
.offerpromo-slider-loader {
	width: 100%;
	margin: 0;
	height: 192px;
}

.outer-seat{
width: 175px;
height: 80px;
border-radius: 9px;
border: 3px solid #F89917;
background: white;
position: relative;
margin: 4px;
}
.inner-seat{
width: 165px;
height: 70px;
border-radius: 4px;
top: 50%;
left: 50%;
margin: -35px 0px 0px -83px;
background: #F89917;
position: absolute;
color:#ffffff;
}
#div-inline{float: left; }
.outer-seat:hover{
border-color: #F89917;
}
#div-inline:hover .inner-seat{
background: #F89917;
}
    6 days later

    Rahul Copy <a class="offerslider............................. </a> and paste it within <div class="offerslider-wrappe .........................</div> for each offer code you need to add

        10 months later
        3 months later
        Write a Reply...