Image changer with texts (css/html)

// Requires basic knowledge of html/css editing


How to add it to your shop landing page


Select and copy the code below:

<style>
/* THIS IS THE GRAY BORDER BOX */
#livebox {
display: flex;
width: fit-content;
height: auto;
margin: 3rem auto;
background-color: #efefef;
border: 5px solid #efefef;
border-radius: 25px;
position: relative;
flex-wrap: wrap;
overflow: hidden;
}
/* THIS IS THE TOP BUTTON (also controls parts of the 2nd button) */
a.buttonX {
height: 40px;
width: auto;
margin-top: 4rem;
margin-bottom: 0;
background-color: #121212;
color: white;
font-weight: 700;
padding: 25px;
text-decoration: none;
border-radius: 10px;
border: 2px solid black;
align-items: center;
justify-content: center;
display: flex;
}
a.buttonX:hover {
background-color: white;
color: black;
border-color: black;
align-items: center;
}
/* THIS IS THE 2nd BUTTON */
a.buttonX.cta {
margin-top: -.8rem;
background-color: green;
color: white;
border: 2px solid green;
}
a.buttonX.cta:hover {
background-color: white;
color: green;
border-color: green;
align-items: center;
}
/* THIS IS THE IMAGE BOX */
.chgr1 {
width: 600px;
height: 600px;
background-size: cover;
background-position: center center;
/* SETS THE SPEED OF THE ANIMATION IN SECONDS - MUST HAVE SAME SPEED AS TEXT CHANGER */
animation:  chgr1 40s infinite ease-in-out;
border-radius: 20px 0 0 20px;
}
/* BELOW IS WHERE YOU SWAP THE IMAGES — BELOW IS WHERE YOU SWAP THE IMAGES */
@keyframes chgr1 {
0% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat6.jpg'); /* IMG 1 */
}
25% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat5.jpg'); /* IMG 2 */
}
50% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat7.jpg'); /* IMG 3 */
}
75% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat8.jpg'); /* IMG 4 */
}
100% {
background-image: url('	https://cdn.mysharefox.com/styledemo5/uploads/documents/cat6.jpg'); /* IMG 1 repeat for smooth transition */
}
}
/* ABOVE IS WHERE YOU SWAP THE IMAGES — ABOVE IS WHERE YOU SWAP THE IMAGES */
/* BELOW IS THE TEXT BOX */
.chgr2 {
width: auto;
height: auto;
}
.text-rotator {
  position: relative;
  width: 500px;
  height: 1em;
  margin-top: 20%;
  margin-left: 4rem;
  margin-right: 4rem;
}
/* 
THE "ITEMS" ARE THE DIVS CONTAINING EACH OF THE TEXTS 
*/
.item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
/* SETS THE SPEED OF THE ANIMATION IN SECONDS - MUST HAVE SAME SPEED AS IMAGE CHANGER */
  animation: rotateText 40s infinite;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  pointer-events: none;
}
.item h1 {
text-transform: uppercase;
}
/* 
BELOW SETS THE DELAY FOR EACH OF THE TEXT ITEMS
*/
.item:nth-child(1) {
  animation-delay: 0s;
}
.item:nth-child(2) {
  animation-delay: 8s;
}
.item:nth-child(3) {
  animation-delay: 17s;
}
.item:nth-child(4) {
  animation-delay: 26s;
}
.item:nth-child(5) {
  animation-delay: 37s;
}
/* 
!!!!!!!!!! YOU PROBABLY SHOULD NOT MESS WITH THIS !!!!!!!!!!
*/
@keyframes rotateText {
  0%   { opacity: 0;}
  1%   {opacity: 1; pointer-events: auto;}
  15%  {opacity: 1; pointer-events: auto;}
  20%  { opacity: 0;} 
  32%  { opacity: 0; pointer-events: none;} 
  100% { opacity: 0;}
}
/* 
THE BELOW CODE MAKES IT RESPONSIVE AND LOOKING NICE ON TABLETS AND MOBILE 
*/
@media only screen and (max-width: 1250px) {
#livebox {
width: 100%;
height: fit-content;
}
.chgr2 {
width: 50%;
min-height: 40vh;
}
.chgr1 {
width: 50%;
min-height: 40vh;
border-radius: 20px 0 0 20px;
}
.text-rotator {
  position: relative;
  width: auto;
  margin-top: 15%;
  margin-left: 2rem;
  margin-right: 2rem;
}
a.buttonX {
height: 40px;
width: auto;
margin-top: 2rem;
margin-bottom: 20px;
}
a.buttonX.cta {
height: 40px;
width: auto;
margin-top: -1.4rem;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 769px) {
#livebox {
width: 100%;
height: fit-content;
}
.chgr2 {
width: 100%;
min-height: 460px;
}
.chgr1 {
width: 100%;
min-height: 40vh;
border-radius: 20px 20px 0 0;
}
.text-rotator {
  position: relative;
  width: auto;
  margin-top: 10%;
  margin-left: 4rem;
  margin-right: 4rem;
}
.item h1 {
font-size: 1.9rem;
line-height: 2.1rem;
margin-bottom: 20px;
}
a.buttonX {
height: 40px;
width: auto;
margin-top: 2rem;
margin-bottom: 0;
}
a.buttonX.cta {
height: 40px;
width: auto;
margin-top: -.8rem;
margin-bottom: 20px;
}
}
</style>
/* 
THIS IS WHERE YOU EDIT THE TEXTS AND BUTTONS — H1=TITLE, P=TEXT, A=BUTTON (URL & TEXT)
*/
<div id="livebox">
<div class="chgr1">&nbsp;</div>
<div class="chgr2">
<div class="text-rotator">
<!-- ———————————————————————————————ITEM 1——————————————————————————————— -->
<div class="item 1">
<h1>This is the number one</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed volutpat eros, non imperdiet nisl. Sed luctus, mi finibus cursus varius, dui eros blandit neque, non condimentum ex orci et felis. Integer sed mattis felis. Sed at risus quis orci volutpat tempor. Fusce vel vehicula dui. Fusce ac lectus non leo molestie molestie. Aliquam purus nunc, mattis ac dapibus vitae, sodales non metus.</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ———————————————————————————————ITEM 2——————————————————————————————— -->
<div class="item 2">
<h1>This is the number two</h1>
<p>Mauris eget libero eget erat commodo cursus. Proin sed est id velit condimentum vulputate at et orci. Vestibulum facilisis posuere scelerisque. Aenean accumsan elit et augue aliquet consequat. Sed facilisis maximus ex sed efficitur. Suspendisse sit amet ante quis orci venenatis blandit eu a lectus. Nulla ac euismod metus.<br />&nbsp;</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ———————————————————————————————ITEM 3——————————————————————————————— -->
<div class="item 3">
<h1>This is the number three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed volutpat eros, non imperdiet nisl. Sed luctus, mi finibus cursus varius, dui eros blandit neque, non condimentum ex orci et felis. Integer sed mattis felis. Sed at risus quis orci volutpat tempor. Fusce vel vehicula dui. Fusce ac lectus non leo molestie molestie. Aliquam purus nunc, mattis ac dapibus vitae, sodales non metus.</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ———————————————————————————————ITEM 4——————————————————————————————— -->
<div class="item 4">
<h1>This is the number four</h1>
<p>Mauris eget libero eget erat commodo cursus. Proin sed est id velit condimentum vulputate at et orci. Vestibulum facilisis posuere scelerisque. Aenean accumsan elit et augue aliquet consequat. Sed facilisis maximus ex sed efficitur. Suspendisse sit amet ante quis orci venenatis blandit eu a lectus. Nulla ac euismod metus.<br />&nbsp;</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
<!-- ————————————————————————————ITEM 1 repeat———————————————————————————— -->
<div class="item 1">
<h1>This is the number one</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed volutpat eros, non imperdiet nisl. Sed luctus, mi finibus cursus varius, dui eros blandit neque, non condimentum ex orci et felis. Integer sed mattis felis. Sed at risus quis orci volutpat tempor. Fusce vel vehicula dui. Fusce ac lectus non leo molestie molestie. Aliquam purus nunc, mattis ac dapibus vitae, sodales non metus.</p>
<p>&nbsp;</p>
<a class="buttonX" href="https://sharefox.com">Button 1</a> 
<a class="buttonX cta" href="https://sharefox.com">Button 2</a></div>
</div>
</div>
</div>

Go to "Admin" > "Settings" > "Template" and choose one of the 3 "Custom Code" options, depending on where on your page you want to place it.

Click on the "Source code" icon to the right

In the html window that opens, paste the code you just copied

Click "Ok"

Optional: Publish and check that it is now showing in your shop (refresh the landing page)


Customize images, colors, text etc.

Open the html editor again, and edit the elements you want to change. The code also shows instructions that will help you.

In this example the images have been uploaded to "Admin" > "Settings" > "Media", but you can also use images that live elsewhere, like a product image or images from your main website.

Make sure you have the appropriate rights/license to use the images.


Remember to publish your changes to be able to check them on your landing page.



Some tips

  • Use same size images.
  • Use texts of similar length.
  • If you know what you are doing you can add/remove images and texts. If you have no idea what keyframes or children do, stick with the default 4 images/texts, or ask support to help you.

Still need help? Contact Us Contact Us