Skip to content

Instantly share code, notes, and snippets.

@ohong

ohong/Example Shopify Liquid Code

Last active June 29, 2025 00:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ohong/09db1b607a0ba85ae5d645851a13771d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ohong/09db1b607a0ba85ae5d645851a13771d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Example Shopify Liquid Code
<!-- Proyecto Diaz Coffee Landing Page - Shopify Liquid Template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }} - Rebuilding Farms, Brewing Legacies</title>
{{ 'base.css' | asset_url | stylesheet_tag }}
<style>
:root {
--primary-brown: #3a2822;
--accent-gold: #d4a574;
--warm-cream: #faf6f2;
--text-dark: #2c1810;
--text-light: #6b5d54;
--success-green: #2d5016;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text-dark);
line-height: 1.6;
background: #ffffff;
}
/* Header Navigation */
.header {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-brown);
text-decoration: none;
letter-spacing: -0.5px;
}
.nav-menu {
display: flex;
gap: 2.5rem;
align-items: center;
list-style: none;
}
.nav-menu a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: color 0.3s ease;
font-size: 0.95rem;
}
.nav-menu a:hover {
color: var(--accent-gold);
}
.nav-actions {
display: flex;
gap: 1.5rem;
align-items: center;
}
.cart-icon {
position: relative;
cursor: pointer;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--accent-gold);
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 12px;
}
/* Hero Section */
.hero {
margin-top: 80px;
height: calc(100vh - 80px);
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, var(--warm-cream) 0%, #ffffff 100%);
}
.hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-text {
z-index: 10;
}
.hero-badge {
display: inline-block;
background: var(--accent-gold);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 30px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1.5rem;
animation: fadeInUp 0.8s ease;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
color: var(--primary-brown);
margin-bottom: 1.5rem;
animation: fadeInUp 0.8s ease 0.2s both;
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 2rem;
line-height: 1.6;
animation: fadeInUp 0.8s ease 0.4s both;
}
.hero-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease 0.6s both;
}
.btn {
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
font-size: 1rem;
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--primary-brown);
color: white;
box-shadow: 0 4px 20px rgba(58, 40, 34, 0.3);
}
.btn-primary:hover {
background: #2a1812;
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(58, 40, 34, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--primary-brown);
border: 2px solid var(--primary-brown);
}
.btn-secondary:hover {
background: var(--primary-brown);
color: white;
}
.hero-image {
position: relative;
height: 600px;
animation: fadeIn 1s ease 0.8s both;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.floating-badge {
position: absolute;
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
animation: float 3s ease-in-out infinite;
}
.floating-badge.top {
top: 20px;
right: -20px;
}
.floating-badge.bottom {
bottom: 40px;
left: -20px;
}
/* Coffee Products Section */
.products-section {
padding: 6rem 2rem;
background: white;
}
.section-header {
text-align: center;
max-width: 800px;
margin: 0 auto 4rem;
}
.section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--primary-brown);
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-light);
line-height: 1.6;
}
.products-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.product-card {
background: var(--warm-cream);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.product-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--accent-gold);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
z-index: 10;
}
.product-image {
height: 300px;
overflow: hidden;
position: relative;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.product-info {
padding: 1.5rem;
}
.product-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-brown);
margin-bottom: 0.5rem;
}
.product-origin {
color: var(--text-light);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.product-description {
color: var(--text-dark);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.product-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-brown);
}
.add-to-cart {
background: var(--primary-brown);
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.add-to-cart:hover {
background: #2a1812;
transform: translateY(-2px);
}
/* Story Section */
.story-section {
padding: 6rem 2rem;
background: linear-gradient(180deg, var(--warm-cream) 0%, white 100%);
}
.story-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.story-image {
position: relative;
height: 500px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.story-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.story-text h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 800;
color: var(--primary-brown);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.story-text p {
color: var(--text-dark);
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.story-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--accent-gold);
display: block;
}
.stat-label {
color: var(--text-light);
font-size: 0.9rem;
font-weight: 500;
}
/* Subscribe Section */
.subscribe-section {
padding: 4rem 2rem;
background: var(--primary-brown);
color: white;
}
.subscribe-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.subscribe-content h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 1rem;
}
.subscribe-form {
display: flex;
gap: 1rem;
margin-top: 2rem;
max-width: 500px;
margin: 2rem auto 0;
}
.subscribe-form input {
flex: 1;
padding: 1rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
}
.subscribe-form button {
background: var(--accent-gold);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.subscribe-form button:hover {
background: #b88d5f;
transform: translateY(-2px);
}
/* Footer */
.footer {
padding: 4rem 2rem 2rem;
background: #1a0f0a;
color: white;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-column h3 {
margin-bottom: 1rem;
color: var(--accent-gold);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 0.75rem;
}
.footer-column a {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column a:hover {
color: var(--accent-gold);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #333;
color: #999;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.nav-menu {
display: none;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-image {
height: 400px;
margin-top: 2rem;
}
.story-content {
grid-template-columns: 1fr;
}
.story-image {
order: -1;
}
.subscribe-form {
flex-direction: column;
}
.floating-badge {
display: none;
}
}
</style>
</head>
<body>
<!-- Header Navigation -->
<header class="header">
<nav class="nav-container">
<a href="/" class="logo">Proyecto Diaz</a>
<ul class="nav-menu">
<li><a href="/collections/all">Shop</a></li>
<li><a href="/pages/subscribe">Subscribe</a></li>
<li><a href="/pages/wholesale">Wholesale</a></li>
<li><a href="/pages/about">Our Story</a></li>
<li><a href="/pages/find-us">Find Us</a></li>
</ul>
<div class="nav-actions">
<a href="/account">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</a>
<div class="cart-icon" onclick="{% if routes.cart_url %}window.location.href='{{ routes.cart_url }}'{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 2L5 7v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-4-5z"></path>
<line x1="9" y1="2" x2="15" y2="2"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
<span class="cart-count">2</span>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="hero-text">
<span class="hero-badge">Hecho en Oakland</span>
<h1 class="hero-title">Rebuilding Farms,<br>Brewing Legacies</h1>
<p class="hero-subtitle">From our family's El Carmen farm to your cup. Every purchase supports sustainable farming and community development in Latin America.</p>
<div class="hero-cta">
<a href="/collections/all" class="btn btn-primary">
Shop Coffee
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
<a href="/pages/subscribe" class="btn btn-secondary">Subscribe & Save</a>
</div>
</div>
<div class="hero-image">
<img src="https://via.placeholder.com/800x600/8B4513/FFFFFF?text=Coffee+Farm" alt="El Carmen Coffee Farm">
<div class="floating-badge top">
<strong>100%</strong><br>
<span style="font-size: 0.875rem; color: var(--text-light);">Direct Trade</span>
</div>
<div class="floating-badge bottom">
<strong>Since 2018</strong><br>
<span style="font-size: 0.875rem; color: var(--text-light);">Family Owned</span>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="products-section">
<div class="section-header">
<h2 class="section-title">Caffeinate with Purpose</h2>
<p class="section-subtitle">Each blend tells a story of resilience, tradition, and exceptional quality from farms we're helping rebuild.</p>
</div>
<div class="products-grid">
<!-- Product 1 -->
<div class="product-card" onclick="window.location.href='/products/el-carmen-blend'">
<span class="product-badge">Bestseller</span>
<div class="product-image">
<img src="https://via.placeholder.com/400x300/D2691E/FFFFFF?text=El+Carmen+Blend" alt="El Carmen Signature Blend">
</div>
<div class="product-info">
<h3 class="product-name">El Carmen Signature Blend</h3>
<p class="product-origin">Guatemala • Medium Roast</p>
<p class="product-description">Our flagship blend with notes of chocolate, caramel, and bright citrus. Grown at 1,500m elevation.</p>
<div class="product-footer">
<span class="product-price">$18.50</span>
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="12345">
<button type="submit" class="add-to-cart">Add to Cart</button>
</form>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card" onclick="window.location.href='/products/oakland-morning'">
<span class="product-badge">New Arrival</span>
<div class="product-image">
<img src="https://via.placeholder.com/400x300/A0522D/FFFFFF?text=Oakland+Morning" alt="Oakland Morning Roast">
</div>
<div class="product-info">
<h3 class="product-name">Oakland Morning Roast</h3>
<p class="product-origin">Colombia • Light Roast</p>
<p class="product-description">Bright and vibrant with floral notes, perfect for starting your Bay Area morning right.</p>
<div class="product-footer">
<span class="product-price">$19.00</span>
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="12346">
<button type="submit" class="add-to-cart">Add to Cart</button>
</form>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card" onclick="window.location.href='/products/heritage-espresso'">
<div class="product-image">
<img src="https://via.placeholder.com/400x300/654321/FFFFFF?text=Heritage+Espresso" alt="Heritage Espresso">
</div>
<div class="product-info">
<h3 class="product-name">Heritage Espresso</h3>
<p class="product-origin">Mexico • Dark Roast</p>
<p class="product-description">Bold and rich with cocoa undertones. Perfect for espresso or strong brew methods.</p>
<div class="product-footer">
<span class="product-price">$17.50</span>
<form action="/cart/add" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="12347">
<button type="submit" class="add-to-cart">Add to Cart</button>
</form>
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 3rem;">
<a href="/collections/all" class="btn btn-primary">View All Coffee</a>
</div>
</section>
<!-- Story Section -->
<section class="story-section">
<div class="story-content">
<div class="story-image">
<img src="https://via.placeholder.com/600x500/8B4513/FFFFFF?text=Our+Story" alt="Our Story">
</div>
<div class="story-text">
<h2>From El Carmen to Your Cup</h2>
<p>Proyecto Diaz began with our family's farm in El Carmen, where generations of coffee farmers cultivated not just beans, but dreams. Today, we're on a mission to rebuild what was lost and create sustainable futures for farming communities.</p>
<p>Every bag of coffee you purchase directly supports farm reconstruction, fair wages, and agricultural education programs. Together, we're brewing more than coffee – we're brewing hope.</p>
<div class="story-stats">
<div class="stat">
<span class="stat-number">12</span>
<span class="stat-label">Partner Farms</span>
</div>
<div class="stat">
<span class="stat-number">$50K+</span>
<span class="stat-label">Invested Back</span>
</div>
<div class="stat">
<span class="stat-number">100%</span>
<span class="stat-label">Traceable</span>
</div>
</div>
<a href="/pages/about" class="btn btn-primary" style="margin-top: 2rem;">Learn Our Story</a>
</div>
</div>
</section>
<!-- Subscribe Section -->
<section class="subscribe-section">
<div class="subscribe-content">
<h2>Never Run Out of Great Coffee</h2>
<p>Subscribe and save 15% on every delivery. Pause or cancel anytime.</p>
<form class="subscribe-form" action="/contact" method="post">
<input type="email" name="contact[email]" placeholder="Enter your email" required>
<button type="submit">Start Subscription</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-column">
<h3>Proyecto Diaz</h3>
<p style="color: #ccc; line-height: 1.6;">Rebuilding farms and legacies, one cup at a time. Hecho en Oakland with love.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="/collections/all">Shop Coffee</a></li>
<li><a href="/pages/subscribe">Subscribe</a></li>
<li><a href="/pages/wholesale">Wholesale</a></li>
<li><a href="/pages/find-us">Find Us</a></li>
</ul>
</div>
<div class="footer-column">
<h3>About</h3>
<ul>
<li><a href="/pages/about">Our Story</a></li>
<li><a href="/pages/social-impact">Social Impact</a></li>
<li><a href="/pages/hecho-en-oakland">Hecho en Oakland</a></li>
<li><a href="/blogs/news">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Connect</h3>
<ul>
<li><a href="mailto:hello@proyectodiazcoffee.com">hello@proyectodiazcoffee.com</a></li>
<li><a href="https://instagram.com/proyectodiaz">Instagram</a></li>
<li><a href="https://facebook.com/proyectodiaz">Facebook</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
</div>
</footer>
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Header scroll effect
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
const header = document.querySelector('.header');
if (currentScroll <= 0) {
header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
} else if (currentScroll > lastScroll) {
header.style.transform = 'translateY(-100%)';
} else {
header.style.transform = 'translateY(0)';
header.style.boxShadow = '0 2px 30px rgba(0,0,0,0.15)';
}
lastScroll = currentScroll;
});
// Add to cart animation
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const form = this.closest('form');
const cartCount = document.querySelector('.cart-count');
// Visual feedback
this.textContent = 'Adding...';
// Submit form
fetch('/cart/add.js', {
method: 'POST',
body: new FormData(form)
})
.then(response => response.json())
.then(data => {
this.textContent = 'Added!';
// Update cart count
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
cartCount.textContent = cart.item_count;
});
setTimeout(() => {
this.textContent = 'Add to Cart';
}, 2000);
})
.catch(error => {
this.textContent = 'Error';
setTimeout(() => {
this.textContent = 'Add to Cart';
}, 2000);
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment