Creating a Sticker Ordering Website
Building a Website to Order Custom Stickers with Airtable Integration
Introduction
- Created a website for ordering custom stickers
- Utilized Airtable for sticker listings and order submission
- Inspired by using Mid-Journey for sticker generation
- Generated 20 stickers with Studio Ghibli theme
- Utilized Figma to remove backgrounds and prepare stickers
- Built website using Arrow Page and synced with Airtable
Process Overview
- Generated stickers using Mid-Journey
- Used Figma to remove backgrounds and prepare stickers
- Exported stickers and organized them in Airtable
- Built website using Arrow Page and synced with Airtable
- Aligned branding with logo, colors, and fonts
- Optimized website for different screen sizes
Sticker Preparation
- Used Mid-Journey to generate stickers with Studio Ghibli theme
- Removed backgrounds using Figma plugin called Background Remover
- Organized stickers on a single sheet using Figma
- Utilized an image cutter plugin in Figma to create individual sticker images
- Renamed and prepared images for exporting and import to Airtable
- Designed the hero image and logo using Figma
Website Development
- Created a new table in Airtable for the stickers
- Built the website using Arrow Page builder with Airtable integration
- Synchronized the stickers as a data source
- Customized branding with logo, colors, and fonts
- Designed and implemented the hero section of the website
- Created dynamic pages for individual sticker display
Order Form Integration
- Configured an order form using Arrow Page builder
- Created fields for customers to fill in their information
- Set up a new table in Airtable to collect order details
- Connected the order form to submit data to Airtable
- Customized the layout and design of the order form
- Implemented conditional editing for mobile responsiveness