Front-End Developer Needed for Reusable Shopify Product Page Content Block System

Short video: https://www.loom.com/share/00ed811ee11c431abf9f58182e7131b2 # Front-End Developer Needed for SEO-Friendly Shopify Product Page Content Block System I run a Shopify store and am building a reusable product-page content block system. We already have pixel-perfect Figma mockups designed at a 1280px screen size. I need an expert front-end developer to turn these designs into clean, reusable, responsive HTML/CSS sections that can be pasted directly into Shopify product pages. This is not a basic Shopify setup project or a one-off landing page. The goal is to create a modular product-page content system that can be reused across many products. The final system should allow a writer or LLM to enter structured content — headings, body text, FAQs, benefits, specs, comparison rows, images, and approved icon choices — and generate final Shopify-ready HTML that matches the approved Figma designs. I do not care what coding tools you use. You can use Claude Code, Codex, Cursor, VS Code, or anything else. What matters is that the final code is clean, lightweight, responsive, maintainable, SEO-friendly, and accurate to the Figma mockups. ## Project Goal The goal is to create a reusable Shopify product-page block system. A writer should eventually be able to choose a block type, type in the content, select approved icons where needed, and produce final HTML that can be copied and pasted into a Shopify product page. The writer should not need to manually adjust spacing, layout, breakpoints, CSS, heading tags, or responsive behavior. ## Example Block Types The system will include reusable product-page sections such as: * Image + text intro section * Product research / education section * Use-case or “who it’s for” section * Feature card grid * FAQ accordion * Product comparison table * Benefits section with icons * Specifications grid * Other similar product education blocks All sections should feel like part of one consistent design system. ## Responsive Requirements The Figma designs are currently created at 1280px. The final blocks need to resize cleanly across our Shopify breakpoints: 480, 680, 720, 860, 1024, 1080, 1280, and 1500 The layouts should preserve the design intent across desktop, tablet, and mobile. Spacing, typography, card sizing, image behavior, table behavior, stacking order, and readability all matter. ## SEO & Semantic HTML Requirements SEO-friendly structure is extremely important for this project. The code should use proper semantic HTML, not just visually styled divs. The Shopify product title will already function as the page H1. The custom content blocks should follow a clean heading structure underneath the product title. Heading requirements: * The first major content section should use an H2 heading * Every major content section after that should use an H3 heading * Do not use styled divs, spans, or paragraph tags in place of real section headings * Do not use heading tags only for visual styling * Visual styling should be controlled with CSS classes, while the underlying HTML should preserve the correct page structure FAQ requirements: * FAQ sections should be crawlable in the HTML * FAQ question and answer text should exist in the page HTML, not be injected only after a click * Native HTML details/summary is preferred for FAQ accordions if it can match the design * Avoid unnecessary custom JavaScript for FAQ behavior Table requirements: * Comparison and data tables should use real semantic HTML tables where appropriate * Use table, thead, tbody, tr, th, and td instead of div-only fake tables for important data * Use scope="col" for column headings and scope="row" for row labels where appropriate * Include a table caption or accessible label where appropriate * Do not turn important comparison tables into images * Yes/no values should include accessible screen-reader text For yes/no values in tables, use accessible markup. Image/icon requirements: * Meaningful images should include descriptive alt text * Decorative icons should not create duplicate or confusing screen-reader text * Icons should be chosen from an approved icon registry, not randomly generated or manually inserted each time * Important text should not be embedded inside images General SEO/accessibility requirements: * Content should be visible and crawlable in the HTML * Important content should not be hidden on mobile * Internal links, if included, should use real anchor tags with descriptive anchor text * The custom blocks should not break or interfere with Shopify’s existing product structured data * Code should be lightweight and should not negatively impact page speed * HTML should be semantic, accessible, and easy for search engines to understand ## HTML/CSS Preference I strongly prefer the live Shopify product-page blocks to be built with HTML and CSS only whenever possible. JavaScript should be avoided unless it is truly necessary for a specific interaction. It is acceptable to use JavaScript, Node, or another lightweight internal tool for the preview page or content-to-HTML generator workflow, as long as the final Shopify product-page output remains clean, lightweight, and easy to paste into Shopify. ## Core Deliverables I am looking for someone who can deliver: 1. Clean, reusable HTML/CSS for each product-page content block 2. A shared CSS structure that is properly namespaced and will not conflict with the Shopify theme 3. Responsive styling for all required breakpoints 4. Proper semantic heading structure using H2 and H3 tags as described above 5. SEO-friendly, crawlable HTML structure 6. Semantic and accessible table markup for comparison/data sections 7. Accessible yes/no table values with screen-reader text 8. Crawlable FAQ accordion markup 9. A structured block content schema that allows a writer or LLM to safely fill in content without editing layout code 10. A simple content-entry format, such as JSON, YAML, Markdown, or another recommended structure 11. An approved icon registry where icons are chosen from predefined names instead of randomly generated or manually inserted each time 12. A preview page where I can view every block type and test how each block looks across the required responsive breakpoints before pasting into Shopify 13. Example completed product page output using the provided Figma design 14. Final Shopify-ready HTML that can be copied and pasted into product pages 15. Documentation explaining how a non-developer writer should create new product-page content using the approved block system ## Code Quality Requirements The code should be simple, durable, and easy to maintain. I do not want bloated code, random one-off CSS, unnecessary libraries, or fragile layouts that only work at one screen size. The CSS should be organized and reusable. Class names should be clear and namespaced to avoid conflicts with the Shopify theme. For example, using a consistent prefix like cw- or another agreed naming convention. The HTML should be semantic and easy to understand. The responsive behavior should be intentional, not just basic stacking. The content workflow is very important. The goal is not just to recreate one page. The goal is to create a system where approved block types, approved icon names, and structured content inputs reliably produce final Shopify-ready HTML that matches the Figma mockups. ## First Paid Trial Milestone Before committing to the full project, I want to start with one paid trial milestone. For the trial, I will provide one Figma section and ask you to build it as a reusable, responsive Shopify-ready content block. The trial block should include: * Clean HTML/CSS * Proper semantic HTML * Correct H2/H3 heading structure where applicable * SEO-friendly structure * Responsive behavior across the required breakpoints * Properly namespaced CSS * A simple example of how the content would be entered or structured * A preview version I can review * Final copy/paste-ready Shopify HTML This first task is mainly to evaluate code quality, attention to detail, responsiveness, semantic HTML, SEO awareness, and whether you understand the reusable system I am trying to build. If the trial goes well, we can continue with the full block system. ## Ideal Candidate You should have experience with: * Figma to HTML/CSS * Responsive front-end development * Shopify product pages or Shopify theme environments * Modular CSS / reusable component systems * Clean semantic HTML * Technical SEO basics * Web accessibility basics * Mobile-first responsive design * Building systems that non-developers can use * Creating simple documentation Bonus if you have experience with: * JSON, YAML, Markdown, or structured content workflows * Design systems * Component libraries * AI-assisted coding workflows * Content templates for non-technical writers * Shopify custom HTML/CSS sections * Accessible tables and accordions * SEO-friendly ecommerce content pages ## To Apply Please include: 1. Examples of relevant Figma-to-HTML, responsive front-end, or Shopify work 2. A brief explanation of how you would structure this as a reusable block system 3. How you would keep the blocks SEO-friendly, semantic, and accessible 4. Your hourly rate Please do not apply with only generic Shopify store setup examples. I am specifically looking for someone who can build a clean, reusable, SEO-friendly front-end content block system from existing Figma designs.