{"id":8896,"date":"2025-12-23T08:55:27","date_gmt":"2025-12-23T08:55:27","guid":{"rendered":"https:\/\/ecommerce.folio3.com\/blog\/?p=8896"},"modified":"2026-04-02T17:17:35","modified_gmt":"2026-04-02T17:17:35","slug":"how-to-build-a-custom-shopify-theme","status":"publish","type":"post","link":"https:\/\/ecommerce.folio3.com\/blog\/how-to-build-a-custom-shopify-theme\/","title":{"rendered":"How to Build a Custom Shopify Theme from Scratch"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Your Shopify store&#8217;s theme is the foundation of your brand&#8217;s online presence. While pre-built themes offer convenience, custom Shopify theme development delivers the unique look, functionality, and competitive edge your business needs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you&#8217;re ready to build a Shopify theme that truly reflects your brand identity and drives conversions, this guide walks you through the essential steps, technical requirements, and best practices.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whether you&#8217;re a developer looking to master Liquid templating or a business owner evaluating your options, you&#8217;ll discover how to develop a Shopify theme that performs.<\/span><\/p>\n<h2><strong>Summary<\/strong><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Prerequisites:<\/b><span style=\"font-weight: 400;\"> Set up Shopify CLI, GitHub integration, and development store environment for safe testing and version control<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Theme Structure:<\/b><span style=\"font-weight: 400;\"> Master Liquid templating, JSON templates, sections, snippets, and assets that form the backbone of Shopify themes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Development Process:<\/b><span style=\"font-weight: 400;\"> Follow a structured workflow from requirements gathering through deployment, testing, and optimization<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Best Practices:<\/b><span style=\"font-weight: 400;\"> Implement mobile-first design, accessibility standards, and performance optimizations for Online Store 2.0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Alternative Approaches:<\/b><span style=\"font-weight: 400;\"> Compare custom development costs against page builders and pre-built theme customization options<\/span><\/li>\n<\/ul>\n<h2><b>What Is a Custom Shopify Theme?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">A Shopify theme controls your store&#8217;s visual design and functional behavior through a structured collection of files. When you build a custom Shopify theme, you&#8217;re creating a tailored experience that goes beyond what standard templates can offer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom themes use Shopify&#8217;s Liquid templating language alongside HTML, CSS, and JavaScript to render dynamic content. Unlike pre-built themes used by thousands of other stores, custom development gives you complete control over layout, features, and user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The rise of<\/span> <span style=\"font-weight: 400;\">Shopify&#8217;s Online Store 2.0 architecture<\/span><span style=\"font-weight: 400;\"> has fundamentally changed how developers build Shopify themes. This update introduced JSON-based templates, universal sections, and enhanced customization capabilities that make theme development more flexible and maintainable.<\/span><\/p>\n<h2><strong>Why Build a Custom Shopify Theme?<\/strong><\/h2>\n<h3><strong>Brand Differentiation<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Pre-built themes create visual similarity across thousands of stores. Custom Shopify theme development ensures your brand stands out with unique design elements, specialized layouts, and tailored user flows that reflect your identity.<\/span><\/p>\n<h3><strong>Performance Optimization<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">You control every line of code. This means eliminating unnecessary features, optimizing load times, and implementing only the functionality your store actually needs. Performance directly impacts conversion rates and search rankings.<\/span><\/p>\n<h3><strong>Scalability<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">As your business grows, custom themes adapt without limitations. You can add new features, integrate specialized tools, and modify functionality without theme constraints or compatibility issues.<\/span><\/p>\n<h3><strong>Conversion-Focused Design<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Develop a Shopify theme with specific conversion goals in mind. Custom layouts, strategic element placement, and optimized checkout flows all contribute to higher revenue per visitor.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Approach<\/b><\/td>\n<td><b>Time to Launch<\/b><\/td>\n<td><b>Cost Range<\/b><\/td>\n<td><b>Flexibility<\/b><\/td>\n<td><b>Best For<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Pre-built Theme<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1-2 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">$0-$350<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Limited<\/span><\/td>\n<td><span style=\"font-weight: 400;\">New stores, tight budgets<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Theme Customization<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2-4 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">$1,000-$5,000<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Moderate<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Growing businesses<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Custom Development<\/span><\/td>\n<td><span style=\"font-weight: 400;\">6-12 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">$15,000-$50,000+<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Complete<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Established brands<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Page Builder Tools<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2-3 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">$500-$2,000<\/span><\/td>\n<td><span style=\"font-weight: 400;\">High<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Non-technical teams<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><strong>Prerequisites for Custom Shopify Theme Development<\/strong><\/h2>\n<h3><strong>Development Environment Setup<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Before you build a custom Shopify theme, establish your development infrastructure. Start by creating a Shopify Partner account, which grants access to development stores for testing without affecting live environments.<\/span><\/p>\n<p><strong>Essential Tools:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Shopify CLI:<\/b><span style=\"font-weight: 400;\"> The command-line interface streamlines theme development with local preview, hot reloading, and push\/pull functionality<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Code Editor:<\/b><span style=\"font-weight: 400;\"> Visual Studio Code with Shopify Liquid extensions provides syntax highlighting and error detection<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Git Version Control:<\/b><span style=\"font-weight: 400;\"> Track changes, collaborate with teams, and maintain code history through GitHub or similar platforms<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Development Store:<\/b><span style=\"font-weight: 400;\"> Test themes safely in a sandbox environment that mirrors production without customer impact<\/span><\/li>\n<\/ul>\n<h3><strong>Technical Skills Required<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Custom Shopify theme development demands specific technical knowledge. You&#8217;ll need proficiency in Liquid (Shopify&#8217;s templating language), HTML5 for structure, CSS3 for styling, and JavaScript for interactivity. Understanding responsive design principles and basic performance optimization also proves essential.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If your team lacks these skills, consider working with experienced<\/span><a href=\"https:\/\/ecommerce.folio3.com\/hire-shopify-developers\/\"> <span style=\"font-weight: 400;\">Shopify developers<\/span><\/a><span style=\"font-weight: 400;\"> who can build themes efficiently while avoiding common pitfalls.<\/span><\/p>\n<h3><strong>Installing Shopify CLI<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">The Shopify CLI replaced<\/span><a href=\"https:\/\/ecommerce.folio3.com\/blog\/how-to-install-shopify-theme-kit\/\"> <span style=\"font-weight: 400;\">Theme Kit<\/span><\/a><span style=\"font-weight: 400;\"> as the primary development tool. Install it through npm, Ruby, or Homebrew, depending on your operating system. Once installed, authenticate with your Partner account and connect to your development store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Run <\/span><span style=\"font-weight: 400;\">shopify theme init<\/span><span style=\"font-weight: 400;\"> to clone Shopify&#8217;s reference theme to your local machine, creating the foundation for custom development.<\/span><\/p>\n<h2><strong>Understanding Shopify Theme Architecture<\/strong><\/h2>\n<h3><strong>Theme File Structure<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">A Shopify theme consists of several key directories, each serving specific purposes in your store&#8217;s functionality.<\/span><\/p>\n<h4><strong>Core Directories:<\/strong><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Layout:<\/b><span style=\"font-weight: 400;\"> Contains theme.liquid, the master template wrapping all pages with shared elements like headers and footers<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Templates:<\/b><span style=\"font-weight: 400;\"> Defines page types (product, collection, cart) and controls what content displays and how<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sections:<\/b><span style=\"font-weight: 400;\"> Modular, reusable components that merchants can add, remove, and customize through the theme editor<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Snippets:<\/b><span style=\"font-weight: 400;\"> Smaller code fragments used across multiple locations to maintain consistency and reduce repetition<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Assets:<\/b><span style=\"font-weight: 400;\"> Stores CSS, JavaScript, fonts, and images that style and enhance theme functionality<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Config:<\/b><span style=\"font-weight: 400;\"> Holds settings_schema.json for theme customization options and settings_data.json for saved preferences<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Locales:<\/b><span style=\"font-weight: 400;\"> Translation files supporting multiple languages for international stores<\/span><\/li>\n<\/ul>\n<h3><strong>Liquid Templating Language<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Liquid serves as the bridge between your theme code and Shopify&#8217;s database. This Ruby-based language uses objects, tags, and filters to output dynamic content without hardcoding specific values.<\/span><\/p>\n<h4><strong>Liquid Components:<\/strong><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Objects:<\/b><span style=\"font-weight: 400;\"> Access store data like product titles, prices, and images (e.g., <\/span><span style=\"font-weight: 400;\">{{ product.title }}<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tags:<\/b><span style=\"font-weight: 400;\"> Control logic flow with conditionals and loops (e.g., <\/span><span style=\"font-weight: 400;\">{% if %} {% endif %}<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Filters:<\/b><span style=\"font-weight: 400;\"> Modify output format and appearance (e.g., <\/span><span style=\"font-weight: 400;\">{{ product.price | money }}<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Mastering Liquid is essential when you develop a Shopify theme. It enables dynamic product displays, customer-specific content, and responsive layouts that adapt to your store&#8217;s data.<\/span><\/p>\n<h3><strong>JSON Templates and Sections<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Online Store 2.0 introduced JSON-based templates that list sections and their configurations. These templates enable drag-and-drop customization in the theme editor, giving merchants control without code editing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each theme supports up to 1,000 JSON templates, and each template can render up to 20 sections. This modularity dramatically improves flexibility compared to legacy .liquid templates.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Component<\/b><\/td>\n<td><b>Purpose<\/b><\/td>\n<td><b>Customizable by Merchants<\/b><\/td>\n<td><b>File Extension<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Layouts<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Master wrapper<\/span><\/td>\n<td><span style=\"font-weight: 400;\">No<\/span><\/td>\n<td><span style=\"font-weight: 400;\">.liquid<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Templates<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Page structure<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Limited<\/span><\/td>\n<td><span style=\"font-weight: 400;\">.json or .liquid<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Sections<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Modular blocks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Yes<\/span><\/td>\n<td><span style=\"font-weight: 400;\">.liquid<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Snippets<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Code reuse<\/span><\/td>\n<td><span style=\"font-weight: 400;\">No<\/span><\/td>\n<td><span style=\"font-weight: 400;\">.liquid<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><strong>How to Build a Custom Shopify Theme: Step-by-Step Process<\/strong><\/h2>\n<h3><strong>Step 1: Define Requirements and Planning<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Before writing a single line of code, document your store&#8217;s specific needs. What features must the theme include? Which user flows are critical for conversions? How will the theme reflect your brand identity?<\/span><\/p>\n<p><strong>Create a requirements document covering:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Target Audience:<\/b><span style=\"font-weight: 400;\"> Who shops on your store and what do they expect?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Feature List:<\/b><span style=\"font-weight: 400;\"> Required functionality like filters, quick view, size guides, or reviews<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Design Specifications:<\/b><span style=\"font-weight: 400;\"> Color schemes, typography, imagery style, and brand guidelines<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance Goals:<\/b><span style=\"font-weight: 400;\"> Load time targets, mobile optimization standards, accessibility requirements<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Technical Constraints:<\/b><span style=\"font-weight: 400;\"> Third-party app integrations, payment gateways, shipping calculators<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This planning phase prevents scope creep and ensures your custom theme addresses actual business needs rather than arbitrary features.<\/span><\/p>\n<h3><strong>Step 2: Set Up Your Development Store<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Create a development store through your Shopify Partner account. Populate it with sample products, collections, and content that mirrors your production environment. This realistic testing environment catches issues before they affect customers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Configure your store settings, install necessary apps, and add test customer accounts to verify all user paths function correctly. The more your development environment resembles production, the smoother your launch.<\/span><\/p>\n<h3><strong>Step 3: Initialize Your Theme Foundation<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Use Shopify CLI to create your theme structure. Run <\/span><span style=\"font-weight: 400;\">shopify theme in it<\/span><span style=\"font-weight: 400;\"> and choose between starting from Shopify&#8217;s Dawn reference theme or building from scratch.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dawn provides a solid foundation with current best practices, accessibility features, and performance optimizations built in. Customizing Dawn typically proves faster than building from zero while maintaining code quality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you need complete control, choose the blank template option. This approach requires more time but offers absolute customization freedom for unique requirements.<\/span><\/p>\n<h3><strong>Step 4: Build Core Theme Structure<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Start with your layout file (theme.liquid), establishing the HTML framework that wraps all pages. Include your header, footer, and essential meta tags. This master template ensures consistency across your entire store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, create your primary templates for key page types: index (homepage), product, collection, cart, and blog. These templates define the structure and content hierarchy for each page type.<\/span><\/p>\n<h3><strong>Step 5: Develop Sections and Snippets<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Sections form the building blocks of your theme&#8217;s flexibility. Create modular sections for common elements like hero banners, featured collections, testimonials, and promotional content.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each section includes a .liquid file with HTML\/Liquid code and a schema definition for customization options. Merchants can add, remove, and configure these sections through the theme editor without touching code.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Snippets handle repeated code patterns like product cards, SVG icons, or social media links. Extract common elements into snippets to maintain consistency and simplify updates.<\/span><\/p>\n<h3><strong>Step 6: Style With CSS<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Write clean, organized CSS to bring your design to life. Consider using a methodology like BEM (Block Element Modifier) for maintainable class naming. Modern approaches include Tailwind CSS for utility-first styling, though this requires build process setup.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Focus on responsive design from the start. Mobile devices account for over 70% of e-commerce traffic, making mobile-first development essential. Use CSS Grid and Flexbox for flexible layouts that adapt across screen sizes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Implement CSS custom properties (variables) for colors, spacing, and typography. This approach simplifies theme-wide style changes and maintains consistency.<\/span><\/p>\n<h3><strong>Step 7: Add JavaScript Functionality<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Enhance user experience with JavaScript for interactive features. Common implementations include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cart functionality using Shopify&#8217;s AJAX Cart API<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Product quick view modals<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Image zoom on product pages<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dynamic filtering and search<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mobile navigation menus<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Keep JavaScript minimal and performant. Every script adds load time, so prioritize features that truly enhance the user experience. Consider lazy loading for non-critical functionality.<\/span><\/p>\n<h3><strong>Step 8: Implement Online Store 2.0 Features<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Take full advantage of Online Store 2.0 capabilities:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>App Blocks:<\/b><span style=\"font-weight: 400;\"> Allow apps to integrate seamlessly into theme sections without code editing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Section Groups:<\/b><span style=\"font-weight: 400;\"> Organize sections into logical groups for the theme editor<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Metafields:<\/b><span style=\"font-weight: 400;\"> Enable custom fields for products, variants, collections, and pages<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dynamic Content:<\/b><span style=\"font-weight: 400;\"> Use metafields to display additional product information, specifications, or custom banners<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">These features separate presentation from data, making themes more flexible and easier to maintain over time.<\/span><\/p>\n<h3><strong>Step 9: Test Thoroughly<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Testing prevents costly post-launch issues. Verify functionality across multiple browsers (Chrome, Safari, Firefox, Edge) and devices (iOS, Android, tablets, desktops).<\/span><\/p>\n<p><b>Testing Checklist:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">All page templates render correctly with real content<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Forms submit and validate properly<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cart adds, updates, and removes products accurately<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Checkout flow works end-to-end (use test mode)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Navigation functions across all pages<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Images load and display at appropriate sizes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mobile experience matches desktop functionality<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Accessibility standards are met (keyboard navigation, screen readers, color contrast)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Performance meets targets (Lighthouse scores, <a href=\"https:\/\/ecommerce.folio3.com\/blog\/core-web-vitals-improve-ux-seo\/\">Core Web Vitals<\/a>)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Use Shopify&#8217;s theme testing assets available in your development store to verify essential functionality with edge cases like products with many variants or long titles.<\/span><\/p>\n<h3><strong>Step 10: Deploy and Launch<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Once testing is complete, push your theme to production. Use <\/span><span style=\"font-weight: 400;\">shopify theme push &#8211;unpublished<\/span><span style=\"font-weight: 400;\"> to upload your theme as an unpublished version first. This allows final review in the actual store environment before going live.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When satisfied, publish your theme through the Shopify admin. Monitor your store closely after launch, checking analytics for any unusual behavior or errors.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Development Phase<\/b><\/td>\n<td><b>Typical Duration<\/b><\/td>\n<td><b>Key Deliverables<\/b><\/td>\n<td><b>Common Challenges<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Requirements &amp; Planning<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1-2 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Requirements doc, wireframes<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Scope definition, stakeholder alignment<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Environment Setup<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2-3 days<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Dev store, CLI config, GitHub<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Tool compatibility, authentication<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Core Development<\/span><\/td>\n<td><span style=\"font-weight: 400;\">4-8 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Templates, sections, styling<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Code organization, cross-browser issues<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Testing &amp; QA<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1-2 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Test reports, bug fixes<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Device testing, edge cases<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Deployment<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2-3 days<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Live theme, documentation<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Migration planning, downtime<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><strong>Best Practices for Custom Shopify Theme Development<\/strong><\/h2>\n<h3><strong>Performance Optimization<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Page speed directly impacts conversion rates. Amazon found that every 100ms of latency costs them 1% in sales. Your custom theme must load quickly across all devices and connection speeds.<\/span><\/p>\n<p><b>Performance Strategies:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Minimize HTTP requests by combining CSS and JavaScript files<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimize images with appropriate formats (WebP), compression, and lazy loading<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implement critical CSS for above-the-fold content<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Defer non-essential JavaScript loading<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use CDN-hosted resources when possible<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Minify and compress all assets<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Target Lighthouse scores above 90 for performance. Use PageSpeed Insights and Web Vitals to monitor and optimize continuously.<\/span><\/p>\n<h3><strong>Mobile-First Design<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Build your theme starting with mobile layouts, then progressively enhance for larger screens. This approach ensures optimal performance on smartphones where most shoppers browse.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Test on actual devices, not just browser emulators. Real-world testing reveals issues that simulations miss, particularly around touch interactions and performance on lower-powered devices.<\/span><\/p>\n<h3><strong>Accessibility Standards<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Accessible themes expand your potential customer base while meeting legal requirements. Follow WCAG 2.1 Level AA guidelines at a minimum.<\/span><\/p>\n<p><b>Accessibility Essentials:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Semantic HTML structure with proper heading hierarchy<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sufficient color contrast (4.5:1 minimum for normal text)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Keyboard navigation for all interactive elements<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">ARIA labels for screen reader users<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Focus indicators on interactive elements<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Accessible forms with proper labels and error messages<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Skip navigation links for screen readers<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Accessibility isn&#8217;t just ethical\u2014it&#8217;s good business. Many accessibility improvements also enhance usability for all customers.<\/span><\/p>\n<h3><strong>Code Organization and Maintainability<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Structure your code for long-term maintenance. Use consistent naming conventions, comment complex logic, and organize files logically.<\/span><\/p>\n<p><strong>Create documentation covering:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">File structure and purpose<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Customization instructions for everyday tasks<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dependencies and third-party integrations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Known limitations or issues<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Well-documented themes save time and reduce errors when updates are needed. Remember, you or others will maintain this theme for years.<\/span><\/p>\n<h3><strong>Security Considerations<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">While Shopify handles core security, your theme code can introduce vulnerabilities. Validate and sanitize all user inputs, avoid inline JavaScript, and be cautious with third-party integrations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Never store sensitive data in your theme. Use Shopify&#8217;s secure APIs for customer data and payment processing.<\/span><\/p>\n<h2><strong>Common Challenges in Custom Theme Development<\/strong><\/h2>\n<h3><strong>Cross-Browser Compatibility<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Different browsers render CSS and JavaScript differently. Safari on iOS, in particular, has unique quirks that catch developers off guard. Test extensively and use progressive enhancement to handle browser limitations gracefully.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CSS prefixes, polyfills, and feature detection help manage browser differences. Tools like Autoprefixer automate vendor prefix addition for wider compatibility.<\/span><\/p>\n<h3><strong>Third-Party App Integration<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Apps often inject code into your theme, sometimes breaking layouts or conflicting with your custom code. Design your theme with app integration in mind, providing designated areas for app content.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Use theme app extensions when possible, as these integrate more cleanly than traditional app embed code.<\/span><\/p>\n<h3><strong>Maintaining Performance With Rich Content<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Merchants often add numerous images, videos, and apps that slow page loads. Build performance guardrails into your theme\u2014lazy loading by default, image optimization prompts, and warnings about excessive sections.<\/span><\/p>\n<h3><strong>Version Control and Collaboration<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Multiple developers working on the same theme can create conflicts and overwrite changes. Use Git branches for feature development, pull requests for code review, and clear commit messages.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Establish coding standards and use linters to maintain code quality across team members.<\/span><\/p>\n<h2><strong>Tools and Resources for Theme Development<\/strong><\/h2>\n<h3><strong>Official Shopify Resources<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Shopify provides extensive documentation through their<\/span><a href=\"https:\/\/shopify.dev\/docs\/themes\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Dev Docs<\/span><\/a><span style=\"font-weight: 400;\">, covering everything from basic Liquid syntax to advanced Online Store 2.0 features. The Shopify Community forums offer peer support for troubleshooting specific issues.<\/span><\/p>\n<h3><strong>Development Tools<\/strong><\/h3>\n<p><b>Recommended Extensions:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Shopify Liquid<\/b><span style=\"font-weight: 400;\"> (VS Code extension) for syntax highlighting and autocomplete<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lighthouse<\/b><span style=\"font-weight: 400;\"> for performance auditing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>BrowserStack<\/b><span style=\"font-weight: 400;\"> for cross-browser testing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polypane<\/b><span style=\"font-weight: 400;\"> for responsive design testing<\/span><\/li>\n<\/ul>\n<h3><strong>Learning Resources<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Shopify Partner Academy offers free courses on theme development. External resources like YouTube tutorials, developer blogs, and community Slack channels provide additional learning opportunities.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider specialized courses from platforms like Udemy or Skillshare if you need structured learning paths with hands-on projects.<\/span><\/p>\n<h2><strong>Alternatives to Building From Scratch<\/strong><\/h2>\n<h3><strong>Customizing Pre-Built Themes<\/strong><\/h3>\n<p><a href=\"https:\/\/ecommerce.folio3.com\/blog\/guide-to-shopify-theme-customization\/\"><span style=\"font-weight: 400;\">Theme customization<\/span><\/a><span style=\"font-weight: 400;\"> offers a middle ground between pre-built simplicity and custom development flexibility. Start with a quality theme from the Shopify Theme Store, then modify it to fit your brand.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This approach significantly reduces development time and cost while still allowing substantial personalization. You benefit from the theme&#8217;s tested foundation while adapting visual design and features.<\/span><\/p>\n<h3><strong>Using Page Builders<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Page builder apps like Shogun, PageFly, and GemPages enable visual theme customization without code. These tools offer drag-and-drop interfaces for creating custom layouts, landing pages, and product pages.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Page builders suit merchants who need customization but lack development resources. However, they add monthly subscription costs and can impact performance if not optimized properly.<\/span><\/p>\n<h3><strong>Hiring Development Agencies<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">For businesses without in-house development teams,<\/span><a href=\"https:\/\/ecommerce.folio3.com\/shopify-development\/\"> <span style=\"font-weight: 400;\">Shopify development agencies<\/span><\/a><span style=\"font-weight: 400;\"> handle the entire theme creation process. They bring expertise, established workflows, and quality assurance processes that prevent common mistakes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Agency development costs more upfront but often proves more cost-effective than failed DIY attempts or extended internal development timelines.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Alternative<\/b><\/td>\n<td><b>Pros<\/b><\/td>\n<td><b>Cons<\/b><\/td>\n<td><b>Ideal Scenario<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Theme Customization<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Faster launch, tested foundation, lower cost<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Limited by the base theme structure<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Moderate customization needs<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Page Builders<\/span><\/td>\n<td><span style=\"font-weight: 400;\">No coding required, visual interface<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Subscription costs, performance impact<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Non-technical teams, frequent changes<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Development Agency<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Professional quality, faster delivery<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Higher cost, external dependency<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Complex requirements, tight timelines<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><strong>Maintaining and Updating Your Custom Theme<\/strong><\/h2>\n<h3><strong>Regular Updates<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Shopify continuously updates its platform with new features, security patches, and improvements. Your custom theme needs regular maintenance to remain compatible and secure.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Schedule quarterly reviews to assess theme performance, fix bugs, and implement platform updates. Monitor Shopify&#8217;s changelog for breaking changes that might affect your theme.<\/span><\/p>\n<h3><strong>Feature Additions<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">As your business evolves, your theme must adapt. Plan for iterative improvements rather than massive overhauls. Add features based on customer feedback and analytics data showing actual usage patterns.<\/span><\/p>\n<h3><strong>Performance Monitoring<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Track Core Web Vitals, conversion rates, and page load times continuously. Set up alerts for performance degradation so you can address issues before they impact sales.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Use A\/B testing to validate design and functional changes before rolling them out store-wide. Data-driven decisions prevent assumptions from harming user experience.<\/span><\/p>\n<h2><strong>Key Takeaways<\/strong><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Custom Shopify theme development provides unmatched flexibility and brand differentiation, but requires significant technical expertise and time investment.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Shopify CLI, Liquid templating knowledge, and Online Store 2.0 architecture understanding form the foundation of modern theme development.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Following structured development processes\u2014from requirements gathering through testing and deployment\u2014prevents costly mistakes and rework.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Performance optimization, mobile-first design, and accessibility standards are non-negotiable for competitive custom themes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Alternative approaches like theme customization, page builders, or agency partnerships may better suit your budget, timeline, and technical capabilities.<\/span><\/li>\n<\/ul>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Building a custom Shopify theme from scratch empowers you to create a truly unique online store that reflects your brand and drives conversions. While custom Shopify theme development demands time, technical skill, and careful planning, the result is a tailored experience that pre-built themes simply cannot match.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The process\u2014from setting up your development environment to deploying your finished theme\u2014follows a structured path that balances creativity with technical best practices. Whether you develop a Shopify theme in-house or partner with experienced developers, understanding this process ensures better outcomes and more informed decisions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ready to build a Shopify theme that sets your store apart? Our team at Folio3 specializes in <a href=\"https:\/\/ecommerce.folio3.com\/shopify-development\/theme-development\/\">custom Shopify theme development<\/a> that combines technical excellence with conversion-focused design.<\/span> <a href=\"https:\/\/ecommerce.folio3.com\/contact-us\/?swcfpc=1\"><span style=\"font-weight: 400;\">Contact our Shopify experts<\/span><\/a><span style=\"font-weight: 400;\"> to discuss your project and discover how custom theme development can transform your online store.<\/span><!--more--><\/p>\n<h2><strong>Frequently Asked Questions<\/strong><\/h2>\n<h3><strong>How Long Does It Take to Build a Custom Shopify Theme?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">6-12 weeks for a complete build. Simple themes take 4-6 weeks, complex stores with advanced features extend to 16+ weeks. Timeline includes requirements, design, development, testing, and deployment.<\/span><\/p>\n<h3><strong>What Programming Languages Are Required for Shopify Theme Development?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Liquid (Shopify&#8217;s templating language), HTML5, CSS3, and JavaScript. JSON for <a href=\"https:\/\/ecommerce.folio3.com\/blog\/shopify-webhook-api-configuration\/\">Online Store 2.0 configuration<\/a>, Git for version control, and command-line skills for Shopify CLI are also needed.<\/span><\/p>\n<h3><strong>Can I Modify a Pre-Built Theme Instead of Building From Scratch?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Yes. Customizing existing themes is more practical and cost-effective. You can significantly modify pre-built themes to match your brand while keeping their tested foundation.<\/span><\/p>\n<h3><strong>How Much Does Custom Shopify Theme Development Cost?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">$15,000 to $50,000+ for professional custom development. Simple customizations cost $1,000-$5,000. Enterprise themes with extensive functionality exceed $100,000. DIY <a href=\"https:\/\/ecommerce.folio3.com\/blog\/shopify-automation\/\">saves money but requires significant time<\/a> and technical knowledge.<\/span><\/p>\n<h3><strong>Do I Need Shopify Plus for Custom Theme Development?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">No. Custom themes work on all Shopify plans. <a href=\"https:\/\/ecommerce.folio3.com\/blog\/shopify-plus-features\/\">Shopify Plus offers additional features<\/a> like checkout customization, but standard plans provide full theme development capabilities, including Online Store 2.0 features.<\/span><\/p>\n<h3><strong>How Do I Test My Custom Theme Before Launch?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Use a development store for safe testing. Test across browsers (Chrome, Safari, Firefox, Edge), devices (mobile, tablet, desktop), and scenarios (empty cart, guest checkout). Test orders and Lighthouse audits.<\/span><\/p>\n<h3><strong>What&#8217;s the Difference Between Theme Kit and Shopify CLI?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Shopify CLI is the modern tool that replaced Theme Kit in 2021. CLI offers better performance, hot reloading, and seamless Online Store 2.0 integration. Use CLI for all new development.<\/span><\/p>\n<h3><strong>Can Custom Themes Work With Shopify Apps?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Yes. Custom themes support apps through theme app extensions and traditional embeds. Online Store 2.0&#8217;s app blocks enable cleaner integration. Plan designated areas for app content during development.<\/span><\/p>\n<h3><strong>How Often Should I Update My Custom Shopify Theme?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Quarterly reviews maintain platform compatibility and fix bugs. Monitor Shopify&#8217;s changelog for breaking changes requiring immediate attention. Add features based on business needs, not arbitrary schedules.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your Shopify store&#8217;s theme is the foundation of your brand&#8217;s online presence. While pre-built themes offer convenience, custom Shopify theme development delivers the unique look, functionality, and competitive edge your business needs.\u00a0 If you&#8217;re ready to build a Shopify theme that truly reflects your brand identity and drives conversions, this guide walks you through the<\/p>\n","protected":false},"author":1,"featured_media":19427,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[29],"tags":[],"class_list":{"0":"post-8896","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-shopify"},"acf":[],"featured_image_data":{"src":"https:\/\/ecommerce.folio3.com\/blog\/wp-content\/uploads\/2022\/06\/How-to-Build-a-Custom-Shopify-Theme-from-Scratch-1.jpg","alt":"How to Build a Custom Shopify Theme from Scratch","caption":""},"_links":{"self":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/8896"}],"collection":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/comments?post=8896"}],"version-history":[{"count":0,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/8896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media\/19427"}],"wp:attachment":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media?parent=8896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/categories?post=8896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/tags?post=8896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}