- Support: [email protected]
- Free install (1 site)
Description
- turn featured image on Store Page to Carousel on Mobile
#1. Install Code
First, hover on Store Page > Click Gear icon
Next, click Advanced > Page Header Code Injection
Paste this code
Note: It will take 3-5s for Carousel to appear.
<!-- @tuanphan Product Image Carousel - Mobile Only -->
<style>
:root {
--carousel-arrow-bg: rgba(255, 255, 255, 0.9);
--carousel-arrow-bg-hover: rgba(255, 255, 255, 1);
--carousel-arrow-size: 30px;
--carousel-arrow-spacing: 5px;
--carousel-transition-duration: 0.4s;
--carousel-arrow-scale-hover: 1.1;
--carousel-arrow-stroke-color: #000;
--carousel-arrow-stroke-width: 1.5;
}
</style>
<link rel="stylesheet" href="https://code.beaverhero.com/store/productimgcarousel.css"/>
<script src="https://code.beaverhero.com/store/productimgcarouselmb.js"></script>
#2. Usage
Make sure you added Images here
If Product has 1 image only, code will make it as static image, no carousel, like this.
If Product has multiple images, like this.
Code will turn to Carousel format
#3. Customize
All style options here (Line 04 to Line 11)
If you have any questions, you can email me (or message me on Forum).