

rated 4.89/5 based on 1350+ Reviews


















HAND
CRAFTED
PREMIUM QUALITY
EASY RETURN
CELEB APPROVED
FREE SHIPPING
Safe payment on our website








<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Slider</title>
<style>
.user-info;















<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Slider</title>
<style>
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.user-avatar {
width: 40px;
height: 40px;
background-color: #f05454;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
}
.user-details {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: bold;
color: #13152f;
font-size: 15px;
display: flex;
align-items: center;
gap: 5px;
line-height: 22px;
}
.reviewing {
font-size: 13px;
line-height: 20px;
}
.rating-inline {
font-size: 16px;
color: #f7d131;
}
.verified-badge {
color: #42a5f5;
font-size: 10px;
display: flex;
align-items: center;
gap: 4px;
font-weight: 600;
line-height: 14px;
}
.verified-badge img {
width: 13px;
height: 13px;
}
.product-review {
display: flex;
gap: 10px;
align-items: center;
}
.product-image {
width: 40px;
height: 40px;
object-fit: cover;
border: 2px dashed #e0e0e0;
border-radius: 5px;
}
.rating {
font-size: 24px;
color: #f7d131;
margin-top: 10px;
}
.description {
font-size: 13px;
color: #555;
text-align: left;
line-height: 22px;
}
#v2-slider-container {
overflow: hidden;
position: relative;
padding: 20px 5px;
max-width: 1500px;
margin-right: auto;
margin-left: auto;
}
#v2-slider {
display: flex;
transition: transform 0.5s ease-in-out;
animation: unique-scroll-text 8s linear infinite;
}
.v2-slider-card {
flex: 0 0 80%;
max-width: 300px;
height: 180px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
gap: 10px;
transition: transform 0.3s ease;
justify-content: space-around;
margin-right: 10px;
}
.v2-slider-card:hover {
transform: translateY(-5px);
}
#v2-pagination {
display: flex;
justify-content: center;
margin-top: 10px;
}
.v2-pagination-dot {
width: 18px;
height: 6px;
background-color: #0d437d29;
cursor: pointer;
}
.v2-pagination-dot.active {
background-color: #f05454;
width: 22px;
border-radius: 5px;
}
@keyframes unique-scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media (max-width: 450px) {
@keyframes unique-scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-560%);
}
}
}
</style>
</head>
<body>
<div id="v2-slider-container">
<div id="v2-slider">
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/05_20.webp?v=1742357721" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 1</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/01_2.webp?v=1742357721" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 2</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/05_23.webp?v=1742357721" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 3</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/WhatsAppImage2025-02-28at10.53.37_1.jpg?v=1742381512" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 4</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/6273917514387930801_1.webp?v=1742381512" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 5</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/6303076253518906275.webp?v=1742381511" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 6</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/photo_2024-07-17_12-59-29.webp?v=1742381511" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 7</div>
</div>
<div class="v2-slider-card">
<div class="user-info">
<div class="user-avatar">JH</div>
<div class="user-details">
<div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
<div class="verified-badge">
Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
</div>
</div>
</div>
<div class="product-review">
<img class="product-image" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/1876880320_-1899831991_9eb5f7f6e8e55_512.jpg?v=1742381512" alt="Product">
<div class="reviewing">Reviewing <br> <strong>Product name goes here</strong>
</div>
</div>
<div class="description">Review goes here for product name goes here 8</div>
</div>
</div>
<div id="v2-pagination"></div>
</div>
<script>
class ResponsiveSlider {
constructor(containerId, sliderId, paginationId) {
this.container = document.getElementById(containerId);
this.slider = document.getElementById(sliderId);
this.pagination = document.getElementById(paginationId);
this.cards = Array.from(this.slider.children);
this.cardWidth = this.cards[0].offsetWidth + 10; // Includes margin
this.totalWidth = this.cardWidth * this.cards.length - 10; // Adjust total width
this.containerWidth = this.slider.parentElement.offsetWidth;
this.currentIndex = 0;
this.isDragging = false;
this.startX = 0;
this.currentTranslate = 0;
this.prevTranslate = 0;
this.animationID = null;
this.init();
}
init() {
this.createPagination();
this.addEventListeners();
this.startAutoplay();
}
updatePagination() {
this.pagination.querySelectorAll('.v2-pagination-dot').forEach((dot, index) => {
dot.classList.toggle('active', index === this.currentIndex);
});
}
goToSlide(index) {
this.currentIndex = index;
const maxOffset = Math.max(this.totalWidth - this.containerWidth, 0); // Prevent gaps
const offset = Math.min(this.currentIndex * this.cardWidth, maxOffset);
this.slider.style.transition = 'transform 0.5s ease';
this.slider.style.transform = `translateX(-${offset}px)`;
this.currentTranslate = -offset;
this.prevTranslate = this.currentTranslate;
this.updatePagination();
}
createPagination() {
const totalSlides = this.cards.length;
this.pagination.innerHTML = '';
for (let i = 0; i < totalSlides; i++) {
const dot = document.createElement('div');
dot.classList.add('v2-pagination-dot');
dot.innerHTML = ''; // Add zero-width space to prevent being treated as empty
if (i === 0) dot.classList.add('active');
dot.addEventListener('click', () => this.goToSlide(i));
this.pagination.appendChild(dot);
}
}
autoplay() {
this.currentIndex = (this.currentIndex + 1) % this.cards.length;
this.goToSlide(this.currentIndex);
}
startAutoplay() {
setInterval(() => this.autoplay(), 3000);
}
startDrag(event) {
this.isDragging = true;
this.startX = this.getPositionX(event);
this.slider.style.transition = 'none';
cancelAnimationFrame(this.animationID);
}
endDrag() {
this.isDragging = false;
const movedBy = this.currentTranslate - this.prevTranslate;
if (movedBy < -50 && this.currentIndex < this.cards.length - 1) {
this.currentIndex++;
}
if (movedBy > 50 && this.currentIndex > 0) {
this.currentIndex--;
}
this.goToSlide(this.currentIndex);
}
drag(event) {
if (this.isDragging) {
const currentPosition = this.getPositionX(event);
this.currentTranslate = this.prevTranslate + currentPosition - this.startX;
this.slider.style.transform = `translateX(${this.currentTranslate}px)`;
}
}
getPositionX(event) {
return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}
addEventListeners() {
this.slider.addEventListener('mousedown', (e) => this.startDrag(e));
this.slider.addEventListener('touchstart', (e) => this.startDrag(e), {passive: true});
this.slider.addEventListener('mouseup', () => this.endDrag());
this.slider.addEventListener('touchend', () => this.endDrag());
this.slider.addEventListener('mousemove', (e) => this.drag(e));
this.slider.addEventListener('touchmove', (e) => this.drag(e), {passive: true});
window.addEventListener('resize', () => {
this.slider.style.transform = 'translateX(0)';
this.currentIndex = 0;
this.updatePagination();
});
}
}
// Initialize slider
new ResponsiveSlider('v2-slider-container', 'v2-slider', 'v2-pagination');
</script>
</body>
</html>
<div class="icon-container">
<!-- Handcrafted Icon -->
<div class="icon">
<img src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1_2.png?v=1737524413" alt="Handcrafted" class="icon-img">
<p class="icon-text">HAND<br>CRAFTED</p>
</div>HAND
CRAFTED
PREMIUM QUALITY
EASY RETURN
CELEB APPROVED
FREE SHIPPING
<div class="icon-container">
<!-- Handcrafted Icon -->
<div class="icon">
<img src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1_2.png?v=1737524413" alt="Handcrafted" class="icon-img">
<p class="icon-text">HAND<br>CRAFTED</p>
</div>
<!-- Premium Quality Icon -->
<div class="icon">
<img src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/2_2.png?v=1737524413" alt="Premium Quality" class="icon-img">
<p class="icon-text">PREMIUM QUALITY</p>
</div>
<!-- Easy Return Icon -->
<div class="icon">
<img src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/4.png?v=1737524413" alt="Easy Return" class="icon-img">
<p class="icon-text">EASY RETURN</p>
</div>
<!-- Celeb Approved Icon -->
<div class="icon">
<img src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/3.png?v=1737524413" alt="Celeb Approved" class="icon-img">
<p class="icon-text">CELEB APPROVED</p>
</div>
<!-- Free Shipping Icon -->
<div class="icon">
<img src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/5.png?v=1737524412" alt="Free Shipping" class="icon-img">
<p class="icon-text">FREE SHIPPING</p>
</div>
</div>
<style>
/* Basic styles for the container */
.icon-container {
display: flex;
justify-content: space-around;
align-items: center;
background: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
gap: 20px;
flex-wrap: nowrap; /* Keep icons in one row by default */
}
/* Individual icon styles */
.icon {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 150px;
}
/* Image hover effect */
.icon-img {
width: 70px;
height: 70px;
transition: transform 0.3s;
}
/* Text styling */
.icon-text {
font-size: 16px;
color: #333;
font-weight: bold;
margin: 0;
margin-top: 10px;
}
/* Hover effect for images */
.icon-img:hover {
transform: scale(1.2);
}
/* Responsive Design for mobile and tablet screens */
@media screen and (max-width: 768px) {
.icon-container {
padding: 10px; /* Reduce padding to save space */
gap: 10px; /* Reduce space between icons */
justify-content: space-evenly; /* Evenly space icons on mobile */
}
.icon {
width: 20%; /* Each icon takes up 20% of the container width */
max-width: 120px; /* Limit maximum size of each icon */
margin-bottom: 0; /* Remove any bottom margin */
}
.icon-img {
width: 60px; /* Slightly smaller images for mobile */
height: 60px;
}
.icon-text {
font-size: 14px; /* Adjust text size for mobile */
}
}
/* Responsive Design for very small mobile screens */
@media screen and (max-width: 480px) {
.icon-container {
padding: 5px; /* Further reduce padding for very small screens */
}
.icon {
width: 20%; /* Maintain the 20% width for each icon */
margin-bottom: 0; /* No bottom margin */
}
.icon-img {
width: 50px; /* Even smaller images for very small screens */
height: 50px;
}
.icon-text {
font-size: 12px; /* Smaller text size for small screens */
}
}
</style>
<!-- Include Font Awesome for Icons -->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<div class="product-info">
<ul><!-- Include Font Awesome for Icons -->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<div class="product-info">
<ul>
<li class="info-item">
<i class="fas fa-truck"></i> <strong>Get it in 3-4 Days</strong> - Usually ships within a day
</li>
<li class="info-item">
<i class="fas fa-sync-alt"></i> <strong>7 Days Exchange</strong> - Exchange within 7 days
</li>
<li class="info-item">
<i class="fas fa-money-bill-wave"></i> <strong>Cash on Delivery</strong> - Available on eligible orders
</li>
</ul>
</div>
<style>
/* Container Styling */
.product-info {
background-color: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}
/* Styling for the List */
.product-info ul {
list-style-type: none;
padding-left: 0;
}
/* Styling for Each List Item */
.info-item {
font-size: 16px;
margin-bottom: 15px;
color: #333;
display: flex;
align-items: center;
transition: transform 0.3s ease, background-color 0.3s ease;
padding: 10px;
border-radius: 8px;
background-color: #f9f9f9;
}
/* Hover Effect for Each List Item */
.info-item:hover {
background-color: #2bb9b2; /* Theme color */
color: white;
transform: translateY(-5px);
}
/* Styling for Icons */
.info-item i {
font-size: 22px;
margin-right: 15px;
color: #2bb9b2; /* Theme color for icons */
transition: color 0.3s ease;
}
/* Change Icon Color on Hover */
.info-item:hover i {
color: white;
}
/* Styling for Strong Text */
.info-item strong {
font-weight: bold;
font-size: 18px;
}
/* Add a subtle shadow to the container for better contrast */
.product-info {
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
}
</style>














HAND
CRAFTED
PREMIUM QUALITY
EASY RETURN
CELEB APPROVED
FREE SHIPPING
Ordered
Order Ready
Delivered
Safe payment on our website








Lifetime Guarantee
Highest Quality
Material
TSA & EU Airline
Approved







Shopify liquid codes are small pieces of customizable code that help improve your Shopify store’s functionality. With our ready-made codes, you can easily add features like product filters, dynamic pricing, or unique design elements—without needing advanced coding skills. Simply copy, paste, and add the code to your Shopify theme to enhance your store experience.
No, you don’t need coding knowledge. Just copy and paste the code. Even beginners can use it easily.
YES! Our Shopify liquid codes are tested on many different themes to make sure they work smoothly. Whether you’re using a free or a premium Shopify theme, our codes are designed to fit in easily without any issues.
We have also provided a step-by-step guide video. You can watch it to understand exactly where and how to paste the codes.
After payment, you’ll instantly receive a Google Drive link where you will find all your 250+ Shopify Liquid Codes bundle and FREE GIFTS.
Yes, you can use these codes for unlimited stores and client projects. Perfect for Freelancers and Agencies.
There are total 500+ Liquid Codes included in this bundle.
We also regularly update and add new codes in the bundle, every week!
YES. You will receive all the FREE GIFTS.
YES, its a one time payment. LIFETIME ACCESS!
You can contact us on our official Whatsapp number +91 92342 20213