A Shopify theme app extension that allows store owners to easily add customizable promotional banners to their storefront.
This app provides a simple way to display promotional messages, announcements, or special offers at the top of your Shopify store. Perfect for showcasing free shipping offers, sales announcements, or important store updates.
- Easy Installation: One-click installation through Shopify App Store
- Customizable Text: Edit banner message through theme customizer
- Color Customization: Change background and text colors to match your brand
- Responsive Design: Automatically adjusts to all screen sizes
- Theme Integration: Seamlessly integrates with any Shopify theme
- No Coding Required: Fully managed through Shopify's theme editor
-
Install the App
- Go to your Shopify admin panel
- Navigate to Apps section
- Install the Promo Banner App
-
Add Banner to Theme
- Go to
Online Store > Themes - Click
Customizeon your active theme - Click
Add section - Look for "Promo Banner" in the Apps section
- Add it to your theme (recommended: at the top)
- Go to
-
Customize Your Banner
- Click on the banner block in the theme editor
- Edit the banner text
- Choose your preferred background color
- Adjust text color if needed
- Save your changes
| Setting | Description | Default |
|---|---|---|
| Banner Text | The promotional message to display | "🎉 Free Shipping on All Orders! 🎉" |
| Background Color | Banner background color | Light Yellow (#fceabb) |
| Text Color | Color of the banner text | Black (#000000) |
promo-banner-app/
├── extensions/
│ └── banner-extension/
│ ├── blocks/
│ │ └── banner.liquid # Banner HTML/CSS template
│ └── shopify.extension.toml # Extension configuration
├── web/ # Backend application files
├── shopify.app.toml # App configuration
├── package.json # Node.js dependencies
└── README.md # This file
- Node.js (LTS version)
- Shopify CLI
- Shopify Partner account
- Development store
-
Clone the Repository
git clone https://github.com/Rakesh161rausahn/promo-banner-app.git cd promo-banner-app -
Install Dependencies
npm install
-
Start Development Server
shopify app dev
-
Deploy to Shopify
shopify app deploy
-
Create App Version
- Follow the CLI prompts to create a new app version
- The extension will be bundled and deployed
- Promotional Campaigns: Announce sales, discounts, or special offers
- Shipping Information: Display free shipping thresholds or delivery updates
- Store Announcements: Share important news or policy changes
- Seasonal Messages: Holiday greetings or seasonal promotions
- Call-to-Actions: Drive traffic to specific pages or products
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Shopify CLI: For app development and deployment
- Liquid: Shopify's templating language
- HTML/CSS: For banner styling and layout
- Node.js: Backend application framework
- Theme App Extension: Integrates directly with Shopify themes
- Block Type:
promo_banner - Target: Section-level integration
- Lightweight: Minimal impact on page load times
- Mobile Optimized: Responsive design for all devices
- SEO Friendly: Semantic HTML structure
- Development Store: https://promobannerapp.myshopify.com
- Backend API: https://shopify-promo-banner-backend-qqlbq64lf.vercel.app
- Backend Repository: https://github.com/Rakesh161rausahn/shopify-promo-banner-backend
For support, feature requests, or bug reports:
- Check the Shopify Partner Dashboard
- Review Shopify's theme extension documentation
- Contact the app developer through Shopify
This project is licensed under the MIT License - see the LICENSE file for details.
- Deployed to production store: promobannerapp.myshopify.com
- Backend API integrated with Vercel deployment
- Banner displays "🎉 Free Shipping on All Orders! 🎉"
- Full theme integration completed
- Color and text customization available
- Shopify for the excellent CLI tools and documentation
- The Shopify developer community for best practices and examples
Made with ❤️ for Shopify merchants
For more information about Shopify app development, visit Shopify Developer Documentation.