Dawn

<!DOCTYPE html> <html class="no-js" lang="EN"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://shopify.dev/themes/tools/dawn","20211030135608","https://web.archive.org/","web","/_static/", "1635602168"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://web.archive.org/web/20211030135608/https://cdn.shopify.com/"/> <link href="https://web.archive.org/web/20211030135608/https://fonts.googleapis.com/" rel="preconnect" crossorigin> <link rel="stylesheet" href="https://web.archive.org/web/20211030135608cs_/https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700;800&display=swap"/> <link rel="shortcut icon" type="image/png" href="https://web.archive.org/web/20211030135608im_/https://cdn.shopify.com/static/shopify-favicon.png"/> <title>Dawn</title> <meta name="description" content="Learn about Dawn, a Shopify theme that you can use as a starting point to build your own theme."/> <link rel="canonical" href="https://web.archive.org/web/20211030135608/https://shopify.dev/themes/tools/dawn"> <script nonce="">document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js')</script> <link rel="stylesheet" media="screen" href="https://web.archive.org/web/20211030135608cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/application-2302f23df2cd8c40b46b90b6a45507b310388ad6491c84f9f24628ddacad3c72.css"/> <link rel="stylesheet" media="print" href="https://web.archive.org/web/20211030135608cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/print-90e212101a38319ae3b49b0c86a4cc98b5c2a51472b935936367eb2e3ec1275f.css"/> <link rel="stylesheet" media="screen" href="https://web.archive.org/web/20211030135608cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manifests/docs-79d1fec1aad9eed4ded647429494360132cc7e7915282a528b27350d3915e554.css"/> <link href="https://web.archive.org/web/20211030135608cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/manifests/feedback-baaddeba659c77298878772447140b49af806d1faba81fcd0b1cb3848b06a44c.css" rel="stylesheet"/> <link href="https://web.archive.org/web/20211030135608cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/manifests/docs-aeaf5c0db300b964857383091050b45e58a9cb0fe71cc44575629e7f0d01bc65.css" rel="stylesheet"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="Shopify"/> <meta property="og:title" content="Dawn"/> <meta property="og:description" content="Learn about Dawn, a Shopify theme that you can use as a starting point to build your own theme."/> <meta property="og:image" content="https://web.archive.org/web/20211030135608im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/social-share-24de3afa0326f705b84a0a98714acc192611e5a21ade3b7c8f2bd12ba7d1457f.jpg"/> <meta property="og:url" content="https://web.archive.org/web/20211030135608/https://shopify.dev/themes/tools/dawn"/> <meta property="twitter:card" content="summary_large_image"/> <meta property="twitter:site" content="@Shopify"/> <meta property="twitter:account_id" content="17136315"/> <meta property="twitter:title" content="Dawn"/> <meta property="twitter:description" content="Learn about Dawn, a Shopify theme that you can use as a starting point to build your own theme."/> <meta property="twitter:image" content="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/social-share-24de3afa0326f705b84a0a98714acc192611e5a21ade3b7c8f2bd12ba7d1457f.jpg"/> <meta name="“facebook-domain-verification”" content="“qv0mhbzsog35yr5kbv40mmbu65worz”"> <script id="TrekkieScript" type="text/javascript"> (function(){ var config = { 'Trekkie': { 'appName': 'brochure' }, 'Session Attribution': {}, 'CrossDomainTracking': {} }; var trekkie_version = '2021.05.04'; var analytics = window.analytics = window.analytics || []; if (analytics.integrations) { return; } analytics.methods = [ 'identify', 'page', 'ready', 'track', ]; analytics.factory = function(method) { return function() { var args = Array.prototype.slice.call(arguments); args.unshift(method); analytics.push(args); return analytics; }; }; for (var i = 0; i < analytics.methods.length; i++) { var key = analytics.methods[i]; analytics[key] = analytics.factory(key); } analytics.load = function(config) { analytics.config = config; var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://web.archive.org/web/20211030135608/https://cdn.shopify.com/s/javascripts/tricorder/trekkie.' + config.Trekkie.appName + '.min.js?v=' + trekkie_version; var first = document.getElementsByTagName('script')[0]; first.parentNode.insertBefore(script, first); }; analytics.load(config); analytics.page(); })(); </script> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://web.archive.org/web/20211030135608/https://www.google-analytics.com/analytics.js','_gaUTracker'); var _gaUTrackerOptions = {}; analytics.ready(function() { _gaUTrackerOptions.clientId = analytics.user().traits().uniqToken; _gaUTracker('create', 'UA-82702-49', _gaUTrackerOptions); _gaUTracker('set', 'transport', 'beacon'); _gaUTracker('require', 'displayfeatures'); _gaUTracker('send', 'pageview'); }); </script> </head> <body class="page--themes-markdown shopify-sans-supported-lang"> <div id="GlobalIconSymbols"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="search-magnify"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M10.192 10.192A3 3 0 115.95 5.95a3 3 0 014.242 4.242zm.64 2.048a5.002 5.002 0 01-6.296-7.704 5 5 0 017.704 6.297c.025.02.05.043.074.066l4.95 4.95a1 1 0 11-1.415 1.415l-4.95-4.95a.974.974 0 01-.066-.074z" clip-rule="evenodd"/></svg></symbol><symbol id="up-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 20 21"><g filter="url(#filter0_d)"><rect width="20" height="20" fill="#FAFBFB" rx="4"/><path fill="#5C5F62" d="M9.462 14V7.76c0-.176.008-.352.024-.528l.036-.432h-.12c-.08.12-.3.336-.66.648l-2.22 1.896v-1.26l3.492-2.964 3.468 2.952v1.26L11.25 7.436a8.247 8.247 0 01-.432-.396 6.984 6.984 0 01-.216-.24h-.12c.016.104.028.248.036.432.016.176.024.352.024.528V14h-1.08z"/><rect width="19" height="19" x=".5" y=".5" stroke="#6D7175" rx="3.5"/></g><defs><filter id="filter0_d" width="20" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg></symbol><symbol id="down-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 20 21"><g filter="url(#filter0_d)"><rect width="20" height="20" fill="#FAFBFB" rx="4"/><path fill="#5C5F62" d="M9.99 14.12l-3.468-2.952v-1.26l2.232 1.896c.176.152.32.284.432.396.112.112.184.192.216.24h.12l-.036-.42a6.234 6.234 0 01-.024-.54V5.24h1.08v6.24c0 .176-.008.356-.024.54a4.13 4.13 0 01-.036.42h.12c.08-.12.3-.336.66-.648l2.22-1.896v1.26L9.99 14.12z"/><rect width="19" height="19" x=".5" y=".5" stroke="#6D7175" rx="3.5"/></g><defs><filter id="filter0_d" width="20" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg></symbol><symbol id="enter-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 48 21"><filter id="a" width="48" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><g filter="url(#a)"><rect width="48" height="20" fill="#fafbfb" rx="4"/><path fill="#5c5f62" d="M7.14 14V5.24h5.148v1.152H8.412v2.484h3.456v1.14H8.412v2.832h3.876V14zm7.075 0V7.4h1.284v1.26h.012c.064-.432.248-.768.552-1.008.304-.248.704-.372 1.2-.372.656 0 1.18.212 1.572.636.392.416.588.98.588 1.692V14h-1.296V9.752c0-.432-.116-.764-.348-.996s-.548-.348-.948-.348c-.408 0-.732.124-.972.372-.232.248-.348.6-.348 1.056V14zm10.507 0c-.6 0-1.068-.164-1.404-.492s-.504-.788-.504-1.38V8.576H20.99V7.4h1.824V5.54h1.296V7.4h2.592v1.176H24.11v3.552c0 .464.224.696.672.696h1.8V14zm6.476.12c-.536 0-1.004-.104-1.404-.312a2.358 2.358 0 01-.936-.9c-.216-.384-.324-.832-.324-1.344V9.836c0-.512.108-.96.324-1.344.224-.384.536-.68.936-.888.4-.216.868-.324 1.404-.324.544 0 1.016.108 1.416.324.4.208.708.504.924.888.224.384.336.832.336 1.344v1.176h-4.092v.552c0 1 .476 1.5 1.428 1.5.776 0 1.224-.26 1.344-.78h1.284a2 2 0 01-.864 1.344c-.48.328-1.072.492-1.776.492zm-1.416-4.284v.3l2.832-.012v-.3c0-.488-.12-.86-.36-1.116-.24-.264-.592-.396-1.056-.396s-.816.132-1.056.396-.36.64-.36 1.128zM36.017 14V7.4h1.248v1.224c.208-.896.8-1.344 1.776-1.344.704 0 1.26.22 1.668.66.416.432.624 1.028.624 1.788v.444h-1.332v-.336c0-.472-.12-.832-.36-1.08-.232-.256-.56-.384-.984-.384s-.756.128-.996.384c-.232.256-.348.616-.348 1.08V14z"/><rect width="47" height="19" x=".5" y=".5" stroke="#6d7175" rx="3.5"/></g></svg></symbol><symbol id="escape-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 34 21"><filter id="a" width="34" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><g filter="url(#a)"><rect width="34" height="20" fill="#fafbfb" rx="4"/><path fill="#5c5f62" d="M7.335 14V5.24h5.148v1.152H8.607v2.484h3.456v1.14H8.607v2.832h3.876V14zm9.44.108c-.72 0-1.297-.164-1.729-.492s-.668-.772-.708-1.332h1.296c.032.224.148.4.348.528s.464.192.792.192h.516c.392 0 .688-.076.888-.228.2-.16.3-.372.3-.636 0-.488-.356-.788-1.068-.9l-.852-.132c-.704-.104-1.224-.304-1.56-.6-.328-.296-.492-.732-.492-1.308 0-.6.196-1.068.588-1.404.4-.336.988-.504 1.764-.504h.456c.688 0 1.236.16 1.644.48.416.312.652.732.708 1.26H18.37a.65.65 0 00-.324-.468c-.184-.12-.428-.18-.732-.18h-.456c-.376 0-.652.072-.828.216-.168.136-.252.34-.252.612 0 .24.072.42.216.54.152.12.392.204.72.252l.876.132c.744.12 1.288.332 1.632.636.352.304.528.748.528 1.332 0 .632-.208 1.124-.624 1.476-.408.352-1.02.528-1.836.528zm7.47.012c-.823 0-1.483-.228-1.98-.684-.487-.456-.731-1.08-.731-1.872V9.836c0-.792.244-1.416.732-1.872.496-.456 1.156-.684 1.98-.684.792 0 1.428.208 1.908.624s.732.984.756 1.704h-1.296c-.024-.376-.156-.668-.396-.876s-.564-.312-.972-.312c-.44 0-.788.124-1.044.372-.248.24-.372.584-.372 1.032v1.74c0 .456.124.808.372 1.056.256.24.604.36 1.044.36.408 0 .732-.104.972-.312s.372-.504.396-.888h1.296c-.024.72-.276 1.292-.756 1.716-.48.416-1.116.624-1.908.624z"/><rect width="33" height="19" x=".5" y=".5" stroke="#6d7175" rx="3.5"/></g></svg></symbol><symbol id="sidebar-collapse"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 2"><path d="M0 .75a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-.5z"/></svg></symbol><symbol id="sidebar-expand"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"><path fill-rule="evenodd" d="M3.75 0a.5.5 0 00-.5.5v2.75H.5a.5.5 0 00-.5.5v.5a.5.5 0 00.5.5h2.75V7.5a.5.5 0 00.5.5h.5a.5.5 0 00.5-.5V4.75H7.5a.5.5 0 00.5-.5v-.5a.5.5 0 00-.5-.5H4.75V.5a.5.5 0 00-.5-.5h-.5z" clip-rule="evenodd"/></svg></symbol><symbol id="modules-mobile-hamburger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="M19 11H1a1 1 0 110-2h18a1 1 0 110 2zm0-7H1a1 1 0 110-2h18a1 1 0 110 2zm0 14H1a1 1 0 110-2h18a1 1 0 110 2z"/></svg></symbol><symbol id="chevron-down"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 6"><path d="M8.586 0H1.414C.524 0 .077 1.077.707 1.707l3.586 3.586a1 1 0 001.414 0l3.586-3.586C9.923 1.077 9.477 0 8.586 0z"/></svg></symbol><symbol id="modules-cancel"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="M11.414 10l6.293-6.293a1 1 0 00-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 001.414 1.414L10 11.414l6.293 6.293a.996.996 0 001.414 0 1 1 0 000-1.414L11.414 10z"/></svg></symbol><symbol id="modules-caret-down"><svg xmlns="http://www.w3.org/2000/svg" baseprofile="tiny" viewbox="0 0 10.289 6.563"><path d="M5.212 6.563L0 1.423 1.404 0l3.788 3.735L8.865.01l1.424 1.404"/></svg></symbol></svg></div> <div class="signup-form-wrapper signup--hidden " data-define="{form_0: new SignupForm(this)}"> <form class="marketing-form signup-form stateful-form" novalidate="novalidate" autocomplete="off" data-namespace="form_0" data-hidden-fields-namespace="hiddenFields_0" data-bind-event-submit="form_0.handleSubmit(this, event)" action="https://web.archive.org/web/20211030135608/https://accounts.shopify.com/store-signup/setup" accept-charset="UTF-8" method="post"> <div data-define="{ email0: new StatefulField( 'email', form_0, this, { required: true, validate: true, live: false, showHint: true, showError: true }, {}, 'form_0' )} " class="stateful-field email "><div data-context="email0"><label data-bind-class="{'js-has-error': state.error,'js-is-filled': state.filled || state.value.length > 0,'js-has-hint': !state.error && state.hint}" class="marketing-input-wrapper"><span class="marketing-label marketing-label--in-field marketing-label--floating">Email address</span><input placeholder="Email address" aria-describedby="MessageId_fe3f" name="signup[email]" type="email" autocomplete="email" data-bind="state.value" data-bind-event-blur="ShopifyMarketing.context.form_0.handleFieldBlur(ShopifyMarketing.context.email0)" data-bind-event-keyup="ShopifyMarketing.context.form_0.handleFieldKeyup(event, ShopifyMarketing.context.email0)" class="marketing-input marketing-input--floating" id="0_signup_email"/></label><span class="marketing-form__messages" id="MessageId_fe3f"><span class="suggest hide" data-bind-unsafe-html="displayHint()" data-bind-show="!state.error && state.hint"></span><span class="error hide" data-bind="displayError()" data-bind-show="state.error == true"></span></span></div></div> <div data-define="{ password0: new StatefulField( 'password', form_0, this, { required: true, validate: true, live: false, showHint: false, showError: true }, {}, 'form_0' )} " class="stateful-field password "><div data-context="password0"><label data-bind-class="{'js-has-error': state.error,'js-is-filled': state.filled || state.value.length > 0,'js-has-hint': !state.error && state.hint}" class="marketing-input-wrapper"><span class="marketing-label marketing-label--in-field marketing-label--floating">Password</span><input placeholder="Password" aria-describedby="MessageId_b65f" name="signup[password]" type="password" autocomplete="new-password" data-bind="state.value" data-bind-event-blur="ShopifyMarketing.context.form_0.handleFieldBlur(ShopifyMarketing.context.password0)" data-bind-event-keyup="null" class="marketing-input marketing-input--floating" id="0_signup_password"/></label><span class="marketing-form__messages" id="MessageId_b65f"><span class="suggest hide" data-bind-unsafe-html="displayHint()" data-bind-show="!state.error && state.hint"></span><span class="error hide" data-bind="displayError()" data-bind-show="state.error == true"></span></span></div></div> <div data-define="{ shop_name0: new StatefulField( 'shop_name', form_0, this, { required: true, validate: true, live: true, showHint: false, showError: true }, {}, 'form_0' )} " class="stateful-field shop_name "><div data-context="shop_name0"><label data-bind-class="{ 'js-has-error': state.error == true, 'js-is-pending': state.pending == true, 'js-is-focused': state.focus == true, 'js-is-filled': state.filled == true || state.value.length > 0, }" class="marketing-input-wrapper shop_name"><span class="marketing-label marketing-label--in-field marketing-label--floating">Your store name</span><input placeholder="Your store name" aria-describedby="MessageId_c032" name="signup[shop_name]" type="text" autocomplete="off" data-bind="state.value" data-bind-event-blur="ShopifyMarketing.context.form_0.handleFieldBlur(ShopifyMarketing.context.shop_name0)" data-bind-event-keyup="ShopifyMarketing.context.form_0.handleFieldKeyup(event, ShopifyMarketing.context.shop_name0)" class="marketing-input marketing-input--floating" id="0_signup_shop_name"/></label><span class="marketing-form__messages" id="MessageId_c032"><span class="suggest hide" data-bind-unsafe-html="displayHint()" data-bind-show="!state.error && state.hint"></span><span class="error hide" data-bind="displayError()" data-bind-show="state.error == true && state.pending == false" data-bind-unsafe-html="displayError()"></span></span></div></div> <div data-define="{hiddenFields_0: new HiddenFields({ source: "", source_url: "", source_url_referer: "", signup_code: "", signup_page: "", signup_page_referer: "", signup_types: [], theme: "", selected_app: "", selected_plan: "", domain_to_connect: "", }, this)}"> <div data-context="hiddenFields_0"> <input type="hidden" name="ref" value=""> <input type="hidden" name="language" value="en"> <input type="hidden" name="locale" value="en"> <input type="hidden" name="_y" data-bind="fields.y"> <input type="hidden" name="ssid" data-bind="fields.ssid"> <input type="hidden" name="source" data-bind="fields.source"> <input type="hidden" name="source_url" data-bind="fields.source_url"> <input type="hidden" name="source_url_referer" data-bind="fields.source_url_referer"> <input type="hidden" name="signup_code" data-bind="fields.signup_code"> <input type="hidden" name="signup_page" data-bind="fields.signup_page"> <input type="hidden" name="signup_page_referer" data-bind="fields.signup_page_referer"> <input type="hidden" name="domain_to_connect" data-bind="fields.domain_to_connect"> <input type="hidden" name="signup_types[]" data-bind-disabled="fields.signup_types" data-bind="fields.signup_type"> <input type="hidden" name="extra[selected_theme]" data-bind="fields.theme"> <input type="hidden" name="extra[selected_app]" data-bind="fields.selected_app"> <input type="hidden" name="extra[selected_plan]" data-bind="fields.selected_plan"> </div> </div> <div class=" cta_wrapper"> <button class="marketing-button marketing-form__button " name="button" data-bind-disabled="form_0.pending == true" type="submit">Create your store</button> </div> </form> </div> <div id="Announcements"></div> <header id="SiteNavContainer" class="site-nav-container is-sticky"> <div class="marketing-nav-wrapper marketing-nav-wrapper--sidebar"> <a class="in-page-link skip-to-main visuallyhidden focusable" data-ga-event="Main Nav" data-ga-action="Skip to content" data-trekkie-event="Main Nav" data-trekkie-action="Skip to content" data-trekkie-id="Main Nav Skip to content" href="#Main">Skip to Content</a> <nav class="marketing-nav--skin-light marketing-nav marketing-nav--primary" id="ShopifyMainNav" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <div class="marketing-nav--mobile-wrapper"> <button name="button" type="button" class="marketing-nav__hamburger hide--expanded-nav js-drawer-open-right" aria-haspopup="dialog" aria-expanded="false"> <svg class="icon" aria-labelledby="icon-modules-mobile-hamburger-79-title" role="img"><title id="icon-modules-mobile-hamburger-79-title">Open Main Navigation</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#modules-mobile-hamburger"/> </svg> </button> <div class="marketing-nav__logo "> <a href="/web/20211030135608/https://shopify.dev/" class="marketing-nav__logo__shopify" data-ga-event="Main Nav" data-ga-action="Logo" data-trekkie-event="Main Nav" data-trekkie-action="Logo" data-trekkie-id="Main Nav Logo"> <div class="shopify-logo"></div> </a> </div> </div> <div class="marketing-nav__container grid--main"> <ul class="marketing-nav__items display--expanded-nav admin-api-next"> <li><a href="/web/20211030135608/https://shopify.dev/apps" class="marketing-nav__item marketing-nav__item--primary" itemprop="name">Apps</a></li><li><a href="/web/20211030135608/https://shopify.dev/themes" class="marketing-nav__item marketing-nav__item--active marketing-nav__item--primary drawer__item--active " itemprop="name" aria-current="page">Themes</a></li><li><a href="/web/20211030135608/https://shopify.dev/custom-storefronts" class="marketing-nav__item marketing-nav__item--primary" itemprop="name">Custom storefronts</a></li><li><div class="popover-wrapper js-popover-dropdown popover-wrapper--dropdown" data-position="bottom" data-align="left"><button type="button" class="popover__trigger marketing-nav__item marketing-nav__item--primary" url="/api" itemprop="name">APIs and references<svg class="icon marketing-nav__arrow" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#chevron-down"/> </svg></button><div class="popover"><div class="popover__content"><ul class="popover__list"><li><p class="popover__description marketing-nav__item marketing-nav__item--child">Apps</p><ul class="popover__list"><li><a href="/web/20211030135608/https://shopify.dev/api/admin-graphql" class="marketing-nav__item marketing-nav__item--child" itemprop="name">GraphQL Admin API</a></li><li><a href="/web/20211030135608/https://shopify.dev/api/admin-rest" class="marketing-nav__item marketing-nav__item--child" itemprop="name">REST Admin API</a></li></ul></li><li><p class="popover__description marketing-nav__item marketing-nav__item--child">Themes</p><ul class="popover__list"><li><a href="/web/20211030135608/https://shopify.dev/api/liquid" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Liquid</a></li><li><a href="/web/20211030135608/https://shopify.dev/api/ajax" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Ajax API</a></li></ul></li><li><p class="popover__description marketing-nav__item marketing-nav__item--child">Custom storefronts</p><ul class="popover__list"><li><a href="/web/20211030135608/https://shopify.dev/api/storefront" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Storefront API</a></li></ul></li><li><ul class="popover__list"><li><a href="/web/20211030135608/https://shopify.dev/api" class="marketing-nav__item marketing-nav__item--child marketing-nav__item--separated" itemprop="name">View all</a></li></ul></li></ul></div></div></div></li> </ul> <div class="search-container" id="searchContainer"> <form id="searchForm" class="search-form" action="/web/20211030135608/https://shopify.dev/search" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="G1jYIBjmn_DvO0hO7pqqDwjtyMTUH_n7s0o1vn78GDab9g-2HMfn7jcmsDFAH0SoUeQiV9vPAeWYTPHRxENkIQ"/> <input type="hidden" name="authenticity_token" id="authenticity_token" value="OuVIJJvDGZLR8LOp9WPn96QnmONiwGL6a1RwYW7qHCLg-MqKuYfS4hFR2uAoL6ubDFcg4m1KE1yjIQhURTWXQQ"/> <label class="marketing-input-wrapper search-input-wrapper"><span class="marketing-label marketing-label--hidden visuallyhidden">Search the documentation</span><input aria-describedby="MessageId_8b80" placeholder="Search" name="query" class="marketing-input search-input" id="searchInput" autocomplete="off" required="required" type="search"/></label><span class="marketing-form__messages" id="MessageId_8b80"></span> <input name="search_uuid" id="searchUUID" value="200a4286-733c-417f-be07-e94e26c631db" type="hidden"/> <input id="openSearchResultPath" value="/search/result" type="hidden" name="search[open_search_result_path]"/> <button name="button" type="submit" id="searchSubmitButton" class="search-submit-button" aria-label="Search Submit button"> <svg class="icon search-submit-button__icon" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#search-magnify"/> </svg> </button> <div class="search-launcher" aria-label="Forward slash to launch search"></div> <div id="searchSuggestionsContainer" class="search-suggestions-container search-suggestions-container--is-hidden"> <div class="search-suggestions-instructions hide--mobile" id="searchSuggestionsInstruction" aria-hidden="true"> <span class="search-instruction"> Press <svg class="icon search-instruction__icon search-instruction__icon--up" aria-labelledby="icon-up-key-2-title" role="img"><title id="icon-up-key-2-title">Up</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#up-key"/> </svg><svg class="icon search-instruction__icon" aria-labelledby="icon-down-key-3-title" role="img"><title id="icon-down-key-3-title">Down</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#down-key"/> </svg> to navigate, <svg class="icon icon--size-large search-instruction__icon search-instruction__icon--enter" aria-labelledby="icon-enter-key-4-title" role="img"><title id="icon-enter-key-4-title">enter</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#enter-key"/> </svg> to select, <svg class="icon icon--size-large search-instruction__icon search-instruction__icon--escape" aria-labelledby="icon-escape-key-5-title" role="img"><title id="icon-escape-key-5-title">esc</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#escape-key"/> </svg> to dismiss </span> </div> <div id="searchSuggestionsIllustration" class="search-suggestions-illustration search-suggestions-illustration--is-hidden"> <span class="image lazyload-image search-no-results-image" style="max-width: 138px; max-height: 138px;"><span class="lazyload-image__placeholder" style="padding-bottom: 100.0%"><img alt="No search results" data-sizes="100vw" data-srcset="https://web.archive.org/web/20211030135608im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-small-ee5ac8bd6c3f5e1a928fe9719c3623a0e2422eabee4f9cf9ed4f3161487b7c85.png 1x, https://web.archive.org/web/20211030135608im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-large-2df0a9fcac1970320ac16ca99c05aabd45e68b68899e00ab2ad79a6528ad8cd2.png 2x" class="lazyload"/><noscript><img sizes="100vw" srcset="https://web.archive.org/web/20211030135608im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-small-ee5ac8bd6c3f5e1a928fe9719c3623a0e2422eabee4f9cf9ed4f3161487b7c85.png 1x, https://web.archive.org/web/20211030135608im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-large-2df0a9fcac1970320ac16ca99c05aabd45e68b68899e00ab2ad79a6528ad8cd2.png 2x" alt="No search results"/></noscript></span></span> </div></div></form> <button type="button" class="search-mobile-button" id="searchMobileButton"> <svg class="icon search-mobile-button__icon" aria-labelledby="icon-search-magnify-6-title" role="img"><title id="icon-search-magnify-6-title">Search</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#search-magnify"/> </svg> </button> </div> <ul class="marketing-nav__items marketing-nav__user display--expanded-nav admin-api-next"> <li class="theme-mode-toggle-container"> <button name="button" type="button" id="theme-mode-toggle" class="theme-mode-button"></button> </li> <li><a href="https://web.archive.org/web/20211030135608/https://partners.shopify.com/organizations" class="marketing-nav__item marketing-nav__item--user" itemprop="name">Log in</a></li><li><a href="https://web.archive.org/web/20211030135608/https://partners.shopify.com/signup/developer" class="marketing-nav__item marketing-nav__item--user" itemprop="name" data-event-page="header" data-event-category="link" data-event-action="click-signup-link" data-event-label="sign-up" data-fbq-event="Lead" data-ga-form-success-event="Partner signup email form from developer site" data-ga-event-page="/themes/tools/dawn">Sign up</a></li> </ul> </div> </nav> </div> <div id="NavDrawer" class="drawer drawer--left" role="dialog" aria-modal="true" aria-labelledby="DrawerTitle"> <div class="drawer__inner-wrapper"> <div class="drawer__top drawer__inner-top-wrapper"> <div class="drawer__inner-top"> <button name="button" type="button" class="drawer__close-button js-drawer-close"> <svg class="icon" aria-labelledby="icon-modules-cancel-81-title" role="img"><title id="icon-modules-cancel-81-title">Close Main Navigation</title> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#modules-cancel"/> </svg> </button> <div class="marketing-nav__logo"> <a href="/web/20211030135608/https://shopify.dev/" class="marketing-nav__logo__shopify"> <div class="shopify-logo"></div> </a> </div> </div> </div> <div class="drawer__inner-bottom"> <nav id="DrawerTitle" aria-label="Main Navigation"> <div class="drawer-navigation"> <div class="accordion-item drawer-navigation__item"> <button class="accordion-link drawer-navigation__link"> <span class="drawer-navigation__link-content"> Menu </span> <svg class="icon drawer-navigation__caret" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#modules-caret-down"/> </svg> </button> <div class="accordion-content drawer-navigation__content"> <ul> <li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/apps" class="drawer__item">Apps</a></li><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/themes" class="drawer__item drawer__item--active ">Themes</a></li><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/custom-storefronts" class="drawer__item">Custom storefronts</a></li><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api" class="drawer__item">APIs and references</a><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api/admin-graphql" class="drawer__item">GraphQL Admin API</a></li><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api/admin-rest" class="drawer__item">REST Admin API</a></li></ul></li><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api/liquid" class="drawer__item">Liquid</a></li><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api/ajax" class="drawer__item">Ajax API</a></li></ul></li><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api/storefront" class="drawer__item">Storefront API</a></li></ul></li><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211030135608/https://shopify.dev/api" class="drawer__item marketing-nav__item--separated">View all</a></li></ul></li></ul></li> </ul> </div> </div> </div> </nav> </div> </div> <div class="drawer-sidebar"> <nav class="sidebar"> <div class="sidebar-menu"> <section class="sidebar-group" aria-label="Build themes."> <ul class="sidebar-list"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes"><span>Themes</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Getting started</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/getting-started"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/getting-started/create"><span>Create a theme</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/getting-started/customize"><span>Customize a theme</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Architecture</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Layouts</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">checkout.liquid</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-3"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts/checkout-liquid"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts/checkout-liquid/customize-checkout"><span>Customize checkout.liquid</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts/checkout-liquid/checkout-css"><span>Checkout CSS</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Templates</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/json-templates"><span>JSON templates</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/article"><span>article</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/blog"><span>blog</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/cart"><span>cart</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/collection"><span>collection</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-account"><span>customers/account</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-activate-account"><span>customers/activate_account</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-addresses"><span>customers/addresses</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-login"><span>customers/login</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-order"><span>customers/order</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-register"><span>customers/register</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-reset-password"><span>customers/reset_password</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/gift-card-liquid"><span>gift_card.liquid</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/index-template"><span>index</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/list-collections"><span>list-collections</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/page"><span>page</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/password"><span>password</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/product"><span>product</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/robots-txt-liquid"><span>robots.txt.liquid</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/search"><span>search</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/404"><span>404</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Sections</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections/section-schema"><span>Section schema</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections/section-assets"><span>Section assets</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor"><span>Integrate with the theme editor</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Config</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/config"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/config/settings-schema-json"><span>settings_schema.json</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/config/settings-data-json"><span>settings_data.json</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Locales</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/locales"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/locales/schema-locale-files"><span>Schema locale files</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/locales/storefront-locale-files"><span>Storefront locale files</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Settings</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/input-settings"><span>Input settings</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/sidebar-settings"><span>Sidebar settings</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/fonts"><span>Fonts</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/deprecated-settings"><span>Deprecated settings</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item accordion-item--active"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Developer tools</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--active sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Shopify CLI</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/installation"><span>Installation</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/getting-started"><span>Getting started</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/core-commands"><span>Core commands</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/theme-commands"><span>Theme commands</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/troubleshooting"><span>Troubleshooting</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme Check</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/vscode"><span>Shopify Liquid VS Code extension</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/configuration"><span>Configuration</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/commands"><span>Commands</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Checks reference</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-3"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/app-block-valid-tags"><span>AppBlockValidTags</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-app-block-css"><span>AssetSizeAppBlockCSS</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-app-block-javascript"><span>AssetSizeAppBlockJavascript</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-css"><span>AssetSizeCSS</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-css-stylesheet-tag"><span>AssetSizeCSSStylesheetTag</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-javascript"><span>AssetSizeJavascript</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-url-filters"><span>AssetUrlFilters</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/content-for-header-modification"><span>ContentForHeaderModification</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/convert-include-to-render"><span>ConvertIncludeToRender</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/default-locale"><span>DefaultLocale</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/deprecate-bgsizes"><span>DeprecateBgsizes</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/deprecate-lazysizes"><span>DeprecateLazysizes</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/deprecated-filter"><span>DeprecatedFilter</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/html-parsing-error"><span>HtmlParsingError</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/img-lazy-loading"><span>ImgLazyLoading</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/img-width-and-height"><span>ImgWidthAndHeight</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/liquid-tag"><span>LiquidTag</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/matching-schema-translations"><span>MatchingSchemaTranslations</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/matching-translations"><span>MatchingTranslations</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/missing-enable-comment"><span>MissingEnableComment</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/missing-required-template-files"><span>MissingRequiredTemplateFiles</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/missing-template"><span>MissingTemplate</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/nested-snippet"><span>NestedSnippet</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/pagination-size"><span>PaginationSize</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/parser-blocking-javascript"><span>ParserBlockingJavaScript</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/parser-blocking-script-tag"><span>ParserBlockingScriptTag</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/remote-asset"><span>RemoteAsset</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/required-directories"><span>RequiredDirectories</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/required-layout-theme-object"><span>RequiredLayoutThemeObject</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/space-inside-braces"><span>SpaceInsideBraces</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/syntax-error"><span>SyntaxError</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/template-length"><span>TemplateLength</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/translation-key-exists"><span>TranslationKeyExists</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/undefined-object"><span>UndefinedObject</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/unknown-filter"><span>UnknownFilter</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/unused-assign"><span>UnusedAssign</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/unused-snippet"><span>UnusedSnippet</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/valid-html-translation"><span>ValidHTMLTranslation</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/valid-json"><span>ValidJson</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/valid-schema"><span>ValidSchema</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">GitHub integration</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/github"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/github/getting-started"><span>Getting started</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme Inspector</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-inspector"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-inspector/using-the-theme-inspector"><span>Optimizing themes using Theme Inspector</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/lighthouse-ci"><span>Lighthouse CI</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/online-editor"><span>Theme editor</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/code-editor"><span>Code editor</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme Kit</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/getting-started"><span>Getting started</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/access"><span>Access</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/command-reference"><span>Command reference</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/configuration-reference"><span>Configuration reference</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/troubleshooting"><span>Troubleshooting</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Development stores</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/development-stores"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/development-stores/transfer-development-stores"><span>Transfer a development store</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/collaborator-accounts"><span>Collaborator accounts</span></a> </div> </li> <li class="sidebar-item sidebar-item--active"> <div class="sidebar-item__inner-container"> <a class="sidebar-link sidebar-link--active" href="/web/20211030135608/https://shopify.dev/themes/tools/dawn"><span>Dawn</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Best practices</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/templates-sections-blocks"><span>Sections and blocks</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Performance</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/performance"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/performance/platform"><span>Platform</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/accessibility"><span>Accessibility</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Design</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/design"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/design/color-system"><span>Color system</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/merchant-stores"><span>Merchant stores</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/version-control"><span>Version control</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/file-transformation"><span>File transformation</span></a> </div> </li> </ul> </li> </ul> </section> <section class="sidebar-group" aria-label="Implement theme features."> <ul class="sidebar-list"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/apps/online-store"><span>Integrating apps</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Product merchandising</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/variants"><span>Product variants</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Product recommendations</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/recommendations"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/recommendations/show-product-recommendations"><span>Show product recommendations</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Media and images</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/media"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/media/support-media"><span>Support product media</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/media/media-ux"><span>Product media UX guidelines</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Pricing and payments</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/discounts"><span>Discounts</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Subscriptions</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/subscriptions"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/subscriptions/subscription-ux-guidelines"><span>Subscription UX guidelines</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/subscriptions/selling-plans"><span>Selling plan groups and selling plans</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/installments"><span>Shop Pay Installments</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/accelerated-checkout"><span>Accelerated checkout</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/unit-pricing"><span>Unit pricing</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/price-display-ux-guidelines"><span>Price display UX guidelines</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Delivery and fulfillment</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/delivery-fulfillment"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/delivery-fulfillment/pickup-availability"><span>Pickup availability</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Customer engagement</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement/email-consent"><span>Email consent</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement/additional-customer-information"><span>Additional customer information</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement/add-contact-form"><span>Add contact form</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Internationalization</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/internationalization"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/internationalization/multiple-currencies-languages"><span>Support multiple currencies and languages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/internationalization/country-language-ux"><span>Country and language selector UX guidelines</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Site navigation and search</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/navigation"><span>Navigation</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Storefront search</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/search"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/search/predictive-search"><span>Predictive search</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/search/predictive-search-ux"><span>Predictive search UX guidelines</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Filtering</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/filtering"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/filtering/filtering-ux"><span>Storefront filtering UX guidelines</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/filtering/tag-filtering"><span>Tag filtering</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">SEO</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo/metadata"><span>Metadata</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo/hreflang"><span>hreflang tags</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo/robots-txt"><span>robots.txt</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Trust and security</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security/security-badges"><span>Security badges</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security/captcha"><span>Captcha</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security/cookie-banner"><span>Cookie compliance</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/migration"><span>Migrating to Online Store 2.0</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/troubleshooting"><span>Troubleshooting</span></a> </div> </li> </ul> </section> <section class="sidebar-group" aria-label="Sell themes."> <ul class="sidebar-list"> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Shopify Theme Store</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/requirements"><span>Requirements</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Review process</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/review-process/submit-theme"><span>Submitting a theme</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/review-process/listings"><span>Theme Store listings</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme success</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/updates"><span>Updating your theme</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/managing-theme-reviews"><span>Managing theme reviews</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/brand-assets"><span>Brand asset guidance</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/prohibited-actions"><span>Prohibited actions</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/remove-theme"><span>Removing a theme</span></a> </div> </li> </ul> </li> </ul> </li> </ul> </section> </div> </nav> <div id="react-drawer-sidebar"></div> <ul class="drawer__inner-bottom user-links"> <li><a href="https://web.archive.org/web/20211030135608/https://partners.shopify.com/organizations" class="drawer__item">Log in</a></li><li><a href="https://web.archive.org/web/20211030135608/https://partners.shopify.com/signup/developer" class="drawer__item" data-event-page="header" data-event-category="link" data-event-action="click-signup-link" data-event-label="sign-up" data-fbq-event="Lead" data-ga-form-success-event="Partner signup email form from developer site" data-ga-event-page="/themes/tools/dawn">Sign up</a></li> </ul> </div> </div> </header> <div hidden="hidden"><span id="NewWindow">Opens in a new window</span><span id="ExternalSite">Opens an external site</span><span id="NewWindowExternalSite">Opens an external site in a new window</span></div> <div id="PageContainer"> <div class="grid--with-sidebar"> <nav class="sidebar display--desktop grid__item--sidebar" id="SidebarAccordion"> <div class="sidebar-menu"> <section class="sidebar-group" aria-label="Build themes."> <ul class="sidebar-list"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes"><span>Themes</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Getting started</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/getting-started"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/getting-started/create"><span>Create a theme</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/getting-started/customize"><span>Customize a theme</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Architecture</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Layouts</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">checkout.liquid</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-3"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts/checkout-liquid"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts/checkout-liquid/customize-checkout"><span>Customize checkout.liquid</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/layouts/checkout-liquid/checkout-css"><span>Checkout CSS</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Templates</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/json-templates"><span>JSON templates</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/article"><span>article</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/blog"><span>blog</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/cart"><span>cart</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/collection"><span>collection</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-account"><span>customers/account</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-activate-account"><span>customers/activate_account</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-addresses"><span>customers/addresses</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-login"><span>customers/login</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-order"><span>customers/order</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-register"><span>customers/register</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/customers-reset-password"><span>customers/reset_password</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/gift-card-liquid"><span>gift_card.liquid</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/index-template"><span>index</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/list-collections"><span>list-collections</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/page"><span>page</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/password"><span>password</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/product"><span>product</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/robots-txt-liquid"><span>robots.txt.liquid</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/search"><span>search</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/templates/404"><span>404</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Sections</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections/section-schema"><span>Section schema</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections/section-assets"><span>Section assets</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor"><span>Integrate with the theme editor</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Config</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/config"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/config/settings-schema-json"><span>settings_schema.json</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/config/settings-data-json"><span>settings_data.json</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Locales</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/locales"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/locales/schema-locale-files"><span>Schema locale files</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/locales/storefront-locale-files"><span>Storefront locale files</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Settings</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/input-settings"><span>Input settings</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/sidebar-settings"><span>Sidebar settings</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/fonts"><span>Fonts</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/architecture/settings/deprecated-settings"><span>Deprecated settings</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item accordion-item--active"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Developer tools</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--active sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Shopify CLI</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/installation"><span>Installation</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/getting-started"><span>Getting started</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/core-commands"><span>Core commands</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/theme-commands"><span>Theme commands</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/cli/troubleshooting"><span>Troubleshooting</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme Check</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/vscode"><span>Shopify Liquid VS Code extension</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/configuration"><span>Configuration</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/commands"><span>Commands</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Checks reference</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-3"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/app-block-valid-tags"><span>AppBlockValidTags</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-app-block-css"><span>AssetSizeAppBlockCSS</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-app-block-javascript"><span>AssetSizeAppBlockJavascript</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-css"><span>AssetSizeCSS</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-css-stylesheet-tag"><span>AssetSizeCSSStylesheetTag</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-size-javascript"><span>AssetSizeJavascript</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/asset-url-filters"><span>AssetUrlFilters</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/content-for-header-modification"><span>ContentForHeaderModification</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/convert-include-to-render"><span>ConvertIncludeToRender</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/default-locale"><span>DefaultLocale</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/deprecate-bgsizes"><span>DeprecateBgsizes</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/deprecate-lazysizes"><span>DeprecateLazysizes</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/deprecated-filter"><span>DeprecatedFilter</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/html-parsing-error"><span>HtmlParsingError</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/img-lazy-loading"><span>ImgLazyLoading</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/img-width-and-height"><span>ImgWidthAndHeight</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/liquid-tag"><span>LiquidTag</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/matching-schema-translations"><span>MatchingSchemaTranslations</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/matching-translations"><span>MatchingTranslations</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/missing-enable-comment"><span>MissingEnableComment</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/missing-required-template-files"><span>MissingRequiredTemplateFiles</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/missing-template"><span>MissingTemplate</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/nested-snippet"><span>NestedSnippet</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/pagination-size"><span>PaginationSize</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/parser-blocking-javascript"><span>ParserBlockingJavaScript</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/parser-blocking-script-tag"><span>ParserBlockingScriptTag</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/remote-asset"><span>RemoteAsset</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/required-directories"><span>RequiredDirectories</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/required-layout-theme-object"><span>RequiredLayoutThemeObject</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/space-inside-braces"><span>SpaceInsideBraces</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/syntax-error"><span>SyntaxError</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/template-length"><span>TemplateLength</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/translation-key-exists"><span>TranslationKeyExists</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/undefined-object"><span>UndefinedObject</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/unknown-filter"><span>UnknownFilter</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/unused-assign"><span>UnusedAssign</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/unused-snippet"><span>UnusedSnippet</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/valid-html-translation"><span>ValidHTMLTranslation</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/valid-json"><span>ValidJson</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-check/checks/valid-schema"><span>ValidSchema</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">GitHub integration</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/github"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/github/getting-started"><span>Getting started</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme Inspector</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-inspector"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-inspector/using-the-theme-inspector"><span>Optimizing themes using Theme Inspector</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/lighthouse-ci"><span>Lighthouse CI</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/online-editor"><span>Theme editor</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/code-editor"><span>Code editor</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme Kit</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/getting-started"><span>Getting started</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/access"><span>Access</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/command-reference"><span>Command reference</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/configuration-reference"><span>Configuration reference</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/theme-kit/troubleshooting"><span>Troubleshooting</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Development stores</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/development-stores"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/development-stores/transfer-development-stores"><span>Transfer a development store</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/tools/collaborator-accounts"><span>Collaborator accounts</span></a> </div> </li> <li class="sidebar-item sidebar-item--active"> <div class="sidebar-item__inner-container"> <a class="sidebar-link sidebar-link--active" href="/web/20211030135608/https://shopify.dev/themes/tools/dawn"><span>Dawn</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Best practices</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/templates-sections-blocks"><span>Sections and blocks</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Performance</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/performance"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/performance/platform"><span>Platform</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/accessibility"><span>Accessibility</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Design</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/design"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/design/color-system"><span>Color system</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/merchant-stores"><span>Merchant stores</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/version-control"><span>Version control</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/best-practices/file-transformation"><span>File transformation</span></a> </div> </li> </ul> </li> </ul> </section> <section class="sidebar-group" aria-label="Implement theme features."> <ul class="sidebar-list"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/apps/online-store"><span>Integrating apps</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Product merchandising</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/variants"><span>Product variants</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Product recommendations</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/recommendations"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/recommendations/show-product-recommendations"><span>Show product recommendations</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Media and images</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/media"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/media/support-media"><span>Support product media</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/product-merchandising/media/media-ux"><span>Product media UX guidelines</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Pricing and payments</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/discounts"><span>Discounts</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Subscriptions</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/subscriptions"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/subscriptions/subscription-ux-guidelines"><span>Subscription UX guidelines</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/subscriptions/selling-plans"><span>Selling plan groups and selling plans</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/installments"><span>Shop Pay Installments</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/accelerated-checkout"><span>Accelerated checkout</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/unit-pricing"><span>Unit pricing</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/pricing-payments/price-display-ux-guidelines"><span>Price display UX guidelines</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Delivery and fulfillment</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/delivery-fulfillment"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/delivery-fulfillment/pickup-availability"><span>Pickup availability</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Customer engagement</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement/email-consent"><span>Email consent</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement/additional-customer-information"><span>Additional customer information</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/customer-engagement/add-contact-form"><span>Add contact form</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Internationalization</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/internationalization"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/internationalization/multiple-currencies-languages"><span>Support multiple currencies and languages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/internationalization/country-language-ux"><span>Country and language selector UX guidelines</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Site navigation and search</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/navigation"><span>Navigation</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Storefront search</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/search"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/search/predictive-search"><span>Predictive search</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/search/predictive-search-ux"><span>Predictive search UX guidelines</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Filtering</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/filtering"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/filtering/filtering-ux"><span>Storefront filtering UX guidelines</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/navigation-search/filtering/tag-filtering"><span>Tag filtering</span></a> </div> </li> </ul> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">SEO</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo/metadata"><span>Metadata</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo/hreflang"><span>hreflang tags</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/seo/robots-txt"><span>robots.txt</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Trust and security</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security/security-badges"><span>Security badges</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security/captcha"><span>Captcha</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/trust-security/cookie-banner"><span>Cookie compliance</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/migration"><span>Migrating to Online Store 2.0</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/troubleshooting"><span>Troubleshooting</span></a> </div> </li> </ul> </section> <section class="sidebar-group" aria-label="Sell themes."> <ul class="sidebar-list"> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Shopify Theme Store</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/requirements"><span>Requirements</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Review process</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/review-process/submit-theme"><span>Submitting a theme</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/review-process/listings"><span>Theme Store listings</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Theme success</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211030135608im_/https://shopify.dev/themes/tools/dawn#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/updates"><span>Updating your theme</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/managing-theme-reviews"><span>Managing theme reviews</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/brand-assets"><span>Brand asset guidance</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/prohibited-actions"><span>Prohibited actions</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211030135608/https://shopify.dev/themes/store/success/remove-theme"><span>Removing a theme</span></a> </div> </li> </ul> </li> </ul> </li> </ul> </section> </div> </nav> <div class="grid__item--main"> <main role="main" id="Main"> <div class="grid grid--equal-height grid--main"> <div class="grid__item grid__item--desktop-up-full grid__item--wide-up-full grid__item--article"> <article class="article--docs"> <div class="article-title-container "> <h1 class="article-title"> Dawn </h1> </div> <p>Dawn is Shopify's reference theme, built for performance, flexibility, and ease of use. It uses <a href="/web/20211030135608/https://shopify.dev/themes/migration">Online Store 2.0</a> features, including <a href="/web/20211030135608/https://shopify.dev/themes/architecture/templates">JSON templates</a>, which support <a href="/web/20211030135608/https://shopify.dev/apps/online-store/theme-app-extensions">app blocks</a> and sections on all pages.</p> <p>Dawn is an ultra-lightweight, mobile-first theme that uses atomic components, minimal JavaScript, and an opinionated set of features. It maximizes flexibility for merchants, while minimizing complexity.</p> <aside class="note"> <h4>Note</h4> <p> Development stores created after June 29, 2021 use Dawn as their default theme.</p> </aside> <p><img alt="An image of Dawn" src="/web/20211030135608im_/https://shopify.dev/assets/themes/dawn-cropped-eee6b840efb92f5064ecbf755cff037879e2ff432eb6ca810948fe3b82ed9535.png"/></p> <p>We developed a set of <a href="/web/20211030135608/https://shopify.dev/themes/best-practices">best practices</a> and used them to build Dawn:</p> <ul> <li><strong><a href="/web/20211030135608/https://shopify.dev/themes/best-practices/performance">Performance</a></strong> - Every part of Dawn was built with performance in mind. Dawn uses several strategies to optimize performance. For example, it makes use of CSS and native browser features over JavaScript wherever possible to reduce the bundle size and decrease load times.</li> <li><strong><a href="/web/20211030135608/https://shopify.dev/themes/best-practices/design">Design</a></strong> - Dawn was built with the experience of merchants and customers in mind. It combines flexibility and ease of use with powerful brand expression and an intuitive interface.</li> <li><strong><a href="/web/20211030135608/https://shopify.dev/themes/best-practices/accessibility">Accessibility</a></strong> - Dawn was designed and built to follow our best practices around accessibility. Its settings are organized to help merchants design accessible color schemes.</li> <li><strong><a href="/web/20211030135608/https://shopify.dev/themes/best-practices/templates-sections-blocks">Use of sections and blocks</a></strong> - Dawn builds flexibility into templates by splitting template functionality into sections and blocks. This allows merchants to build custom layouts on any page and introduce <a href="/web/20211030135608/https://shopify.dev/apps/online-store/theme-app-extensions">app blocks</a> in multiple locations on a page.</li> </ul> <p>You can explore Dawn and its code to understand how these best practices can be applied.</p> <div class="resource-card-grid"> <div> <a class="resource-card" href="https://web.archive.org/web/20211030135608/https://github.com/Shopify/dawn"> <div class="resource-card__indicator-container"><img src="/web/20211030135608im_/https://shopify.dev/assets/resource-cards/github" aria-hidden="true" class="resource-card__icon"></div> <h3 class="resource-card__title"> Shopify/dawn </h3> <p class="resource-card__description">View the Dawn repository on GitHub.</p> </a> </div></p> <p><div> <a class="resource-card" href="https://web.archive.org/web/20211030135608/https://themes.shopify.com/themes/dawn/styles/default/preview"> <div class="resource-card__indicator-container"><img src="/web/20211030135608im_/https://shopify.dev/assets/resource-cards/theme" aria-hidden="true" class="resource-card__icon"></div> <h3 class="resource-card__title"> Demo store </h3> <p class="resource-card__description">Visit the Dawn demo store to see the theme in action.</p> </a> </div> </div> <h2 id="ways-to-use-dawn">Ways to use Dawn</h2> <p>You can use Dawn in the following ways.</p> <h3 id="clone-dawn-and-build">Clone Dawn and build</h3> <p>You can use Dawn as a starting point to build your own theme. If you're using <a href="/web/20211030135608/https://shopify.dev/themes/tools/cli">Shopify CLI</a> for theme development, then you can use the <a href="/web/20211030135608/https://shopify.dev/themes/tools/cli/theme-commands#init"><code class="text-highlight text-highlight--grey">init</code></a> command to clone the repository to your local machine. You can also clone Dawn directly from the repository.</p> <p>This process is documented in the <a href="/web/20211030135608/https://shopify.dev/themes/getting-started/create">Create a theme</a> tutorial.</p> <aside class="note"> <h4>Note</h4> <p> If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be <a href="/web/20211030135608/https://shopify.dev/themes/store/requirements#uniqueness">substantively different from Dawn</a> so that it provides added value for merchants.</p> </aside> <h3 id="explore-example-theme-components">Explore example theme components</h3> <p>Shopify theme architecture is flexible and can be implemented in different ways to support your merchant's goals, or meet the needs of a certain merchant segment.</p> <p>If you're new to Shopify themes or want to understand how certain architectural components can be used, then you can explore the Dawn implementation of the component.</p> <p>Because Dawn already has <a href="/web/20211030135608/https://shopify.dev/themes/architecture/templates">JSON templates</a> for all of its pages, you can use it as a model when <a href="/web/20211030135608/https://shopify.dev/themes/migration">adding sections to your own theme</a>.</p> <p>If a component is implemented in Dawn, then its implementation is linked from the <a href="/web/20211030135608/https://shopify.dev/themes/architecture">component documentation</a>.</p> </article> <div id="Feedback" class="feedback"></div> </div></div> </main> <footer class="footer--light" id="PageContainerFooter" data-gid="66658FE5-4AA1-4154-9018-A6B71096BD68" data-page-url-section="themes"> <div class="footer-top"> <div class="grid"> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">News and updates</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="/web/20211030135608/https://shopify.dev/changelog">Developer changelog</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.shopifystatus.com/">Shopify status</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Blogs</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.shopify.com/partners/blog">Partner blog</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://shopify.engineering/">Engineering blog</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://ux.shopify.com/">UX blog</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Community</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://community.shopify.com/c/App-Partner-Platform/ct-p/appdev">Developer forums</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://shopifypartners.slack.com/join/shared_invite/zt-fadywn35-y~7e2MJkJkQ4caIjmbKRpg#/shared-invite/email">Partner Slack</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.facebook.com/shopifypartners/">Facebook group</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Social</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link footer-link--social footer-link--twitch" href="https://web.archive.org/web/20211030135608/https://www.twitch.tv/shopifydevs">Twitch</a> </li> <li> <a class="footer-link footer-link--social footer-link--youtube" href="https://web.archive.org/web/20211030135608/https://www.youtube.com/c/shopifydevs">YouTube</a> </li> <li> <a class="footer-link footer-link--social footer-link--twitter" href="https://web.archive.org/web/20211030135608/https://twitter.com/ShopifyDevs">Twitter</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Events</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://unite.shopify.com/">Unite</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://events.shopify.com/partners">Meetups</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://events.shopify.com/partnertownhall">Partner Town Hall</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Legal</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.shopify.com/legal/terms">Terms of Service</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.shopify.com/legal/api-terms">API Terms of Service</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.shopify.com/legal/privacy">Privacy policy</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211030135608/https://www.shopify.com/partners/terms">Partner program agreement</a> </li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="grid grid--vertically-centered"> <div class="grid__item"> <nav class="footer-nav"> <ul class="footer-nav__list" role="list"> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211030135608/https://www.shopify.com/about">About Shopify</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211030135608/https://www.shopify.com/plus">Shopify Plus</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211030135608/https://www.shopify.com/careers">Careers</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211030135608/https://investors.shopify.com/">Investors</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211030135608/https://www.shopify.com/press">Press and Media</a> </li> </ul> </nav> </div></div> </div> </footer> </div> </div> </div> <script> //<![CDATA[ window.I18n = window.I18n || {}; window.I18n.data = {"modal":{"home":"Home","close":"Close"},"signup":{"header":"Start your free %{trial_length}-day trial of Shopify","create_now":"Create your store","labels":{"email":"Email address","password":"Password","shop_name":"Your store name","subdomain":"Store URL"},"subtitles":{"shop_name":"This can be changed later.","subdomain":"This will be the default domain for your store, but you can add different domains later. You'll also use your Store URL to log in."},"placeholders":{"password":"Minimum 5 characters"},"success_messages":{"email":"Got it","password":"Looks great","shop_name":"That name is available!","subdomain":"You‘ll use this to log in to your store"},"store_address_suffix":".myshopify.com","hint_messages":{"email_typo_html":"Did you mean \u003cbutton type=\"button\" data-bind-event-click=\"%{on_click}\"\u003e%{suggestion}\u003c/button\u003e?"},"partners_input_label":"Email address","partners_input_placeholder":"Enter your email","submit":"Sign up","signup_html":"Sign up as a Shopify Partner to get a free API\u0026nbsp;key."},"forms":{"errors":{"throttled":"Too many requests from this IP, try again later.","global":{"invalid":"Please enter a valid email address","required":"This field is required.","generic":"Sorry, something went wrong. Please try again later.","throttled":"Too many requests from this IP, try again later."},"shop_name":{"empty":"Please enter a store name","minlength":"Your store name must be at least 4 characters","maxlength":"Your store name can’t be longer than 60 characters","existingAdmin":"A store with that name already exists. If you are the owner you can \u003ca href=\"https://%{err}/admin\"\u003elog in here\u003c/a\u003e","message":"%{err}","matchesPassword":"Your store name can’t be the same as your password","disallowed":"Your store name can’t contain the word \u003cstrong\u003e%{err}\u003c/strong\u003e. Try another."},"email":{"empty":"Please enter an email address","invalid":"Please enter a valid email address","member_exists":"You are already subscribed to this list","generic":"Sorry, something went wrong. Please try again later."},"password":{"empty":"Please enter a password","minlength":"Password must be at least 5 characters","spaces":"Password cannot start or end with a space"},"subdomain":{"empty":"Please enter a subdomain","minlength":"Your subdomain must be at least 4 characters","multiple":"Multiple subdomains are associated with this email","suggest":"Did you mean %{err}?","invalid":"Please enter a valid subdomain","existingAdmin":"A store with that subdomain already exists. If you are the owner you can \u003ca href=\"https://%{err}/admin\"\u003elog in here\u003c/a\u003e","disallowed":"Your subdomain can’t contain the word \u003cstrong\u003e%{err}\u003c/strong\u003e. Try another.","message":"%{err}"}}},"search":{"title":"Search","placeholder":"Search","label":"Search the documentation","suggestions_available":"Suggestions are available. Use up and down arrows to select a suggestion and enter key to use it.","no_suggestions_available":"No suggestions are available for this search term. Try a different search term.","instructions":"As you start typing, we might suggest common search terms. Use up and down arrow keys to select a search term.","submit":"Search Submit button","launcher":"Forward slash to launch search","up_down_navigation_html":"%{up_icon}%{down_icon} arrows to navigate","up":"Up","down":"Down","enter_to_select":"Enter to select","escape_to_close":"Escape to close","instructions_html":"Press %{up_icon}%{down_icon} to navigate, %{enter} to select, %{esc} to dismiss","enter":"enter","esc":"esc","no_results":"No results","try_another_search_term":"Try another search term","could_not_be_completed":"Your search couldn’t be completed","try_again_later":"Please try again later","search":{"page_title":"Search results for '%{search_term}'","meta_description":"Create powerful ecommerce solutions for a variety of scenarios using Shopify’s API.","results_for_html":"Results for %{search_term}","total_results":{"one":"%{count} result","other":"%{count} results"},"no_results_for_html":"No results for %{search_term}","no_search_term":"this request","try_another_term_html":"Try another term or browse the %{docs_href}","docs":"Docs","no_search_results":"No search results","next":"Next","previous":"Previous"}},"feedback":{"meta":{"title":"Share Feedback","description":"Share Feedback"},"cta":"share your feedback with us.","question":"How helpful was this page?","submit-message":"Thanks for helping us improve this page!","submit-button":"Submit feedback","ratings":{"0":"Very unhelpful","1":"Somewhat unhelpful","2":"Neither helpful nor unhelpful","3":"Somewhat helpful","4":"Very helpful"},"details":{"like":"What did you like about this page? (optional)","dislike":"What can we do to improve this page? (optional)"},"feedback_form":{"positive":"Yes","negative":"No","question":"Is this page helpful?","default_label":"How could we improve this page?","option_0":{"option":"This isn't what I was looking for.","placeholder":"What were you looking for?"},"option_1":{"option":"There aren't enough examples.","placeholder":"What examples were you looking for?"},"option_2":{"option":"The information is hard to understand.","placeholder":"What was difficult to understand?"},"option_3":{"option":"The information doesn't solve my issue.","placeholder":"What issue were you trying to solve?"},"option_4":{"option":"Other","placeholder":"What can we do to improve this page?"},"thank_you":{"positive":"Thank you for your feedback!","negative":"Thank you for your feedback! Let us know why this wasn't helpful.","submitted":"Thank you for your comments!"}}},"docs":{"markdown":{"meta_description":"Consult complete reference documentation for developing on Shopify. Includes representative code snippets and examples for a variety of client libraries."},"article":{"api_version_selector":{"api_version_name_html":"API version: %{version_handle} %{version_label}","post_unite_api_version_name_html":"v.%{version_handle} %{version_label}","choose_api_version":"Choose API version","newer_versions_available":{"one":"%{count} newer API version available","other":"%{count} newer API versions available"},"not_supported":"Not supported in this API version."}}},"a11y":{"pause_animations":"Pause animations","aria_label_anchor":"Anchor link"}}; window.I18n.globals = {"total_blog_subscribers":"446,005","trial_length":14}; //]]> </script> <script> //<![CDATA[ window.RailsData = { "features": [ "admin_api_next" ] } //]]> </script> <script src="https://web.archive.org/web/20211030135608js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/runtime-aae29a1923410bc6c1dcbfe2703c1858339443a1e485f33af57def797a818f15.js"></script> <script src="https://web.archive.org/web/20211030135608js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/vendors~manifests/admin_graphiql~manifests/api_landing_page~manifests/app_challenge~manifests/change~b116ace4-2d882970fc92346820f13b660f2444c1b8a04760fe4a3c85368deeda42b76c91.js"></script> <script src="https://web.archive.org/web/20211030135608js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/vendors~application~manifests/api_landing_page~manifests/changelog~manifests/docs~manifests/feedback~5fb5bdc3-5ed8e5914c9cbdbc6757fe9b06fcac03107e69250d3b0139f1d7c68f09e02e72.js"></script> <script src="https://web.archive.org/web/20211030135608js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/manifests/docs-462b3e8b3f1bf36be52f5948d4d64b72ad805bd344954b349fb7f07d755bc84d.js"></script> <script src="https://web.archive.org/web/20211030135608js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/latest/manifests/feedback-d23aa24011b9b365aa811c7e3a51f9a95afe989bd1a9f2d14544cf01e5134c9c.js"></script> <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','//web.archive.org/web/20211030135608/https://connect.facebook.net/en_US/fbevents.js'); fbq('dataProcessingOptions', ['LDU'], 0, 0); fbq('init', '1139564706572105'); fbq('track', 'PageView'); </script> <noscript> <img height="0" width="0" style="display: none" alt="" src="https://web.archive.org/web/20211030135608im_/https://www.facebook.com/tr?id=1139564706572105&ev=PageView&noscript=1"/> </noscript> </body> </html>

CINXE.COM

Dawn