Shopify Website Rebuild
Budget: $1,500 – $3,000 AUD
Ecommerce Website Rebuild Developer Brief (Dawn Theme, Shopify 2.0)
0. Project Context and Goals
We are rebuilding our website using the latest Dawn theme (Shopify 2.0 framework).
This decision is based on:
- Our current theme is a 7-year-old third-party, highly customized theme, not compatible with Shopify 2.0.
- The current theme is heavy, slow, and hard to maintain.
- Shopify 2.0 (Dawn) provides:
- Full Sections Everywhere support.
- Native Metafields integration.
- Improved performance (faster load times, better SEO).
- Easier updates and future-proofing as Shopify releases new features.
The new build must focus on maximum site speed, brand consistency, scalability, and better UX across mobile and desktop.
It is essential to preserve the current site’s UX, core functionalities, and overall aesthetics to maintain consistency with the Coluri brand. Visually, the new website should look the same as the current site and function identically wherever possible.
1. Theme Setup
- Remove unused default Dawn sections and snippets to reduce file size.
- Build layouts using Sections Everywhere and Dynamic Blocks (no hardcoding when possible).
- Maintain layout structure and design style consistent with current site aesthetics.
2. Typography (Fonts)
- Use Brandon Grotesque Light (300), Brandon Grotesque Bold (700), and Novel Mono Pro Extra Condensed (700).
- Fonts are self-hosted:
- Uploaded to Shopify Assets as `.woff2` and `.woff`.
- Write custom `@font-face` rules:
- Light → 300
- Bold → 700
- Use `font-display: swap`.
- Preload all fonts for better performance.
- The font `novel-mono-pro-extra-condens, sans-serif` is already uploaded to the assets folder.
Example preload in <head>:
<link rel="preload" as="font" href="{{ 'brandon-grotesque-light.woff2' | asset_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ 'brandon-grotesque-bold.woff2' | asset_url }}" type="font/woff2" crossorigin>
3. Speed Optimization
- Optimize all images:
- Use Shopify’s `image_url` filter to serve responsive WebP.
- Lazy load all images and videos (except first-viewport images).
- Defer or async-load all non-critical JavaScript (apps, analytics).
- Minimize app usage — use native Shopify functionality where possible.
- Remove unused CSS and JavaScript:
- Use manual removal or tools like PurgeCSS during build.
4. AJAX Cart
- Rebuild AJAX cart using Dawn’s cart-drawer system and Shopify Cart API.
- Cart should show:
- Product line items
- Quantity selectors
- Subtotal
- Discounts applied (live display)
- Ensure cart updates dynamically (without page reload).
- Recreate existing cart behavior and appearance to match current user experience.
5. Metafields
- Preserve all current product metafields from the old store.
- Use Shopify 2.0 Dynamic Sources to connect metafields directly into product templates.
- Avoid hardcoding metafield outputs.
- Ensure existing metafield-driven content appears and behaves consistently.
6. Internationalization (Shopify Markets)
- Ensure full compatibility with Shopify Markets:
- Localized pricing adjusts automatically by user location.
- Currency display correct based on country.
- No manual price modification — Shopify handles it natively.
7. Testing and QA
- Test across devices and screen sizes:
- Desktop (large monitors)
- Laptops
- Tablets
- Mobile devices (iOS Safari, Android Chrome)
- Ensure responsive design works correctly on all screen sizes.
- Check:
- Cart functionality
- Metafield outputs
- Product page rendering
- Checkout flow
- Confirm that current UX and visual consistency are preserved across all pages.
8. Deliverables
- Fully working new Shopify theme installed on staging store.
- Clean, commented, maintainable code.
- All current store functionality preserved or improved.
- Full performance optimizations implemented.
- Final site ready for live launch after QA approval.
- UX, layout, and brand styling match current site design.
Important Reminders
- Fonts must be self-hosted — no Adobe Fonts/Typekit dependencies.
- No external font servers — use only Shopify assets.
- Maintain clean and editable sections for Admin (no developer needed for simple updates).
- No unnecessary apps that add extra JS/CSS.
- Keep code lightweight and Shopify 2.0 standards compliant.
Final Notes
Focus is on clean, fast, modular Shopify 2.0 build — no "Frankenstein" custom theme hacks.
Full ownership and control of typography, metafields, cart behavior, and scalability.
Preserving the current user experience, visual aesthetic, and functionality is critical to ensure brand consistency and customer familiarity.
0. Project Context and Goals
We are rebuilding our website using the latest Dawn theme (Shopify 2.0 framework).
This decision is based on:
- Our current theme is a 7-year-old third-party, highly customized theme, not compatible with Shopify 2.0.
- The current theme is heavy, slow, and hard to maintain.
- Shopify 2.0 (Dawn) provides:
- Full Sections Everywhere support.
- Native Metafields integration.
- Improved performance (faster load times, better SEO).
- Easier updates and future-proofing as Shopify releases new features.
The new build must focus on maximum site speed, brand consistency, scalability, and better UX across mobile and desktop.
It is essential to preserve the current site’s UX, core functionalities, and overall aesthetics to maintain consistency with the Coluri brand. Visually, the new website should look the same as the current site and function identically wherever possible.
1. Theme Setup
- Remove unused default Dawn sections and snippets to reduce file size.
- Build layouts using Sections Everywhere and Dynamic Blocks (no hardcoding when possible).
- Maintain layout structure and design style consistent with current site aesthetics.
2. Typography (Fonts)
- Use Brandon Grotesque Light (300), Brandon Grotesque Bold (700), and Novel Mono Pro Extra Condensed (700).
- Fonts are self-hosted:
- Uploaded to Shopify Assets as `.woff2` and `.woff`.
- Write custom `@font-face` rules:
- Light → 300
- Bold → 700
- Use `font-display: swap`.
- Preload all fonts for better performance.
- The font `novel-mono-pro-extra-condens, sans-serif` is already uploaded to the assets folder.
Example preload in <head>:
<link rel="preload" as="font" href="{{ 'brandon-grotesque-light.woff2' | asset_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ 'brandon-grotesque-bold.woff2' | asset_url }}" type="font/woff2" crossorigin>
3. Speed Optimization
- Optimize all images:
- Use Shopify’s `image_url` filter to serve responsive WebP.
- Lazy load all images and videos (except first-viewport images).
- Defer or async-load all non-critical JavaScript (apps, analytics).
- Minimize app usage — use native Shopify functionality where possible.
- Remove unused CSS and JavaScript:
- Use manual removal or tools like PurgeCSS during build.
4. AJAX Cart
- Rebuild AJAX cart using Dawn’s cart-drawer system and Shopify Cart API.
- Cart should show:
- Product line items
- Quantity selectors
- Subtotal
- Discounts applied (live display)
- Ensure cart updates dynamically (without page reload).
- Recreate existing cart behavior and appearance to match current user experience.
5. Metafields
- Preserve all current product metafields from the old store.
- Use Shopify 2.0 Dynamic Sources to connect metafields directly into product templates.
- Avoid hardcoding metafield outputs.
- Ensure existing metafield-driven content appears and behaves consistently.
6. Internationalization (Shopify Markets)
- Ensure full compatibility with Shopify Markets:
- Localized pricing adjusts automatically by user location.
- Currency display correct based on country.
- No manual price modification — Shopify handles it natively.
7. Testing and QA
- Test across devices and screen sizes:
- Desktop (large monitors)
- Laptops
- Tablets
- Mobile devices (iOS Safari, Android Chrome)
- Ensure responsive design works correctly on all screen sizes.
- Check:
- Cart functionality
- Metafield outputs
- Product page rendering
- Checkout flow
- Confirm that current UX and visual consistency are preserved across all pages.
8. Deliverables
- Fully working new Shopify theme installed on staging store.
- Clean, commented, maintainable code.
- All current store functionality preserved or improved.
- Full performance optimizations implemented.
- Final site ready for live launch after QA approval.
- UX, layout, and brand styling match current site design.
Important Reminders
- Fonts must be self-hosted — no Adobe Fonts/Typekit dependencies.
- No external font servers — use only Shopify assets.
- Maintain clean and editable sections for Admin (no developer needed for simple updates).
- No unnecessary apps that add extra JS/CSS.
- Keep code lightweight and Shopify 2.0 standards compliant.
Final Notes
Focus is on clean, fast, modular Shopify 2.0 build — no "Frankenstein" custom theme hacks.
Full ownership and control of typography, metafields, cart behavior, and scalability.
Preserving the current user experience, visual aesthetic, and functionality is critical to ensure brand consistency and customer familiarity.