Shopify Design Print Website

Upwork Brief — Custom Shopify Theme for Overlay9 Native Shopify Theme from Figma Designs and Classified Asset Database Project summary We are looking for an experienced Shopify theme developer to build a custom native Shopify Online Store 2.0 theme for Overlay9. This is not a headless storefront and not a React storefront. The final deliverable must be a proper Shopify theme using Liquid, JSON templates, Shopify sections, snippets, CSS, and lightweight JavaScript only where needed. We will provide: * Figma links for the main storefront designs, including Homepage, PLP, PDP, cart, search, and other key pages. * Access to our existing classified database that contains the available designs, images, graphics, categories, metadata, and related product information. * Existing Shopify store access. * Brand guidelines, copy, and product/data structure. * Reference material from the current implementation, where needed. The goal is to convert the provided Figma storefront designs into a production-ready Shopify custom theme and connect the correct product/design data from our classified database into Shopify products, collections, metafields, metaobjects, and storefront templates. --- Live reference Current reference / preview: https://overlay9-designs-elevated.lovable.app Shopify store: overlay9.myshopify.com The current reference is useful for understanding the concept, user flow, and visual direction, but the new implementation must be a native Shopify Online Store 2.0 theme. --- Core concept Overlay9 is not a standard fashion catalog. The customer browses designs / graphics first. The design is the main product experience. After choosing a design, the customer can select the garment type, color, size, and print side. The product model must support: 1. Designs / graphics as the main browsable catalog. 2. Garments such as t-shirts, hoodies, long sleeves, etc. 3. Colors, sizes, prices, and garment mockup images. 4. Design metadata, categories, tags, descriptions, and search data. 5. Product detail pages where the customer can select garment options and see the correct visual preview. 6. Cart and checkout line items that clearly show the selected design, garment, color, size, side, and related image/mockup. --- Design source — Figma We will provide Figma links for the storefront UI/UX. The Figma designs will include the key screens and layouts, such as: 1. Homepage 2. Product listing page / PLP 3. Product detail page / PDP 4. Collection pages 5. Search page / search overlay 6. Cart drawer 7. Cart page 8. Navigation / header 9. Footer 10. CMS / content pages where needed The developer must convert these Figma designs into native Shopify theme templates and sections. The Figma files are the visual and UX source of truth for the storefront pages. The implementation must match the visual language, spacing, responsive behavior, typography, and overall experience of the Figma designs as closely as possible. The developer may use Claude or other AI-assisted development tools to speed up the conversion from Figma layouts into Shopify-ready theme mockups, Liquid sections, CSS, and JavaScript components. However, the final deliverable must be clean, maintainable, production-ready Shopify theme code. --- Data source — classified asset database The product graphics, design images, categories, metadata, and related assets already exist in a classified database. We will provide access to this database. The developer must: 1. Review the classified database structure. 2. Understand how designs, images, categories, tags, garments, colors, sizes, prices, and metadata are stored. 3. Map this data into the correct Shopify architecture. 4. Create or update Shopify products, variants, collections, metafields, and metaobjects. 5. Ensure the Shopify storefront uses this data correctly. 6. Provide an idempotent migration/import script that can be safely re-run. 7. Document the data mapping clearly. The classified database is the data source. Figma is the visual design source. --- Recommended Shopify data architecture We are open to the developer’s recommendation, but the Shopify structure should support a design-first shopping experience. Possible approaches: 1. One Shopify product per design, with variants or metafields representing purchasable garment/color/size combinations. 2. One Shopify product per design and garment combination, with color and size as variants. 3. A hybrid structure using Shopify products for designs and metaobjects/metafields for garment definitions, blank mockups, placement data, and extra metadata. The developer must recommend the best architecture and explain why. The architecture must support: * Design-first browsing * Collections by design family/category/tag * Product filtering * SEO-friendly product pages * Shopify-native cart and checkout * Shopify admin order visibility * Scalable product/data management * Future product imports from the classified database --- Scope of work 1. Shopify data architecture The developer must design and implement the correct Shopify data model. This includes: * Shopify products * Variants * Collections * Metafields * Metaobjects * Product images * Garment definitions * Design metadata * Category/family mapping * Search-related data * Line item properties where needed The developer must provide a documented schema explaining how the classified database maps into Shopify. --- 2. Migration / import script The developer must create a migration/import script, preferably in Node.js / TypeScript. The script must: 1. Read data from the classified database or exported data source. 2. Create or update Shopify products. 3. Create or update variants. 4. Create or update collections. 5. Create or update metafields and metaobjects. 6. Upload or connect product/design images where needed. 7. Be idempotent and safe to re-run. 8. Produce clear logs for created, updated, skipped, and failed records. 9. Support a dry-run mode before production import. The script should use Shopify Admin GraphQL API. --- 3. Custom Shopify theme The developer must build a custom Shopify Online Store 2.0 theme. The theme must be built as a native Shopify theme, not a headless app. Deliverables include: * Liquid templates * JSON templates * Shopify sections * Snippets * Theme settings * CSS * Lightweight JavaScript * Theme editor support * Responsive layout * Mobile-first implementation The theme should not be a full React SPA. Interactive parts should use vanilla JavaScript or a small lightweight island only where required. --- 4. Homepage The homepage must be built based on the provided Figma design. It should include editable Shopify sections such as: * Hero section * Announcement bar * Featured designs * Featured collections * Design/category grid * Editorial/content blocks * Call-to-action sections * Image/text sections * Footer * Any other sections included in the Figma design The homepage must be editable from the Shopify Theme Editor. --- 5. Product listing page / PLP The PLP must be built based on the provided Figma design. It must support: * Design-first listing * Collection/category pages * Filtering * Sorting * Responsive product/design cards * Hover states where needed * Pagination or load-more functionality * Mobile-friendly filters * SEO-friendly collection content Filters may include: * Family/category * Garment type * Color * Tags * Other metadata available from the database --- 6. Product detail page / PDP The PDP must be built based on the provided Figma design. The PDP should allow the customer to: 1. View the selected design. 2. Choose garment type. 3. Choose color. 4. Choose size. 5. Choose print side, such as front or back, if supported. 6. See the correct preview/mockup. 7. Add the final selection to cart. The PDP must carry the correct selected information into the cart as Shopify line item properties or variant data. The cart/order data should include: * Design ID or design reference * Design title * Garment type * Color * Size * Print side * Mockup/image reference where applicable * Any other required production metadata --- 7. Mockup / image preview logic The product experience should show the customer a clear visual preview of the selected design and garment. Depending on the final data structure and available assets, this may be implemented using: * Existing mockup images from the classified database * Product/design image combinations * Lightweight client-side preview logic * Shopify metafields/metaobjects for image and placement data If a live compositor is required, the developer must implement it as lightweight storefront JavaScript, not as a heavy SPA. The mockup/preview must work smoothly on desktop and mobile. --- 8. Cart drawer and cart page The cart drawer and cart page must be built based on the provided Figma design. They must show: * Product/design image or mockup * Design title * Garment type * Color * Size * Print side, if applicable * Quantity * Price * Remove/update quantity controls * Checkout button The cart experience must remain Shopify-native. --- 9. Checkout compatibility The checkout will use standard Shopify checkout. The developer must ensure that the required product selection data appears correctly in: * Shopify cart * Shopify checkout * Shopify admin order details * Customer order emails where possible * Order exports / production workflow where needed Any limitations around Shopify checkout thumbnails, line item images, or line item properties must be clearly explained before implementation. --- 10. Search The storefront must support search for designs/products. Search should be design-first and should support Greek and English where possible. Requirements: * Shopify predictive search where appropriate * Search page or overlay based on Figma * Accent-insensitive Greek search if possible * Synonym support if available from the data * Search query logging if required If search query logging is required, the developer should recommend the best method, such as: * External endpoint * Shopify metaobjects * Custom app endpoint * Analytics event tracking --- 11. Admin / maintenance workflow Depending on the final architecture, the developer may need to provide a simple admin or maintenance workflow. This may include: * Importing/updating data from the classified database * Managing garment definitions * Managing categories/tags * Managing synonyms * Reviewing search logs * Re-running imports safely This can be implemented as: * A Shopify embedded app * A protected standalone admin page * A documented script-based workflow The developer should recommend the most efficient and maintainable option. --- 12. SEO The theme must follow Shopify SEO best practices. Requirements: * Semantic HTML * Unique title tags * Meta descriptions * Canonical tags * Open Graph tags * Twitter/social sharing tags * Product structured data / JSON-LD where appropriate * Collection structured data where appropriate * Optimized image alt text * Clean URL structure * Sitemap compatibility * Fast-loading pages Each design/product page should be SEO-friendly and indexable. --- 13. Performance The theme must be optimized for performance. Requirements: * Mobile-first responsive implementation * Lazy-loaded images * Optimized assets * Minimal JavaScript * No unnecessary libraries * Clean CSS structure * Fast page rendering * Lighthouse target: 90+ mobile * Lighthouse target: 95+ desktop --- 14. QA and testing The developer must test: * Homepage * PLP / collection pages * PDP * Product option selection * Add to cart * Cart drawer * Cart page * Checkout flow * Mobile layout * Tablet layout * Desktop layout * Search * Filters * Product data accuracy * Shopify admin order data * Theme editor sections * Browser compatibility The developer must fix bugs before launch. --- 15. Handover The final handover must include: * Full source code in a Git repository * Shopify theme files * Migration/import scripts * README with setup instructions * Shopify CLI workflow * Deployment instructions * Data mapping documentation * Metafield/metaobject schema documentation * Explanation of how to update products/designs in the future * Handover call * 2 weeks of bug-fix support after launch --- Technical requirements * Shopify Online Store 2.0 * Liquid * JSON templates * Shopify sections * Shopify snippets * Shopify Theme Editor support * Shopify CLI * GitHub integration * Shopify Admin GraphQL API * Node.js / TypeScript for import scripts * Native Shopify cart and checkout * No headless storefront * No full React storefront * Lightweight JavaScript only where needed --- Deliverables checklist * [ ] Shopify data architecture recommendation * [ ] Metafield / metaobject schema documented * [ ] Classified database reviewed and mapped to Shopify * [ ] Idempotent migration/import script * [ ] Products, variants, collections, metafields, and metaobjects imported * [ ] Custom Shopify Online Store 2.0 theme * [ ] Homepage implemented from Figma * [ ] PLP / collection page implemented from Figma * [ ] PDP implemented from Figma * [ ] Cart drawer implemented from Figma * [ ] Cart page implemented from Figma * [ ] Search implemented from Figma * [ ] Filters and sorting implemented * [ ] Product/design mockup or preview logic implemented * [ ] Add-to-cart flow with correct product selection data * [ ] Shopify checkout compatibility verified * [ ] SEO implementation * [ ] Performance optimization * [ ] Mobile responsive QA * [ ] Desktop QA * [ ] Shopify Theme Editor compatibility * [ ] Git repository * [ ] README and deployment documentation * [ ] Handover call * [ ] 2 weeks of bug-fix support --- Timeline and budget Estimated timeline: 4–6 weeks. Please quote a fixed price with milestones. Suggested milestones: 1. Data architecture, Shopify schema, and migration plan 2. Classified database mapping and import script 3. Figma-to-Shopify theme setup and global layout 4. Homepage and PLP implementation 5. PDP and product selection flow 6. Cart, checkout compatibility, and order data validation 7. Search, filters, SEO, and performance 8. QA, polish, launch, and handover --- To apply, please send: 1. 2–3 Shopify custom themes you have built, with links and your role. 2. One example where you used Shopify metafields or metaobjects for a non-standard product model. 3. Your experience converting Figma designs into Shopify Online Store 2.0 themes. 4. Your recommended Shopify data model for our design-first product experience. 5. Your approach for mapping an external classified database into Shopify. 6. Any concerns or risks you see around Shopify variants, line item properties, cart thumbnails, checkout limitations, or product mockup previews. 7. Your fixed price, timeline, and milestone proposal.