About

We are seeking an experienced Shopify developer to work on our e-commerce site using the Craft Theme. The project involves customizing the theme to enhance the user experience and ensure seamless functionality. Scope of Work Task 1 — Payment Logos in Announcement/Shipping Bar Add the copy: “BUY NOW, PAY LATER” followed by Afterpay and PayPal logos in the top-right of the existing announcement/shipping bar. Logos must be: Retina-ready (SVG preferred), crisp on all DPRs. Accessible (alt text / aria-labels). Horizontally aligned with correct spacing and vertical centring. Clickable (link to /pages/payment-options or a simple anchor I can change in theme customiser). Behaviour: On mobile, collapse gracefully (e.g., icons stack or convert to a compact row with “Buy Now, Pay Later” truncated to “BNPL” – open to your sensible approach). Must not push content down (no CLS). Implementation: Theme-safe: add via Theme Settings / Section where possible (toggle on/off, upload/replace logos). Clean, commented code. No random hard-coding in 8 different places. Follow Craft theme conventions (Liquid, JSON templates, CSS). Acceptance criteria Visible and aligned top-right on desktop; legible and tidy on mobile. Passes quick Lighthouse sanity check (no new CLS). Toggle + link editable in the Customizer. Works across Chrome, Safari, Firefox (latest), iOS Safari, Android Chrome. Task 2 — Responsive Media Banner with Text Overlay + CTA (Button under text) I need a hero/media banner section that scales beautifully as users resize their screens. Requirements Inputs via Theme Customizer: Image upload (supports desktop + mobile crops if you provide both; otherwise 1 image that scales well). Heading, subheading, body copy. CTA button (text + URL). Overlay controls (on/off, colour, opacity). Desktop/mobile height control (px, vh, or a simple “Small / Medium / Large” that maps to clamp() values). Focal point control or object-position so important content stays visible. “CTA button text and URL, heading/subheading/body copy, overlay options, and banner image(s) must be editable via Theme Customiser. No code edits required for future updates.” And document where it lives. "to document where it lives: Ex. “Section name: Ember – Responsive Media Banner. Editable from Online Store → Themes → Customise → Homepage (or chosen template).”" Layout: Text overlays the image; CTA button sits beneath the text block (not floating randomly). Fluid typography (use clamp()); no teeny fonts on mobile or billboard fonts on desktop. Good contrast + accessible sizes; headings marked up semantically. Performance: Use responsive image outputs (srcset, sizes) from Shopify. No layout shift; minimal extra JS (prefer CSS first). File format: You tell me the preferred format(s) for best results (SVG/PNG/JPG, and any min dimensions). I have assets named in the brief. Acceptance criteria: The banner retains composition and scales cleanly from 320px up to 1920px+. Text never overlaps critical image content; CTA remains visible and tappable above the fold on mobile (within reason). All content editable in the Customizer; no code edits required by me to update future banners. Cross-browser/device as per Task 1. Tech Stack Shopify (Online Store 2.0), Craft theme. Liquid, JSON templates/sections, CSS (prefer modern, lightweight). Keep JS minimal and vanilla if needed. Assets Provided Screenshot example for the announcement bar placement. Media creative file(s) referenced in the brief (you can specify ideal dimensions/format before build if needed).