Ready-to-Use Shopify Liquid Snippets, Sections & Custom Features to Build High-Converting Stores Without Coding From Scratch.
Ready to import
Verified buyers
“Join 500+ Indian store owners already using these”
Hand-crafted designs
Download in 60 seconds
Get instant access to a massive collection of professionally written Shopify Liquid code snippets designed to help you build faster, customize smarter, and increase conversions. Every code is clean, responsive, beginner-friendly, and ready to copy & paste into your Shopify store.
Get access to all new Shopify Liquid codes we add in the future — completely free.
Stuck anywhere? Get direct help from our team via WhatsApp. No waiting in queues.
Copy, paste, and customize Shopify Liquid code snippets in minutes. No advanced coding skills required.
Download access activated immediately after payment. No waiting.
Step-by-step guidance included. Perfect for first-time store owners.
Our Shopify Liquid code collection is designed to work across every niche, helping you build faster, customize smarter, and create high-converting Shopify stores.
200+ Codes
180+ Codes
150+ Codes
120+ Codes
160+ Codes
190+ Codes
Save hours of development with professionally written Shopify Liquid snippets that are ready to copy and paste.
Add high-converting sections, sticky carts, trust badges, countdown timers, and more to increase sales.
Every Liquid code is optimized for desktop, tablet, and mobile devices to ensure a seamless shopping experience.
Show your products in the best light with structured, elegant layouts.
Simply copy, paste, and publish. No complex setup or advanced coding knowledge required.
Well-documented code snippets with clear instructions, making implementation simple for beginners and developers alike.
Every Shopify Liquid code in this collection is professionally written, thoroughly tested, and built to help you create faster, customize effortlessly, and boost your store’s performance—without starting from scratch.





<!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>
<!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 .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%);
}
}
</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;
this.totalWidth = (this.cardWidth * this.cards.length) - 10;
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
);
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 = '';
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();
}
);
}
}
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>
<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>
.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;
}
.icon {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 150px;
}
.icon-img {
width: 70px;
height: 70px;
transition: transform 0.3s;
}
.icon-text {
font-size: 16px;
color: #333;
font-weight: bold;
margin: 0;
margin-top: 10px;
}
.icon-img:hover {
transform: scale(1.2);
}
@media screen and (max-width: 768px) {
.icon-container {
padding: 10px;
gap: 10px;
justify-content: space-evenly;
}
.icon {
width: 20%;
max-width: 120px;
margin-bottom: 0;
}
.icon-img {
width: 60px;
height: 60px;
}
.icon-text {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.icon-container {
padding: 5px;
}
.icon {
width: 20%;
margin-bottom: 0;
}
.icon-img {
width: 50px;
height: 50px;
}
.icon-text {
font-size: 12px;
}
}
</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">
<!-- 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>
.product-info {
background-color: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}
.product-info ul {
list-style-type: none;
padding-left: 0;
}
.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;
}
.info-item:hover {
background-color: #2bb9b2;
color: white;
transform: translateY(-5px);
}
.info-item i {
font-size: 22px;
margin-right: 15px;
color: #2bb9b2;
transition: color 0.3s ease;
}
.info-item:hover i {
color: white;
}
.info-item strong {
font-weight: bold;
font-size: 18px;
}
.product-info {
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
}
</style>
Real store designs, not just pretty mockups — engineered to turn browsing visitors into buying customers.
These extra resources are included at zero additional cost.
All bonuses delivered with your main purchase — no extra cost.
Entrepreneurs across India have already launched premium Shopify stores using these Liquid Code— and they’re seeing better results.
Launch custom features like sticky carts, trust badges, FAQs, countdown timers, and more in just a few minutes.
Skip writing repetitive code from scratch. Simply copy, paste, and customize professionally written Shopify Liquid snippets.
Well-structured, optimized, and developer-friendly Liquid code that's easy to understand, edit, and maintain.
Add conversion-focused sections and features that improve customer experience and help increase sales.
Fully compatible with Shopify Online Store 2.0 and optimized for desktop, tablet, and mobile devices.
Complete payment once and immediately receive access to all 1000+ Shopify Liquid Code Bundle. No waiting, no delays — instant digital delivery the moment payment clears.
Browse through 1000+ professionally written Shopify Liquid code snippets and select the feature you want to add to your store.
Simply copy the code, paste it into your Shopify theme, save your changes, and enjoy powerful new features in just a few minutes.
Yes — designed for everyone including complete beginners. No technical knowledge or coding skills needed at all.
Yes, lifetime access to all 1000+ templates plus any future templates added — no renewal or hidden fees ever.
Immediately after payment completes you get instant download access. No waiting — digital delivery straight after checkout.
Yes — download and use the Shopify Liquid Code on any device including mobile phones, tablets, and laptops at any time.
Yes! WhatsApp support is available to help with setup, customization, and any questions after your purchase.
You need a Shopify account — the basic plan works perfectly. These Codes are compatible with all standard Shopify plans.
Use on any device
Desktop or laptop
Never expires
Access Anytime
Get instant access to professionally written Shopify Liquid code snippets that help you build faster, customize smarter, and launch high-converting Shopify stores with ease.