Humble — Theme
Documentation
Complete guide to installing, configuring, and customizing your Humble Shopify store. Built for speed, beauty, and conversion.
Installing the Theme
Get Humble running on your store in under 5 minutes. Follow these steps in order.
Login to Shopify Admin
Visit your Shopify Admin dashboard and navigate to Online Store → Themes.
Upload the Theme
Click Upload theme and select the Humble .zip file from your computer.
Customize
Once uploaded, click Customize to open the visual Theme Editor and begin setup.
Configure Branding
Upload your Logo and Favicon. Set your store colors, fonts, and contact information.
Add Homepage Sections
Add Hero Banner, Featured Collection, and other sections from the section picker.
Publish Your Store
When ready, click Publish to make Humble your live, active store theme.
Branding
Access all global settings from the Theme Editor by clicking Theme Settings (the gear icon at the bottom-left).
| Setting | Description |
|---|---|
| Favicon | Small image shown on browser tabs. Best size: 32×32px. |
| Logo | Your store's logo image. Displayed in the header. |
| Logo Width | Controls how wide the logo appears. Range: 80–300px. Default: 140px. |
Contact Information
Used automatically in the announcement bar, mobile navigation drawer, and the footer.
| Setting | Description |
|---|---|
| Phone number | Store contact phone, e.g., +1 234 567 8900. |
| Email address | Store contact email, e.g., hello@yourstore.com. |
Colors & Color Schemes
Humble uses Shopify's native Color Scheme Group system — define unlimited named palettes and assign them per-section.
How Color Schemes Work
Go to Theme Settings → Colors
Default scheme is humble-light. Click to edit or Add to create new.
Each section has its own Color Scheme dropdown to apply any palette individually.
Color Roles
Typography
Control fonts, sizes, weights, and line heights globally across the entire store.
| Setting | Description |
|---|---|
| Heading font | Font for all h1–h6 tags. Default: Raleway |
| Body font | Font for paragraphs, labels, UI elements. Default: Arimo |
| Body size | Scales all body text globally. Range: 80%–130%. Default: 100% |
| Body font weight | Thickness of body text. Range: 300–700. Default: 400 |
| Heading font weight | Thickness of headings. Range: 400–900. Default: 700 |
| Heading scale | Scales all heading sizes globally. Range: 80%–150%. Default: 100% |
| Body line height | Spacing between lines of text. Default: 1.6 |
120% gives a bolder editorial look without changing individual heading sizes.
Layout
| Setting | Description |
|---|---|
| Page width | Maximum width of entire site content. Range: 1000–1600px. Default: 1440px |
| Horizontal padding | Space between content and screen edges. Range: 0–200px. Default: 50px |
| Vertical padding | Space added above/below sections. Range: 0–200px. Default: 0px |
| Grid gap | Space between product/image grid columns. Range: 1–4rem. Default: 2rem |
| Spacing scale | Global multiplier for all padding and margin values. Range: 50%–150%. Default: 100% |
Design & Animations
Fine-tune border radius, animations, overlays, buttons, and blog article card styles.
Border Radius
| Size | Range | Default |
|---|---|---|
| Small | 0–1rem | 0.3rem |
| Medium | 0–2rem | 0.5rem |
| Large | 0–3rem | 1rem |
Animations
| Setting | Detail |
|---|---|
| Scroll animations | Fade-in-up on scroll |
| Duration | 100–1000ms |
| Easing | Smooth / Snappy / Ease in-out / Linear |
Overlay (Banners)
| Setting | Detail |
|---|---|
| Overlay color | Default: black |
| Opacity | 0%–90% (Default: 35%) |
Buttons
| Setting | Description |
|---|---|
| Button border radius | None / Small / Medium / Large (pill-shaped) |
| Button vertical padding | Range: 8–24px. Default: 12px |
| Button horizontal padding | Range: 12–40px. Default: 24px |
| Button font weight | Range: 400–800. Default: 600 |
| Fill animation duration | Range: 150–600ms. Default: 500ms |
Article Cards (Blog)
| Setting | Description |
|---|---|
| Article card border radius | None / Small / Medium / Large |
| Article card title size | Range: 16–32px. Default: 18px |
| Article card meta size | Range: 10–18px. Default: 12px |
| Article card excerpt size | Range: 12–20px. Default: 15px |
| Article card image ratio | Adapt / Landscape / Square / Portrait |
| Show article card badge | Shows/hides the category badge chip |
| Read more style | Hide / Plain text / Underline / Button |
Product Cards
These global settings apply to all product cards across the theme, unless overridden by an individual section.
| Setting | Description |
|---|---|
| Enable wishlist | Shows a heart icon on product cards. Customers can save items. |
| Show vendor/collection name | Displays the product's vendor or collection beneath the title. |
| Show product rating | Shows a star rating if a review app provides metafield data. |
| Show quick view button | Adds a "Quick View" button that opens a product modal. |
| Show price | Shows or hides the product price on cards. |
| Show card button | Shows or hides the Add-to-Cart / View Product button. |
| Card button style | Button (full text) or Plus icon (minimal circular icon). |
| Secondary image on hover | Swaps to the product's second image on hover. |
| Variation image switcher | Clicking a color/variant thumbnail updates the main card image. |
| Show variation thumbnails | Displays small clickable color swatches beneath each card. |
| Variation image count | Max swatches shown per card. Range: 2–6 |
| Sale badge style | Primary (filled) or Outline. |
| Wishlist page URL | Link customers to a custom Wishlist page. |
Cart & Commerce
| Setting | Description |
|---|---|
| Free shipping threshold | Set a spending target (e.g., 50 = $50) to show an animated progress bar. Set 0 to hide. |
| Free shipping message | Message shown when threshold is reached. Default: 🎉 You've unlocked free shipping! |
| Show cart note | Displays an "Order special instructions" accordion in the cart. |
| Show tax/shipping message | Shows info about taxes/shipping beneath the cart subtotal. |
| Cross-sell block in cart | Enables a "You may also like" product grid below the cart form. |
Free Shipping Progress Bar — Demo
Accessibility & Performance
Accessibility
| Setting | Description |
|---|---|
| Focus ring style | None / Subtle / Strong (recommended for WCAG 2.1 compliance) |
Performance
| Setting | Description |
|---|---|
| Lazy-load media | Images below the fold load only when scrolled into view — improving initial page load speed. |
Newsletter Popup
| Setting | Description |
|---|---|
| Enable newsletter popup | Turns the email subscription popup on or off globally. |
| Headline / Description | Managed in the Newsletter Popup section in the Theme Editor. |
| Delay timer | Show popup after X seconds of page load. |
| Cookie dismiss | Popup won't re-appear for returning visitors for a set number of days. |
| Integration | Integrates with Shopify Email / Klaviyo via standard Shopify form submission. |
All Available Sections
Sections can be added, removed, and reordered from the Theme Editor.
Header
Persistent navigation bar with logo, mega-menu, mobile drawer, sticky behavior, search bar, cart badge, and account icon.
Announcement Bar
Thin rotating message banner above the header. Multiple message blocks, configurable speed, optional close button, and link support.
Hero Banner
Full-width multimedia banner with desktop/mobile images, background video, headline, subheading, up to 2 CTA buttons, and overlay control.
Featured Collection
Grid of products from any collection. 2–12 products, 3 card styles, responsive 4→2 column grid, with heading and "View all" link.
Best Sellers
Dedicated section for most popular products. Slider or grid layout, configurable product count, custom heading and link.
Our Collections
Visual grid showcasing up to 8 collections. Each block has an image, title, and link. Adjustable columns for desktop and mobile.
Category Slider
Horizontally scrolling category showcase. Circular or card-style thumbnails, drag-to-scroll, arrow navigation, and autoplay.
Image with Text Split
Split layout: large image + text. Choose image left or right, separate mobile image, heading, subheading, body text, and 2 CTAs.
Icon Feature Strip
Horizontal strip of up to 6 icon + text pairs. Communicate USPs (unique selling propositions). Wraps gracefully on mobile.
Shoppable Lookbook
Clickable hotspots on a lifestyle image. Hotspot popup shows product image, title, price, and Add to Cart button.
Rich Text
Editorial copy section with heading, subheading, body text, optional icon, CTA button, and text alignment control.
Testimonials
Unlimited review blocks with star rating, quote, reviewer name, optional product reference, slider layout, and auto-advance.
Featured Blog
Highlights 2–6 recent or curated blog articles. Card style controlled via global Article Cards settings.
Video
Embed YouTube or Vimeo video with custom thumbnail. Auto-play (muted), click-to-play, aspect ratio control, optional text overlay.
Accordion / FAQ
Unlimited expandable FAQ blocks. Animated open/close, single-open or multi-open mode, with color scheme support.
Discount Categories
Advanced tiered discount display organized by category. Multiple discount tiers, collection-linked. Ideal for "Buy more, save more" campaigns.
Privacy Banner
GDPR/CCPA-compliant cookie consent banner with custom message, policy link, Accept/Decline buttons, and cookie-based dismiss.
Custom Liquid
Developer escape hatch — paste any arbitrary HTML, Liquid, or JavaScript into a page.
Product, Collection & Cart Pages
Product Page
Full gallery with thumbnail strip and lightbox zoom. Video + 3D models supported. Sticky Add-to-Cart bar, live stock count, variant switching, product tabs, share buttons, and "You may also like" section.
Collection Page
AJAX-powered filtering with active filter chips, sort-by dropdown, collection banner, product count, configurable products per page, and mobile slide-out filter drawer.
Cart Page
Live quantity controls (+/−), AJAX removes, editable quantities, discount code input (AJAX), subtotal updates, special instructions accordion, cross-sell grid, and tax/shipping message.
Search Results
Keyword search bar, live predictive header search, full results grid with sorting, tabs for Products/Articles/Pages, and "No results" messaging.
Blog & Articles
Clean article card grid, rich text article page, comment submission form, sharing buttons, and back-to-blog navigation link.
Customer Account Pages
Login, Register, Account Overview, Order Details, Address Book, and Reset Password — full suite of account management pages.
Card Styles
Humble provides three distinct card styles selectable per-section.
Classic Card
The default, most versatile card. Square/portrait image, title, vendor, price, variant swatches, Add to Cart, sale badge, wishlist.
Compact Card
Sleek, minimal card for tight grids. Smaller image, title and price only. No extra elements — great for high-density layouts.
Featured Card
Large, editorial-style card. Landscape image ratio with overlaid title and price. Ideal for the first product in a featured section.
Cart Drawer & AJAX
Humble's cart system is built for maximum speed and zero page reloads.
Instant Feedback
When a customer clicks "Add to Cart", the drawer opens immediately. Zero perceived delay.
AJAX Cart
All cart changes (quantity updates, removes) happen without any page reload.
Section Rendering API
Cart drawer updated using Shopify's latest Section Rendering API for maximum reliability.
Free Shipping Bar
Animated progress bar tracks spending towards your configured free shipping threshold.
Discount Codes
Customers can enter and apply discount codes directly in the cart drawer. Code is saved and auto-applied at checkout.
Theme Performance
Humble was built with Lighthouse performance in mind from day one.
Lazy Loading
Non-critical images below the fold load only when scrolled into view.
LCP-First Image
The first visible image always loads eagerly to maximize Largest Contentful Paint score.
Deferred Scripts
All JavaScript files use defer or dynamic loading to prevent render-blocking.
CSS Variables
Global design tokens managed with CSS custom properties, minimizing unused CSS.
AJAX-First Architecture
Cart, filters, and search all avoid full-page reloads, dramatically reducing interaction latency.
Translation & Localization
Humble ships with a complete English locale file. Everything is translatable without touching code.
Go to Online Store → Themes
Click ··· next to your theme → Edit languages
Select language and edit any string directly in Shopify UI
FAQ
Common questions and quick answers to get you unstuck.
My logo isn't showing — what's wrong?
140px).My filters aren't working on the collection page.
The announcement bar is not showing.
How do I set up the free shipping progress bar?
0 (e.g., 50 for $50). The bar will appear in the cart drawer automatically.The discount code input doesn't seem to apply the discount.
How do I add social icons to the footer?
Can I add my own CSS or HTML?
assets/custom.css file for your own CSS overrides.
Social Media
Enter the full URL for each platform. Icons appear automatically in the footer and share widgets.
Facebook
facebook.com/yourpageInstagram
instagram.com/yourprofileX (Twitter)
twitter.com/yourhandlePinterest
pinterest.com/yourprofileYouTube
youtube.com/yourchannelTikTok
tiktok.com/@yourhandleEmail
hello@yourstore.com