Skip to content

rcereceda/shopify-sections

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Atomic Sections

🇺🇸 English | 🇪🇸 Leer en español

Project website: atomicsections.com

Production-ready Shopify sections designed to improve conversions and enhance your store's design—without installing apps or touching code.


🚀 Live Demo

See all sections in action:

View Demo Store → | Password: shopify

Explore real examples of each section configured for different industries (coffee, fashion, wellness).


🎯 Who Is This For?

✅ Perfect if you:

  • Own a Shopify store and want to improve your design
  • Want professional sections without monthly app fees
  • Prefer done-for-you installation over DIY
  • Need sections that work with any theme

🤔 Maybe not for you if:

  • You need ongoing technical support (free sections are self-service)
  • You want a complete theme (these are individual sections)
  • You need custom features (consider requesting professional installation)

📦 Available Sections

This repository contains 5 free sections as a sample of the Atomic Sections collection:

1. Hero Banner

Full-width hero with image/video backgrounds, parallax effects, and integrated social proof.

Key Benefits:

  • Make a strong first impression
  • Reduce bounce rate with compelling CTAs
  • Build trust with integrated badges/testimonials
  • Works with images or videos

📄 View Code | 📖 Documentation | 🎬 See Demo


2. Trust Badges

Display guarantees, free shipping, support, and quality indicators to increase customer confidence.

Key Benefits:

  • Increase conversions by reducing purchase anxiety
  • Highlight your competitive advantages
  • Professional icons included (no design work needed)
  • Place anywhere: homepage, product pages, checkout

📄 View Code | 📖 Documentation | 🎬 See Demo


3. Featured Products

Showcase your best inventory with hover effects and seamless Shopify integration.

Key Benefits:

  • Highlight bestsellers or new arrivals
  • Second image on hover (increases engagement)
  • Direct integration with your collections
  • No apps needed

📄 View Code | 📖 Documentation | 🎬 See Demo


4. Testimonials

Display customer reviews with photos and star ratings to build social proof.

Key Benefits:

  • Build trust with real customer feedback
  • Increase conversions with social proof
  • Professional design out of the box
  • Easy to update as you get more reviews

📄 View Code | 📖 Documentation | 🎬 See Demo


5. FAQ Accordion

Answer common questions with smooth collapsible sections and SEO-friendly markup.

Key Benefits:

  • Reduce support inquiries
  • Improve SEO with structured data
  • Keep pages clean and scannable
  • 3 icon styles to match your brand

📄 View Code | 📖 Documentation | 🎬 See Demo


🔧 Installation Options

Option A: Professional Installation (Recommended)

Get your sections installed and customized by an expert—completely free during our launch phase.

What's included:

  • Installation in a duplicated theme (zero risk)
  • Basic customization (colors, fonts)
  • Video tutorial showing you how to edit settings
  • Delivery in 24-48 hours

Request Free Installation →


Option B: DIY Installation (For Technical Users)

If you're comfortable editing theme files, you can install the sections yourself.

Requirements:

  • Basic understanding of Shopify theme structure
  • Access to your theme's code editor
  • Ability to troubleshoot if needed

⚠️ Important:

  • No support included for self-installation
  • You're responsible for testing and compatibility
  • Backup your theme before making changes
Click to view DIY installation steps

Step 1: Copy the Section Code

  1. Navigate to the section you want (e.g., sections/trust-badges.liquid)
  2. Copy the entire file content

Step 2: Add to Your Theme

  1. Go to your Shopify Admin
  2. Navigate to Online StoreThemes
  3. Click ActionsEdit code on your active theme
  4. In the Sections folder, click Add a new section
  5. Name it (e.g., trust-badges)
  6. Paste the copied code
  7. Click Save

Step 3: Add to Your Pages

  1. Go to Online StoreThemesCustomize
  2. Navigate to the page where you want the section
  3. Click Add section
  4. Find your section (e.g., "Trust Badges")
  5. Customize the settings
  6. Click Save

Step 4: Test Thoroughly

  • Preview on desktop and mobile
  • Test all interactive elements
  • Verify responsive behavior
  • Check browser console for errors

✨ Why Atomic Sections?

Built for Real Stores

Every section is designed based on experience building Shopify stores for real brands. They solve actual problems without adding app bloat.

No Vendor Lock-In

Open source code means you own it forever. No subscriptions, no apps to maintain, no dependencies.

Performance First

Pure Liquid and CSS means fast loading times and no impact on your store's speed score.


🎨 Customization

All sections are fully customizable through the Shopify theme editor—no coding required.

You can adjust:

  • Layout (columns, spacing, alignment)
  • Colors (background, text, buttons)
  • Typography (sizes, weights)
  • Spacing (padding, margins)
  • Behavior (animations, hover effects)

🔮 Beyond Free Sections

These 5 sections represent the open-source foundation of Atomic Sections.

For more advanced sections, industry-specific packs, or custom development, visit atomicsections.com.


💡 Tips for Best Results

  1. Use high-quality content - Good images and copy make the biggest difference
  2. Match your brand - Customize colors and fonts to fit your store
  3. Test on mobile - Most Shopify traffic comes from mobile devices
  4. Keep it simple - Don't overload pages with too many sections
  5. Use real data - Real testimonials and products perform better than placeholders

📄 License

MIT License - Free to use for personal and commercial projects.


🙋 Questions?

  • For merchants: Visit atomicsections.com to request professional installation
  • For technical users: Check the documentation in /docs or open an issue
  • For custom work: Contact us through atomicsections.com

Made for Shopify merchants who want better conversions without the complexity.

Releases

No releases published

Packages

 
 
 

Contributors

Languages