CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="EN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link href="https://fonts.googleapis.com" rel="preconnect" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700;800&display=swap" /> <title>Section schema</title> <meta name="description" content="About section schema for settings."> <script nonce=""> document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js') </script> <link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/application-cf3eb1c1b3bbee66c08c610dd3e3bf271cf7d881190511c6dfe475e3d5ffefde.css" /> <link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/print-2004a1d4f939fc031f63b79020d27e47b3fd4b6528311f000fdab3093bb909e7.css" media="print" /> <link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manifests/docs-f75ee583286bcb2a6e2c0e6f0ada44d4f17e370aa34881f44f5d836649b67e08.css" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_CodeBlock_CodeBlock_tsx-app_ui_components_CodeBlock_components_SkeletonHead-fc1a35-94c4010bcf52affdef82673dda6a6fdafe39a957c24507cd906badb5a3745a0e.css" rel="stylesheet" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_styles_dark_mode_module_scss-app_ui_styles_default_mode_module_scss-app_ui_styles_dim_-b8ea09-e87b91df46750c3068b7ed01469d39acc9a0310e8ec16c9a1e5d962a86f749e8.css" rel="stylesheet" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_Search_components_SearchModal_components_Results_components_TabPanels_Resul-440ecd-ba01c57d2451863915cc6e79cbc8ef428f4f92dbce8e50965d6c662cb7ab06d7.css" rel="stylesheet" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_Layout_Sidebar_Sidebar_tsx-f4ca18bdf836702a84f5c1be69b72a39e360f2c0cbd912cd5472f2912282692a.css" rel="stylesheet" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_Layout_MainLayout_MainLayout_tsx-app_ui_components_Layout_MainLayout_index_-d16546-0b3fc4f1f46d1a9ee699d7e54809d405bfa3b95abdb2019985c35b3601886ff4.css" rel="stylesheet" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_styles_index_scss-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css" rel="stylesheet" /> <link href="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/manifests/markdown_in_react-61254595493d267f26f642ff2f214f593a3a8f4df5148421259c3d06778d12c2.css" rel="stylesheet" /> <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","custom_header":"%{custom_signup_header}","create_now":"Create your store","labels":{"email":"Email address","password":"Password","storename":"Store name","shop_name":"Your store name","promotional_program_promo_code":"Discount code","subdomain":"Store URL"},"subtitles":{"shop_name":"This can be changed later.","promotional_program_promo_code":"Enter the promo code that was provided to you.","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}"},"promotional_program_promo_code":{"message":"%{err}"}}}}; window.I18n.globals = {"total_blog_subscribers":"446,005","trial_length":3,"custom_signup_header":""}; //]]> </script> <link rel="icon" type="image/png" href="https://cdn.shopify.com/static/shopify-favicon.png" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Shopify" /> <meta property="og:title" content="Section schema" /> <meta property="og:description" content="About section schema for settings." /> <meta property="og:image" content="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/social-share-24de3afa0326f705b84a0a98714acc192611e5a21ade3b7c8f2bd12ba7d1457f.jpg" /> <meta property="og:url" content="https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema" /> <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="Section schema" /> <meta property="twitter:description" content="About section schema for settings." /> <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://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://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> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="Yn6xrT6FqcUYE7JNamO3WtaPzaK_Nw3474GxF4ULGv0VtCoFcTviAZY7EGleZZLy0iw-jrSu4OipG8ITWPk4-w" /> </head> <body class="page--storefronts-markdown shopify-sans-supported-lang"> <div id="GlobalIconSymbols"> <svg xmlns="http://www.w3.org/2000/svg"> <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"></path> </svg> </symbol> <symbol id="modules-checked"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.7 40"> <path d="M16.7 30l-7.4-7.9c-.8-.8-.6-2 .4-2.6 1-.6 2.4-.5 3.1.3l3.7 4 11.3-13c.7-.8 2.1-1 3.1-.4s1.2 1.8.5 2.6L16.7 30z"></path> </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"></path> </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"></path> </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"></path> </svg> </symbol> </svg> </div> <div id="PageContainer" class="page-container"> <div id="ReactAppContainer" class="react-app-container"></div> <div style="display: none" id="MarkdownContentForReact"> <main> <div class="grid grid--equal-height grid--main"> <div class="grid__item hide--desktop"> <div id='TOCAccordion' class='toc-accordion'> <div class='toc-accordion__item accordion-item'> <button class='toc-accordion__link accordion-link'> On this page <svg class="icon toc-accordion__caret" aria-hidden="true" focusable="false"> <use xlink:href="#modules-caret-down" /> </svg> </button> <div class="toc-accordion__content accordion-content toc"> <ul> <li><a href="#schema">Schema</a></li><li><a href="#content">Content</a></li> </ul> </div> </div> </div> </div> <div class="grid__item grid__item--desktop-up-two-thirds grid__item--wide-up-three-quarters grid__item--article"> <article class="article--docs"> <div class="article-title-container "> <h1 class="article-title"> Section schema </h1> </div> <p>Sections support the <code class="text-highlight text-highlight--grey">{% schema %}</code> Liquid tag. This tag allows you to define various attributes of a section, such as the section name, any section blocks, and settings to allow for theme editor customization options.</p> <section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="schema">Schema</h2><a class="article-anchor-link" href="#schema"><span class="visuallyhidden">Anchor link to section titled "Schema"</span></a></div> <p>Each section can have only a single <code class="text-highlight text-highlight--grey">{% schema %}</code> tag, which must contain only valid JSON using the attributes listed in <a href="#content">Content</a>. The tag can be placed anywhere within the section file, but it can’t be nested inside another Liquid tag.</p> <aside class="note caution"> <h4>Caution</h4> <p> Having more than one <code class="text-highlight text-highlight--grey">{% schema %}</code> tag, or placing it inside another Liquid tag, will result in an error.</p> </aside> <p>The following is an example of a valid section schema. For details on each attribute, refer to <a href="#content">Content</a>.</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "limit": 1, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "max_blocks": 5, "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ], "presets": [ { "name": "Slideshow", "settings": { "title": "Slideshow" }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] } ], "locales": { "en": { "title": "Slideshow" }, "fr": { "title": "Diaporama" } }, "enabled_on": { "templates": ["*"], "groups": ["footer"] } } {% endschema %} </script> </div> </p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="content">Content</h2><a class="article-anchor-link" href="#content"><span class="visuallyhidden">Anchor link to section titled "Content"</span></a></div> <p>The content of <code class="text-highlight text-highlight--grey">{% schema %}</code> can include the following attributes:</p> <ul> <li><a href="#name">name</a></li> <li><a href="#tag">tag</a></li> <li><a href="#class">class</a></li> <li><a href="#limit">limit</a></li> <li><a href="#settings">settings</a></li> <li><a href="#blocks">blocks</a></li> <li><a href="#max_blocks">max_blocks</a></li> <li><a href="#presets">presets</a></li> <li><a href="#default">default</a></li> <li><a href="#locales">locales</a></li> </ul> <p>In addition, you can use one of the following attributes to specify where a section can be used:</p> <ul> <li><a href="#enabled_on">enabled_on</a>: Limit a section to specific templates and section groups.</li> <li><a href="#disabled_on">disabled_on</a>: Prevent a section from being used in specific templates and section groups.</li> </ul> <aside class="note"> <h4>Note</h4> <p> The <code class="text-highlight text-highlight--grey">{% schema %}</code> tag is a Liquid tag. However, it doesn’t output its contents, or render any Liquid included inside it.</p> </aside> <p>You should also consider making your section compatible with <a href="/docs/storefronts/themes/architecture/blocks/app-blocks">app blocks</a>. App blocks allow app developers to create blocks for merchants to add app content to their theme without having to directly edit their theme code.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="name">name</h3><a class="article-anchor-link" href="#name"><span class="visuallyhidden">Anchor link to section titled "name"</span></a></div> <p>The <code class="text-highlight text-highlight--grey">name</code> attribute determines the section title that is shown in the theme editor. For example, the following schema returns the following output:</p> <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow" } {% endschema %} </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/theme-editor/section-title-example.png">name example</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="tag">tag</h3><a class="article-anchor-link" href="#tag"><span class="visuallyhidden">Anchor link to section titled "tag"</span></a></div> <p>By default, when Shopify renders a section, it’s wrapped in a <code class="text-highlight text-highlight--grey"><div></code> element with a unique <code class="text-highlight text-highlight--grey">id</code> attribute:</p> <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="html"> <div id="shopify-section-[id]" class="shopify-section"> // Output of the section content </div> </script> </div> </p> <p>If you don’t want to use a <code class="text-highlight text-highlight--grey"><div></code>, then you can specify which kind of HTML element to use with the <code class="text-highlight text-highlight--grey">tag</code> attribute. The following are the accepted values:</p> <ul> <li><code class="text-highlight text-highlight--grey">article</code></li> <li><code class="text-highlight text-highlight--grey">aside</code></li> <li><code class="text-highlight text-highlight--grey">div</code></li> <li><code class="text-highlight text-highlight--grey">footer</code></li> <li><code class="text-highlight text-highlight--grey">header</code></li> <li><code class="text-highlight text-highlight--grey">section</code></li> </ul> <p>For example, the following schema returns the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section" } {% endschema %} </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="html"> <section id="shopify-section-[id]" class="shopify-section"> // Output of the section content </section> </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="class">class</h3><a class="article-anchor-link" href="#class"><span class="visuallyhidden">Anchor link to section titled "class"</span></a></div> <p>When Shopify renders a section, it’s wrapped in an HTML element with a class of <code class="text-highlight text-highlight--grey">shopify-section</code>. You can add to that class with the <code class="text-highlight text-highlight--grey">class</code> attribute:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow" } {% endschema %} </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="html"> <section id="shopify-section-[id]" class="shopify-section slideshow"> // Output of the section content </section> </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="limit">limit</h3><a class="article-anchor-link" href="#limit"><span class="visuallyhidden">Anchor link to section titled "limit"</span></a></div> <p>By default, there's no limit to how many times a section can be added to a template or section group. You can specify a limit of 1 or 2 with the <code class="text-highlight text-highlight--grey">limit</code> attribute:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "limit": 1 } {% endschema %} </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="settings">settings</h3><a class="article-anchor-link" href="#settings"><span class="visuallyhidden">Anchor link to section titled "settings"</span></a></div> <p>You can create section specific <a href="/docs/storefronts/themes/architecture/settings/input-settings">settings</a> to allow merchants to customize the section with the <code class="text-highlight text-highlight--grey">settings</code> object:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "settings": [ { "type": "text", "id": "header", "label": "Header" } ] } {% endschema %} </script> </div> </p> <aside class="note caution"> <h4>Caution</h4> <p> All section setting IDs must be unique within each section. Having duplicate IDs within a section will result in an error.</p> </aside><div class="heading-wrapper heading-wrapper-4"><h4 id="access-section-settings">Access section settings</h4><a class="article-anchor-link" href="#access-section-settings"><span class="visuallyhidden">Anchor link to section titled "Access section settings"</span></a></div> <p>Section settings can be accessed through the <a href="/docs/api/liquid/objects/section#section-settings"><code class="text-highlight text-highlight--grey">section</code> object</a>. Refer to <a href="/docs/storefronts/themes/architecture/settings#access-settings">Access settings</a> to learn more.</p> <aside class="note tip"> <h4>Tip</h4> <p> If a section is <a href="/docs/storefronts/themes/architecture/sections#statically-render-a-section">statically rendered</a>, then there’s only one instance of the section across all static renderings, as a result they all share the same section setting values.</p> </aside><div class="heading-wrapper heading-wrapper-3"><h3 id="blocks">blocks</h3><a class="article-anchor-link" href="#blocks"><span class="visuallyhidden">Anchor link to section titled "blocks"</span></a></div> <p>You can create blocks for a section. Blocks are reusable modules of content that can be added, removed, and reordered within a section.</p> <p>Blocks have the following attributes:</p> <table> <caption>blocks attributes</caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> <th scope="col">>Required</th> </tr> </thead> <tbody> <tr> <td> <code>type</code> </td> <td> The block type. This is a free-form string that you can use as an identifier. You can access this value through the <code>type</code> attribute of the <a href="/docs/api/liquid/objects/block#block-type"><code>block</code> object</a>. </td> <td> Yes </td> </tr> <tr> <td> <code>name</code> </td> <td> The block name, which will show as the block title in the theme editor. </td> <td> Yes </td> </tr> <tr> <td> <code>limit</code> </td> <td> The number of blocks of this type that can be used. </td> <td> No </td> </tr> <tr> <td> <code>settings</code> </td> <td> Any <a href="/docs/storefronts/themes/architecture/settings/input-settings">input</a> or <a href="/docs/storefronts/themes/architecture/settings/sidebar-settings">sidebar</a> settings that you want for the block. Certain settings might be used as the <a href="#show-dynamic-block-titles-in-the-theme-editor">title of the block in the theme editor</a>. </td> <td> No </td> </tr> </tbody> </table> <p>The following is an example of including blocks in a section:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ] } {% endschema %} </script> </div> </p> <aside class="note caution"> <h4>Caution</h4> <p> All block names and types must be unique within each section, and all setting IDs must be unique within each block. Having duplicates will result in an error.</p> </aside><div class="heading-wrapper heading-wrapper-4"><h4 id="access-block-settings">Access block settings</h4><a class="article-anchor-link" href="#access-block-settings"><span class="visuallyhidden">Anchor link to section titled "Access block settings"</span></a></div> <p>Block settings can be accessed through the <a href="/docs/api/liquid/objects/block#block-settings"><code class="text-highlight text-highlight--grey">block</code> object</a>. Refer to <a href="/docs/storefronts/themes/architecture/settings#access-settings">Access settings</a> to learn more.</p> <aside class="note tip"> <h4>Tip</h4> <p> If a section is <a href="/docs/storefronts/themes/architecture/sections#statically-render-a-section">statically rendered</a>, then there’s only one instance of the section across all static renderings, meaning they all share the same block setting values.</p> </aside><div class="heading-wrapper heading-wrapper-4"><h4 id="render-blocks">Render blocks</h4><a class="article-anchor-link" href="#render-blocks"><span class="visuallyhidden">Anchor link to section titled "Render blocks"</span></a></div> <p>You can render a section's blocks by looping over the <code class="text-highlight text-highlight--grey">blocks</code> attribute of the <a href="/docs/api/liquid/objects/section#section-blocks"><code class="text-highlight text-highlight--grey">section</code> object</a>:</p> <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="liquid"> {% for block in section.blocks %} {% case block.type %} {% when 'slide' %} <div class="slide" {{ block.shopify_attributes }}> {{ block.settings.image | image_url: width: 2048 | image_tag }} </div> ... {% endcase %} {% endfor %} </script> </div> </p> <p>In the example above, each block's content is included inside a parent container, and that container has <code class="text-highlight text-highlight--grey">{{ block.shopify_attributes }}</code> added as an attribute. Shopify's theme editor uses that attribute to identify blocks in its <a href="/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-editor#javascript-events">JavaScript API</a>.</p> <p>If your block is a single element, then ensure that the element has this attribute.</p> <aside class="note caution"> <h4>Caution</h4> <p> Don't rely on the literal value of a <a href="/docs/api/liquid/objects/block#block-id">block's ID</a> when you iterate over blocks. The ID is dynamically generated and is subject to change. The following is an example of relying on a literal value of a block's ID, which may break functionality in your theme if the ID changes:</p> <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="liquid"> {% for block in section.blocks %} {%- if block.id == 'J6d9jV' -%} <h1>{{ block.settings.heading }}</h1> {% endif %} {% endfor %} </script> </div> </p> </aside><div class="heading-wrapper heading-wrapper-4"><h4 id="show-dynamic-block-titles-in-the-theme-editor">Show dynamic block titles in the theme editor</h4><a class="article-anchor-link" href="#show-dynamic-block-titles-in-the-theme-editor"><span class="visuallyhidden">Anchor link to section titled "Show dynamic block titles in the theme editor"</span></a></div> <p>In certain cases, the theme editor can display an input setting value as the title of a block in the theme editor sidebar. This can help merchants to identify and rearrange blocks in a section.</p> <p>The theme editor checks <a href="/docs/storefronts/themes/architecture/settings/input-settings#standard-attributes">the <code class="text-highlight text-highlight--grey">id</code> values</a> of the settings in a block to determine the best one to use for the block title.</p> <p>The theme editor uses settings with the following <code class="text-highlight text-highlight--grey">id</code> values, in order of precedence:</p> <ol> <li><code class="text-highlight text-highlight--grey">heading</code></li> <li><code class="text-highlight text-highlight--grey">title</code></li> <li><code class="text-highlight text-highlight--grey">text</code></li> </ol> <p>If a setting with a matching <code class="text-highlight text-highlight--grey">id</code> value doesn't exist, then the block name is used as the title.</p> <p>For example, this block with a setting <code class="text-highlight text-highlight--grey">id</code> of <code class="text-highlight text-highlight--grey">heading</code> displays in the sidebar with the title <code class="text-highlight text-highlight--grey">Welcome to our store</code>.</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="json"> "blocks": [ { "name": "Announcement", "type": "announcement", "settings": [ { "type": "text", "id": "heading", "default": "Welcome to our store", "label": "Heading" } ] } ] </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="max_blocks">max_blocks</h3><a class="article-anchor-link" href="#max_blocks"><span class="visuallyhidden">Anchor link to section titled "max_blocks"</span></a></div> <p>There’s a limit of 50 blocks per section. You can specify a lower limit with the <code class="text-highlight text-highlight--grey">max_blocks</code> attribute:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "max_blocks": 5, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ] } {% endschema %} </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script data-option="title" data-value="Example"></script> <script type="text/plain" data-image="/assets/themes/theme-editor/max_blocks-example.png">max_blocks example</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="presets">presets</h3><a class="article-anchor-link" href="#presets"><span class="visuallyhidden">Anchor link to section titled "presets"</span></a></div> <p>Presets are default configurations of sections that enable users to easily add a section to a <a href="/docs/storefronts/themes/architecture/templates/json-templates">JSON template</a> through the theme editor. Presets aren't related to <a href="/docs/storefronts/themes/architecture/config/settings-data-json#theme-styles">theme styles</a> that are defined in <code class="text-highlight text-highlight--grey">settings_data.json</code>.</p> <p>Presets have the following attributes:</p> <table> <caption>presets attributes</caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> <th scope="col">>Required</th> </tr> </thead> <tbody> <tr> <td> <code>name</code> </td> <td> The preset name, which will show in the <strong>Add section</strong> picker of the theme editor. </td> <td> Yes </td> </tr> <tr> <td> <code>settings</code> </td> <td> A list of default values for any settings you might want to populate. Each entry should include the setting name and the value. </td> <td> No </td> </tr> <tr> <td> <code>blocks</code> </td> <td> A list of default blocks that you might want to include. Each entry should be an object with attributes of <code>type</code> and <code>settings</code>. The <code>type</code> attribute value should reflect the type of the block that you want to include, and the <code>settings</code> object should be in the same format as the <code>settings</code> attribute above. </td> <td> No </td> </tr> </tbody> </table> <p>The following is an example of including presets in a section:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "max_blocks": 5, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ], "presets": [ { "name": "Slideshow", "settings": { "title": "Slideshow" }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] } ] } {% endschema %} </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script data-option="title" data-value="Example"></script> <script type="text/plain" data-image="/assets/themes/theme-editor/presets-example.png">presets example</script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p> Sections with presets shouldn't be <a href="/docs/storefronts/themes/architecture/sections#statically-render-a-section">statically rendered</a>. If you’re going to statically render a section, then you should use <a href="#default">default settings</a>.</p> </aside><div class="heading-wrapper heading-wrapper-3"><h3 id="default">default</h3><a class="article-anchor-link" href="#default"><span class="visuallyhidden">Anchor link to section titled "default"</span></a></div> <p>If you statically render a section, then you can define a default configuration with the <code class="text-highlight text-highlight--grey">default</code> object, which has the same attributes as the <a href="#presets">preset object</a>.</p> <p>The following is an example of including a default in a section:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "max_blocks": 5, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ], "default": { "settings": { "title": "Slideshow" }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] } } {% endschema %} </script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p> You should only use the section <code class="text-highlight text-highlight--grey">default</code> attribute for sections that will be reused, or installed on multiple themes or shops. Statically rendered sections that come pre-installed on a theme should have their default configuration defined by the <code class="text-highlight text-highlight--grey">default</code> attribute for each individual setting.</p> </aside><div class="heading-wrapper heading-wrapper-3"><h3 id="locales">locales</h3><a class="article-anchor-link" href="#locales"><span class="visuallyhidden">Anchor link to section titled "locales"</span></a></div> <p>Sections can provide their own set of translated strings through the <code class="text-highlight text-highlight--grey">locales</code> object. This is separate from the <code class="text-highlight text-highlight--grey">locales</code> directory of the theme, which makes it a useful feature for sections that are meant to be installed on multiple themes or shops.</p> <p>The <code class="text-highlight text-highlight--grey">locales</code> object has the following general format:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="General format"></script> <script type="text/plain" data-language="json"> { "locales": { "language": { "translation_key": "translation_value" } } } </script> </div> </p> <p>For example:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "max_blocks": 5, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ], "default": { "settings": { "title": "Slideshow" }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] }, "locales": { "en": { "title": "Slideshow" }, "fr": { "title": "Diaporama" } } } {% endschema %} </script> </div> </p> <p>Any translations will show up under the <strong>Sections</strong> tab of the language editor for merchants to edit. When edits are made, the changes are saved directly to the applicable locale file, and the section schema is unchanged.</p> <p>These translations can be accessed through the Liquid <a href="/docs/api/liquid/filters/translate">translation filter</a> (<code class="text-highlight text-highlight--grey">t</code> filter) where the key will be in the following format:</p> <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="text"> sections.[section-name].[translation-description] </script> </div> </p> <p>For example, if you want to reference the <code class="text-highlight text-highlight--grey">title</code> translation from the example above, then use the following:</p> <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="liquid"> {{ 'sections.slideshow.title' | t }} </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="enabled_on">enabled_on</h3><a class="article-anchor-link" href="#enabled_on"><span class="visuallyhidden">Anchor link to section titled "enabled_on"</span></a></div> <p>You can restrict a section to certain template page types and section group types by specifying them through the <code class="text-highlight text-highlight--grey">enabled_on</code> attribute.</p> <p><code class="text-highlight text-highlight--grey">enabled_on</code>, along with <code class="text-highlight text-highlight--grey">disabled_on</code>, replaces the <code class="text-highlight text-highlight--grey">templates</code> attribute.</p> <aside class="note caution"> <h4>Caution</h4> <p> You can use only one of <code class="text-highlight text-highlight--grey">enabled_on</code> or <a href="#disabled_on"><code class="text-highlight text-highlight--grey">disabled_on</code></a>.</p> </aside> <p><code class="text-highlight text-highlight--grey">enabled_on</code> must have at least one of the following attributes:</p> <table> <caption>enabled_on attributes</caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td> <code>templates</code> </td> <td> <p>A list of the template page types where the section can be used.</p> <p>Accepted values:</p> <ul> <li>A list of <a href="/docs/api/liquid/objects/request#request-page_type">page types</a></li> <li><code>["*"]</code> (all template page types)</li> </td> </tr> <tr> <td> <code>groups</code> </td> <td> <p>A list of the section groups where the section can be used.</p> <p>Accepted values:</p> <ul> <li>A list of the section group types. Accepted values: <code>header</code>, <code>footer</code>, <code>aside</code>, and custom types in the format <code>custom.<NAME></code>.</li> <li><code>["*"]</code> (all section group types)</li> </td> </tr> </tbody> </table> <p>In the following example, the section is available to all templates, and to the <code class="text-highlight text-highlight--grey">footer</code> section group:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "max_blocks": 5, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ], "default": { "settings": { "title": "Slideshow" }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] }, "locales": { "en": { "title": "Slideshow" }, "fr": { "title": "Diaporama" } }, "enabled_on": { "templates": ["*"], "groups": ["footer"] }, } {% endschema %} </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="disabled_on">disabled_on</h3><a class="article-anchor-link" href="#disabled_on"><span class="visuallyhidden">Anchor link to section titled "disabled_on"</span></a></div> <p>You can prevent a section from being used on certain template page types and section group types by setting them in the <code class="text-highlight text-highlight--grey">disabled_on</code> attribute. When you use <code class="text-highlight text-highlight--grey">disabled_on</code>, the section is available to all templates and section groups except the ones that you specified.</p> <p><code class="text-highlight text-highlight--grey">disabled_on</code>, along with <code class="text-highlight text-highlight--grey">enabled_on</code>, replaces the <code class="text-highlight text-highlight--grey">templates</code> attribute.</p> <aside class="note caution"> <h4>Caution</h4> <p> You can use only one of <a href="#enabled_on"><code class="text-highlight text-highlight--grey">enabled_on</code></a> or <code class="text-highlight text-highlight--grey">disabled_on</code>.</p> </aside> <p><code class="text-highlight text-highlight--grey">disabled_on</code> must have at least one of the following attributes:</p> <table> <caption>disabled_on attributes</caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td> <code>templates</code> </td> <td> <p>A list of the template page types where the section can't be used.</p> <p>Accepted values:</p> <ul> <li>A list of <a href="/docs/api/liquid/objects/request#request-page_type">page types</a></li> <li><code>["*"]</code> (all template page types)</li> </td> </tr> <tr> <td> <code>groups</code> </td> <td> <p>A list of the section groups where the section can't be used.</p> <p>Accepted values:</p> <ul> <li>A list of the section group types. Accepted values: <code>header</code>, <code>footer</code>, <code>aside</code>, and custom types in the format <code>custom.<NAME></code>.</li> <li><code>["*"]</code> (all section group types)</li> </td> </tr> </tbody> </table> <p>In the following example, the section is available to all templates other than <code class="text-highlight text-highlight--grey">password</code> templates, and to all section groups other than <code class="text-highlight text-highlight--grey">footer</code> section groups.</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="/sections/slideshow.liquid"></script> <script type="text/plain" data-language="json"> {% schema %} { "name": "Slideshow", "tag": "section", "class": "slideshow", "max_blocks": 5, "settings": [ { "type": "text", "id": "title", "label": "Slideshow" } ], "blocks": [ { "name": "Slide", "type": "slide", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ], "default": { "settings": { "title": "Slideshow" }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] }, "locales": { "en": { "title": "Slideshow" }, "fr": { "title": "Diaporama" } }, "disabled_on": { "templates": ["password"], "groups": ["footer"] }, } {% endschema %} </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="app-blocks">App blocks</h3><a class="article-anchor-link" href="#app-blocks"><span class="visuallyhidden">Anchor link to section titled "App blocks"</span></a></div> <p>If your section is part of a <a href="/docs/storefronts/themes/architecture/templates/json-templates">JSON template</a> or <a href="/docs/storefronts/themes/architecture/section-groups">section group</a>, then you should support blocks of type <code class="text-highlight text-highlight--grey">@app</code>. <a href="/docs/storefronts/themes/architecture/blocks/app-blocks">App blocks</a> allow app developers to create blocks for merchants to add app content to their theme without having to directly edit theme code.</p> </section> <div id="FeedbackFloatingAnchor" class="feedback-floating-anchor"></div> </article> <div class="hide--mobile hide--tablet"> <div id="FeedbackLauncherModal"></div> </div> <div class="hide--desktop"> <div id="FeedbackLauncherPage"></div> </div> </div> <div class="grid__item grid__item--desktop-up-third grid__item--wide-up-quarter grid__item--toc"> <div class='toc-container'> <h3 class='toc__heading'>On this page</h3> <div class="toc"> <ul class="toc__list"> <li><a href="#schema">Schema</a></li><li><a href="#content">Content</a></li> </ul> </div> </div> </div></div> </main> </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","custom_header":"%{custom_signup_header}","create_now":"Create your store","labels":{"email":"Email address","password":"Password","storename":"Store name","shop_name":"Your store name","promotional_program_promo_code":"Discount code","subdomain":"Store URL"},"subtitles":{"shop_name":"This can be changed later.","promotional_program_promo_code":"Enter the promo code that was provided to you.","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}"},"promotional_program_promo_code":{"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","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"},"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":"%{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","aria_label_dark_mode":"View dark mode","aria_label_light_mode":"View light mode","aria_label_tabs":"%{tab_names} tabs"},"sidebar":{"collapse":"Collapse sidebar","expand":"Expand sidebar","aria_label":"Sidebar","toggle":"Toggle","badges":{"shopify_plus":"Plus","shopify_plus_description":"(Shopify Plus)","beta":"Beta","beta_description":"(Feature beta)","object":"Object","input_object":"Input","mutation":"Mutation","query":"Query","enum":"Enum","interface":"Interface","union":"Union"},"graphql_types":{"overview":"overview","object":"Objects","input_object":"Inputs","mutation":"Mutations","query":"Queries","enum":"Enums","interface":"Interfaces","union":"Unions"},"markdown":{"title":"Docs","links":{"fortest":{"label":"This is needed for testing do not remove","url":"#"}}},"apps_build":{"heading":"Build","getting_started_group":{"group_description":"Getting started","links":{"apps":{"label":"Shopify app platform","url":"/docs/apps/build"},"domains_surfaces":{"label":"App surfaces","url":"/docs/apps/build/app-surfaces"},"scaffold_app":{"label":"Scaffold an app","url":"/docs/apps/build/scaffold-app"},"build_app":{"label":"Build an app","url":"/docs/apps/build/build"},"cli_apps":{"label":"Shopify CLI for apps","children":{"overview":{"label":"About Shopify CLI for apps","url":"/docs/apps/build/cli-for-apps"},"app_structure":{"label":"About app structure","url":"/docs/apps/build/cli-for-apps/app-structure"},"app_configuration":{"label":"About app configuration","url":"/docs/apps/build/cli-for-apps/app-configuration"},"manage_config_files":{"label":"Manage app config files","url":"/docs/apps/build/cli-for-apps/manage-app-config-files"},"ngrok":{"label":"Use ngrok for tunneling during app development","url":"/docs/apps/build/cli-for-apps/use-ngrok-tunneling"},"from_dashboard":{"label":"Migrate a Dashboard-managed app to Shopify CLI","url":"/docs/apps/build/cli-for-apps/migrate-from-dashboard"},"migrate":{"label":"Migrate to the latest Shopify CLI","url":"/docs/apps/build/cli-for-apps/migrate-to-latest-cli"}}}}},"extending_group":{"group_description":"Extending Shopify","links":{"admin":{"label":"Admin","children":{"overview":{"label":"Apps in admin","url":"/docs/apps/build/admin"},"admin_actions_blocks":{"label":"Admin UI extensions","children":{"overview":{"label":"About admin extensions","url":"/docs/apps/build/admin/actions-blocks"},"build_admin_action":{"label":"Build an admin action","url":"/docs/apps/build/admin/actions-blocks/build-admin-action"},"build_admin_block":{"label":"Build an admin block","url":"/docs/apps/build/admin/actions-blocks/build-admin-block"},"connect_extensions":{"label":"Connect admin extensions","url":"/docs/apps/build/admin/actions-blocks/connect-admin-extensions"},"connect_app_backend":{"label":"Connect to your app's backend","url":"/docs/apps/build/admin/actions-blocks/connect-app-backend"},"print_admin_action":{"label":"Build an admin print action","url":"/docs/apps/build/admin/actions-blocks/build-admin-print-action"}}},"link-extensions":{"label":"Admin links (legacy)","children":{"overview":{"label":"About admin links (legacy)","url":"/docs/apps/build/admin/admin-links"},"add_links":{"label":"Add admin links (legacy)","url":"/docs/apps/build/admin/admin-links/add-admin-links"}}}}},"checkout":{"label":"Checkout","children":{"overview":{"label":"Apps in checkout","url":"/docs/apps/build/checkout"},"technologies":{"label":"Technologies for customizing checkout","url":"/docs/apps/build/checkout/technologies"},"start_building":{"label":"Start building for checkout","url":"/docs/apps/build/checkout/start-building"},"custom_data":{"label":"Display custom data","url":"/docs/apps/build/checkout/display-custom-data"},"validation":{"label":"Validation","children":{"overview":{"label":"About cart and checkout validation","url":"/docs/apps/build/checkout/cart-checkout-validation"},"create_client_side_validation":{"label":"Create client-side validation","url":"/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation"},"create_server_side_validation":{"label":"Create server-side validation","url":"/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation"},"create_the_admin_ui":{"label":"Create admin UI validation","url":"/docs/apps/build/checkout/cart-checkout-validation/create-admin-ui-validation"}}},"create_permalinks":{"label":"Create cart permalinks","url":"/docs/apps/build/checkout/create-cart-permalinks"},"styling":{"label":"Styling","children":{"overview":{"label":"About checkout styling","url":"/docs/apps/build/checkout/styling"},"custom_typography":{"label":"Customize typography","url":"/docs/apps/build/checkout/styling/customize-typography"},"favicon":{"label":"Add the favicon","url":"/docs/apps/build/checkout/styling/add-favicon"},"page_elements":{"label":"Customize form controls","url":"/docs/apps/build/checkout/styling/customize-form-controls"},"color":{"label":"Update color settings","url":"/docs/apps/build/checkout/styling/update-color-settings"},"section":{"label":"Customize sections","url":"/docs/apps/build/checkout/styling/customize-sections"}}},"customize-header":{"label":"Customize the header","url":"/docs/apps/build/checkout/customize-header"},"customize-footer":{"label":"Customize the footer","url":"/docs/apps/build/checkout/customize-footer"},"banners_fields":{"label":"Banners and fields","children":{"overview":{"label":"About custom banners and fields","url":"/docs/apps/build/checkout/fields-banners"},"add_banner":{"label":"Add a banner","url":"/docs/apps/build/checkout/fields-banners/add-banner"},"add":{"label":"Add a field","url":"/docs/apps/build/checkout/fields-banners/add-field"},"ux_for_fields":{"label":"UX for fields","url":"/docs/apps/build/checkout/fields-banners/ux-for-fields"}}},"delivery_shipping":{"label":"Delivery and shipping","children":{"overview":{"label":"About delivery and shipping","url":"/docs/apps/build/checkout/delivery-shipping"},"additional_address_fields":{"label":"Convert additional address fields","url":"/docs/apps/build/checkout/delivery-shipping/additional-address-fields"},"delivery_options":{"label":"Rename delivery options","children":{"build_delivery_options":{"label":"Build the delivery options function","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function"},"config":{"label":"Add the configuration","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/add-configuration"},"delivery_ui":{"label":"Build the UI","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/build-ui"},"ux_for_delivery_options":{"label":"UX for delivery options","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/ux-for-delivery-options"}}},"delivery_methods":{"label":"Customize delivery methods","children":{"date_picker":{"label":"Build a date picker","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/date-picker"},"local_pickup_charges":{"label":"Create local pickup charges","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/create-local-pickup-charges"},"generate_pick_up_points":{"label":"Generate pickup points","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points"},"ux_for_pickup_points":{"label":"UX for pickup points","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-pickup-points"},"ux_for_delivery_methods":{"label":"UX for delivery methods","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-delivery-methods"}}},"address-autocomplete":{"label":"Customize address autocomplete","children":{"suggest":{"label":"Build a custom address autocomplete extension","url":"/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete"},"format":{"label":"Format suggested addresses","url":"/docs/apps/build/checkout/delivery-shipping/address-autocomplete/format-suggestion"}}}}},"product_offers":{"label":"Product offers","children":{"overview":{"label":"About product offers","url":"/docs/apps/build/checkout/product-offers"},"build_pre_purchase":{"label":"Build a pre-purchase offer","url":"/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer"},"ux_for_pre_purchase":{"label":"UX for pre-purchase offers","url":"/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers"},"build_post_purchase":{"label":"Build a post-purchase offer","url":"/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer"},"subscriptions":{"label":"Create a post-purchase subscription","url":"/docs/apps/build/checkout/product-offers/create-a-post-purchase-subscription"},"ux_for_post_purchase":{"label":"UX for post-purchase offers","url":"/docs/apps/build/checkout/product-offers/ux-for-post-purchase-product-offers"},"subscription":{"label":"UX for post-purchase subscriptions","url":"/docs/apps/build/checkout/product-offers/ux-for-post-purchase-subscriptions"}}},"payments":{"label":"Payments","children":{"overview":{"label":"About payments customizations","url":"/docs/apps/build/checkout/payments"},"getting_started":{"label":"Create the payments function","url":"/docs/apps/build/checkout/payments/create-payments-function"},"config":{"label":"Add the configuration","url":"/docs/apps/build/checkout/payments/add-configuration"},"payments_ui":{"label":"Build the UI","url":"/docs/apps/build/checkout/payments/build-ui"},"ux_for_payments":{"label":"UX for payments","url":"/docs/apps/build/checkout/payments/ux-for-payments"}}},"thank_you_order_status":{"label":"Thank you and Order status","children":{"overview":{"label":"About Thank you and Order status page customizations","url":"/docs/apps/build/checkout/thank-you-order-status"},"add_survey":{"label":"Add a survey","url":"/docs/apps/build/checkout/thank-you-order-status/add-survey"},"ux_for_ty_osp":{"label":"UX for Thank you and Order status pages","url":"/docs/apps/build/checkout/thank-you-order-status/ux-for-thank-you-order-status"}}},"localization":{"label":"Localized UI extensions","children":{"overview":{"label":"About checkout UI extension localization","url":"/docs/apps/build/checkout/localized-checkout-ui-extensions"},"localize_extension":{"label":"Localize a checkout UI extension","url":"/docs/apps/build/checkout/localized-checkout-ui-extensions/localize"}}},"testing":{"label":"Test UI extensions","url":"/docs/apps/build/checkout/test-checkout-ui-extensions"},"multi_page":{"label":"Create multi-page extensions","url":"/docs/apps/build/checkout/create-multi-page-extensions"},"ux_for_checkout":{"label":"UX for checkout","url":"/docs/apps/build/checkout/ux-for-checkout"}}},"customer_accounts":{"label":"Customer accounts","children":{"overview":{"label":"Apps in customer accounts","url":"/docs/apps/build/customer-accounts"},"start_building":{"label":"Start building for customer accounts","url":"/docs/apps/build/customer-accounts/start-building"},"extension_placement":{"label":"Decide on extension placement","url":"/docs/apps/build/customer-accounts/extension-placement"},"ux_for_customer_accounts":{"label":"UX for customer accounts","url":"/docs/apps/build/customer-accounts/ux"},"order_status_page":{"label":"About the Order status page","url":"/docs/apps/build/customer-accounts/order-status-page"},"inline_extensions":{"label":"Inline extensions","children":{"overview":{"label":"About inline extensions","url":"/docs/apps/build/customer-accounts/inline-extensions"},"order_status":{"label":"Build Order status","url":"/docs/apps/build/customer-accounts/inline-extensions/build-order-status"},"profile":{"label":"Build profile","url":"/docs/apps/build/customer-accounts/inline-extensions/build-profile"}}},"pre_auth_order_status_page_extensions":{"label":"Pre-auth Order status page extensions","children":{"overview":{"label":"About pre-auth Order status page extensions","url":"/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions"},"pre_auth_order_status_page_extensions":{"label":"Build pre-auth Order status page extensions","url":"/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions/build-pre-auth-order-status-page-extensions"}}},"order_action_extensions":{"label":"Order action extensions","children":{"overview":{"label":"About order action menus","url":"/docs/apps/build/customer-accounts/order-action-extensions"},"build_order_action_menu_extensions":{"label":"Build for order action menus","url":"/docs/apps/build/customer-accounts/order-action-extensions/build-for-order-action-menus"},"ux_order_actions":{"label":"UX for order actions","url":"/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions"}}},"full_page_extensions":{"label":"Full-page extensions","children":{"overview":{"label":"Add pages to customer accounts","url":"/docs/apps/build/customer-accounts/full-page-extensions"},"build_new_pages":{"label":"Build new pages","url":"/docs/apps/build/customer-accounts/full-page-extensions/build-new-pages"},"ux_for_full_pages":{"label":"UX for full pages","url":"/docs/apps/build/customer-accounts/full-page-extensions/ux-for-full-pages"}}},"metafields":{"label":"Build metafield writes into extensions","url":"/docs/apps/build/customer-accounts/metafields"},"editor_extension_collections":{"feature_flag_enabled":"editor_extension_collections_docs","label":"Editor extension collections","children":{"overview":{"label":"About editor extension collections","url":"/docs/apps/build/customer-accounts/editor-extension-collections"},"getting_started":{"label":"Build an editor extension collection","url":"/docs/apps/build/customer-accounts/editor-extension-collections/build-editor-extension-collection"},"ux_for_editor_collections":{"label":"UX for editor extension collections","url":"/docs/apps/build/customer-accounts/editor-extension-collections/editor-extension-collections-ux-guidelines"}}},"localization":{"label":"Localization","children":{"overview":{"label":"About localizing customer account extensions","url":"/docs/apps/build/customer-accounts/localization"},"localize_extension":{"label":"Localize a customer account extension","url":"/docs/apps/build/customer-accounts/localization/localize"}}},"testing_ui_extensions":{"label":"Test customer account extensions","url":"/docs/apps/build/customer-accounts/test"}}},"flow":{"label":"Flow","children":{"overview":{"label":"About Flow","url":"/docs/apps/build/flow"},"development":{"label":"About Flow development","url":"/docs/apps/build/flow/development"},"triggers":{"label":"Triggers","children":{"overview":{"label":"About triggers","url":"/docs/apps/build/flow/triggers"},"create":{"label":"Create a trigger","url":"/docs/apps/build/flow/triggers/create"},"reference":{"label":"Trigger reference","url":"/docs/apps/build/flow/triggers/reference"}}},"actions":{"label":"Actions","children":{"overview":{"label":"About actions","url":"/docs/apps/build/flow/actions"},"create":{"label":"Create an action","url":"/docs/apps/build/flow/actions/create"},"reference":{"label":"Action reference","url":"/docs/apps/build/flow/actions/reference"},"endpoints":{"label":"Create action endpoints","url":"/docs/apps/build/flow/actions/endpoints"},"build_config_ui":{"label":"Build the configuration UI","url":"/docs/apps/build/flow/actions/build-config-ui"}}},"templates":{"label":"Templates","children":{"overview":{"label":"About templates","url":"/docs/apps/build/flow/templates"},"create":{"label":"Create a template","url":"/docs/apps/build/flow/templates/create-a-template"},"reference":{"label":"Template reference","url":"/docs/apps/build/flow/templates/reference"}}},"track_lifecycle_events":{"label":"Track Flow lifecycle events","url":"/docs/apps/build/flow/track-lifecycle-events"},"migrate_legacy_extensions":{"label":"Migrate legacy Flow extensions","url":"/docs/apps/build/flow/migrate-legacy-extensions"},"configure_complex_types":{"label":"Configure complex data types","url":"/docs/apps/build/flow/configure-complex-data-types"}}},"online_store":{"label":"Online store","children":{"about":{"label":"Apps in the online store","url":"/docs/apps/build/online-store"},"dynamic_data":{"label":"Display dynamic data","url":"/docs/apps/build/online-store/display-dynamic-data"},"theme_app_extensions":{"label":"Theme app extensions","children":{"overview":{"label":"About theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions"},"build_theme_app_extensions":{"label":"Build theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions/build"},"extensions_framework":{"label":"Theme app extension configuration","url":"/docs/apps/build/online-store/theme-app-extensions/configuration"},"ux_for_theme_app_extensions":{"label":"UX for theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions/ux"},"migrate":{"label":"Migrate to theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions/migrate"}}},"version":{"label":"Verify theme support","url":"/docs/apps/build/online-store/verify-support"},"products":{"label":"Manage media for products","url":"/docs/apps/build/online-store/product-media"},"variants":{"label":"Manage media for product variants","url":"/docs/apps/build/online-store/product-variant-media"},"other_integrations":{"label":"ScriptTag resource (legacy)","url":"/docs/apps/build/online-store/script-tag-legacy"},"asset_api":{"label":"Asset resource (legacy)","url":"/docs/apps/build/online-store/asset-legacy"}}},"point_of_sale":{"label":"Point of Sale","children":{"overview":{"label":"Apps in POS","url":"/docs/apps/build/pos"},"embed_app":{"label":"Embed your app in POS","url":"/docs/apps/build/pos/embed-app-in-pos"},"ui_extensions":{"label":"UI extensions","children":{"overview":{"label":"About POS UI extensions","url":"/docs/api/pos-ui-extensions","stepIn":true},"start_building":{"label":"Start building POS UI extensions","url":"/docs/api/pos-ui-extensions/getting-started","stepIn":true},"build_discount":{"label":"Build a POS discount","url":"/docs/api/pos-ui-extensions/example-discount-extension","stepIn":true},"build_print":{"label":"Build a print extension","url":"/docs/api/pos-ui-extensions/example-print-extension","stepIn":true},"debug":{"label":"Debug POS UI extensions","url":"/docs/api/pos-ui-extensions/debugging","stepIn":true},"communicate_server":{"label":"Communicate with a server","url":"/docs/api/pos-ui-extensions/server-communication","stepIn":true},"troubleshoot":{"label":"Troubleshoot UI extensions","url":"/docs/api/pos-ui-extensions/troubleshooting","stepIn":true}}},"legacy_extensions":{"label":"Legacy extensions","children":{"links":{"label":"POS links (legacy)","url":"/docs/apps/build/pos/links-legacy"},"cart":{"label":"POS cart app extensions (legacy)","url":"/docs/apps/build/pos/cart-legacy"},"recommendations":{"label":"POS product recommendations extension (legacy)","url":"/docs/apps/build/pos/recommendations-legacy"}}}}}}},"use_cases_group":{"group_description":"Use cases","links":{"marketing":{"label":"Marketing and analytics","children":{"overview":{"label":"Apps for marketing and analytics","url":"/docs/apps/build/marketing-analytics"},"pixels":{"label":"About web pixels","url":"/docs/apps/build/marketing-analytics/pixels"},"build-web-pixels":{"label":"Build web pixels","url":"/docs/apps/build/marketing-analytics/build-web-pixels"},"customer_segments":{"label":"Customer segments","children":{"overview":{"label":"About customer segments","url":"/docs/apps/build/marketing-analytics/customer-segments"},"build_template_extension":{"label":"Build a template extension","url":"/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension"},"build_action_extension":{"label":"Build an action extension","url":"/docs/apps/build/marketing-analytics/customer-segments/build-an-action-extension"},"manage_customer_segments":{"label":"Manage customer segments","url":"/docs/apps/build/marketing-analytics/customer-segments/manage"},"saved_searches":{"label":"Migrate saved searches","url":"/docs/apps/build/marketing-analytics/customer-segments/migrate-saved-searches"},"async_queries":{"label":"Migrate to async queries","url":"/docs/apps/build/marketing-analytics/customer-segments/migrate-to-async-queries"}}},"marketing":{"label":"Marketing activities","children":{"overview":{"label":"About marketing activities","url":"/docs/apps/build/marketing-analytics/marketing-activities"},"migrate":{"label":"Migrate marketing activity extensions","url":"/docs/apps/build/marketing-analytics/marketing-activities/migrate-extensions"}}},"automations":{"label":"Marketing automations","children":{"overview":{"label":"About marketing automations","url":"/docs/apps/build/marketing-analytics/automations"},"create_actions":{"label":"Create marketing automation actions","url":"/docs/apps/build/marketing-analytics/automations/create-marketing-automation-actions"},"endpoints":{"label":"List of action endpoints","url":"/docs/apps/build/marketing-analytics/automations/action-endpoints"},"custom-configuration":{"label":"Build a configuration page","url":"/docs/apps/build/marketing-analytics/automations/build-custom-configuration-page"}}},"optimize_seo":{"label":"Optimize SEO","url":"/docs/apps/build/marketing-analytics/optimize-storefront-seo"}}},"discounts":{"label":"Discounts","children":{"overview":{"label":"About discounts","url":"/docs/apps/build/discounts"},"build_discount_function":{"label":"Build a discount function","url":"/docs/apps/build/discounts/build-discount-function"},"experience_ui":{"feature_flag_enabled":"extensions_only_discounts_app","label":"Build a discounts UI with UI extensions","url":"/docs/apps/build/discounts/build-ui-extension"},"experience_remix":{"label":"Build a discounts UI with Remix","url":"/docs/apps/build/discounts/build-ui-with-remix"},"discounts-allocator":{"label":"Build a discounts allocator","url":"/docs/apps/build/discounts/build-discounts-allocator"},"ux_for_discounts":{"label":"UX for discounts","url":"/docs/apps/build/discounts/ux-for-discounts"}}},"product_merchandising":{"label":"Product merchandising","children":{"bundles":{"label":"Product bundles","children":{"overview":{"label":"About product bundles","url":"/docs/apps/build/product-merchandising/bundles"},"start_building":{"label":"Start building bundles","url":"/docs/apps/build/product-merchandising/bundles/start-building"},"add_fixed_bundle":{"label":"Add a fixed bundle","children":{"about-fixed-bundles":{"label":"About fixed bundles","url":"/docs/apps/build/product-merchandising/bundles/add-fixed-bundle"},"add-a-product-fixed-bundle":{"label":"Add a product fixed bundle","url":"/docs/apps/build/product-merchandising/bundles/add-product-fixed-bundle"},"add-a-variant-fixed-bundle":{"label":"Add a variant fixed bundle","url":"/docs/apps/build/product-merchandising/bundles/add-variant-fixed-bundle"}}},"add_customized_bundle":{"label":"Add a customized bundle","url":"/docs/apps/build/product-merchandising/bundles/add-customized-bundle"},"add_merchant_ui":{"label":"Add UI for merchant customization","url":"/docs/apps/build/product-merchandising/bundles/add-merchant-config-ui"},"create":{"label":"Create a bundle app","url":"/docs/apps/build/product-merchandising/bundles/create-bundle-app"},"turn_on_publishing":{"label":"Turn on publishing","url":"/docs/apps/build/product-merchandising/bundles/turn-on-publishing"}}},"combined_listings":{"label":"Combined listings","children":{"overview":{"label":"About combined listings","url":"/docs/apps/build/product-merchandising/combined-listings"},"build_combined_listings":{"label":"Build for combined listings","url":"/docs/apps/build/product-merchandising/combined-listings/build-for-combined-listings"}}}}},"purchase_options":{"label":"Purchase options","children":{"overview":{"label":"About custom purchase options","url":"/docs/apps/build/purchase-options"},"subscriptions":{"label":"Subscriptions","children":{"overview":{"label":"About subscriptions","url":"/docs/apps/build/purchase-options/subscriptions"},"model_subscriptions_solution":{"label":"Model a subscriptions solution","url":"/docs/apps/build/purchase-options/subscriptions/model-subscriptions-solution"},"selling_plans":{"label":"Selling plans","children":{"about_selling_plans":{"label":"About selling plans","url":"/docs/apps/build/purchase-options/subscriptions/selling-plans"},"build_selling_plan":{"label":"Build a selling plan","url":"/docs/apps/build/purchase-options/subscriptions/selling-plans/build-a-selling-plan"}}},"subscription_contracts":{"label":"Subscription contracts","children":{"about_subscription_contracts":{"label":"About subscription contracts","url":"/docs/apps/build/purchase-options/subscriptions/contracts"},"create_contract":{"label":"Build a subscription contract","url":"/docs/apps/build/purchase-options/subscriptions/contracts/build-a-subscription-contract"},"update_contract":{"label":"Update a subscription contract","url":"/docs/apps/build/purchase-options/subscriptions/contracts/update-a-subscription-contract"},"combine":{"label":"Combine subscription contracts","url":"/docs/apps/build/purchase-options/subscriptions/contracts/combine-subscription-contracts"},"subscription_link_extensions":{"feature_flag_enabled":"cli_managed_subscription_link_creation_and_migration","label":"Subscription link extensions","children":{"overview":{"label":"Build a subscription link extension","url":"/docs/apps/build/purchase-options/subscriptions/contracts/subscription-link-extensions/start-building"},"migrate-extension-to-shopify-cli":{"label":"Migrate existing extensions to Shopify CLI","url":"/docs/apps/build/purchase-options/subscriptions/contracts/subscription-link-extensions/migrate-to-cli"}}}}},"billing_cycles":{"label":"Billing cycles","children":{"about_billing_cycles":{"label":"About subscription billing cycles","url":"/docs/apps/build/purchase-options/subscriptions/billing-cycles"},"manage":{"label":"Manage billing cycle contracts","url":"/docs/apps/build/purchase-options/subscriptions/billing-cycles/manage-billing-cycle-contracts"},"bulk":{"label":"Manage billing cycles in bulk","url":"/docs/apps/build/purchase-options/subscriptions/billing-cycles/bulk-billing-cycles"}}},"fulfillments":{"label":"Fulfillments","children":{"about_fulfillments":{"label":"About fulfillment for subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/fulfillments"},"orders":{"label":"Sync orders and subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/fulfillments/sync-orders-subscriptions"},"advanced":{"label":"Manage fulfillments for prepaid subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/fulfillments/manage-subscription-fulfillments"}}},"migrate":{"label":"Migrate to the Subscriptions API","children":{"overview":{"label":"Subscriptions API migration guide","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api"},"customers":{"label":"Migrate customer information","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/migrate-customer-information"},"migrate":{"label":"Migrate existing subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/migrate-subscription-contracts"},"ux":{"label":"UX for migration","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/ux-for-migration"}}}}},"pre-orders-tbyb":{"label":"Pre-orders and Try Before You Buy","children":{"overview":{"label":"About pre-orders and Try Before You Buy","url":"/docs/apps/build/purchase-options/deferred"},"modeling":{"label":"Model pre-orders and Try Before You Buy","url":"/docs/apps/build/purchase-options/deferred/model-deferred-purchase-solutions"},"manage_deferred":{"label":"Build a pre-order and Try Before You Buy solution","url":"/docs/apps/build/purchase-options/deferred/build-deferment-solution"},"delivery_and_deferment":{"label":"Delivery and deferment","children":{"overview":{"label":"About delivery for pre-order and Try Before You Buy","url":"/docs/apps/build/purchase-options/deferred/delivery-and-deferment"},"build_delivery_profiles":{"label":"Build delivery profiles","url":"/docs/apps/build/purchase-options/deferred/delivery-and-deferment/build-delivery-profiles"}}},"build_app":{"label":"Building your app","children":{"start_building":{"label":"Start building a pre-order and Try Before You Buy (TBYB) app","url":"/docs/apps/build/purchase-options/deferred/create-deferred-purchase-app/start-building"},"create_ui":{"label":"Create the UI","url":"/docs/apps/build/purchase-options/deferred/create-deferred-purchase-app/create-ui"}}}}},"extensions":{"label":"Product subscription app extensions","children":{"overview":{"label":"About product subscription app extensions","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions"},"start_building":{"label":"Start building product subscription app extensions","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/start-building"},"extension_points":{"label":"Extension points","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/extension-points"},"auth":{"label":"Authenticate app extension requests","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/authenticate-extension-requests"},"create_manage":{"label":"Create and manage app extensions","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/create-and-manage"}}},"admin_extensions":{"feature_flag_enabled":"purchase_options_extensions","label":"Purchase options extensions","children":{"overview":{"label":"About purchase options extensions","url":"/docs/apps/build/purchase-options/purchase-options-extensions"},"start_building":{"label":"Start building purchase options extensions","url":"/docs/apps/build/purchase-options/purchase-options-extensions/start-building"}}},"portals":{"label":"Build a customer-facing purchase-option portal","children":{"overview":{"label":"About customer-facing portals","url":"/docs/apps/build/purchase-options/customer-portal"},"create_portals":{"label":"Create customer-facing portals","url":"/docs/apps/build/purchase-options/customer-portal/create-customer-portal"}}}}},"markets":{"label":"Global markets","children":{"overview":{"label":"About Shopify Markets","url":"/docs/apps/build/markets"},"catalogs":{"label":"About catalogs for different markets","url":"/docs/apps/build/markets/catalogs-different-markets"},"build_catalog":{"label":"Build a catalog","url":"/docs/apps/build/markets/build-catalog"},"migrate":{"label":"Migrate to catalogs","url":"/docs/apps/build/markets/migrate-to-catalogs"},"translations":{"label":"Manage translated content","url":"/docs/apps/build/markets/manage-translated-content"},"locally_required_order_data":{"label":"Add locally required order data","url":"/docs/apps/build/markets/add-locally-required-order-data"}}},"orders_fulfillment":{"label":"Orders and fulfillment","children":{"overview":{"label":"Apps in orders and fulfillment","url":"/docs/apps/build/orders-fulfillment"},"inventory":{"label":"Inventory management","children":{"overview":{"label":"Apps in inventory management","url":"/docs/apps/build/orders-fulfillment/inventory-management-apps"},"manage_inventory":{"label":"Manage inventory","url":"/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states"}}},"orders":{"label":"Order management","children":{"overview":{"label":"Apps in order management","url":"/docs/apps/build/orders-fulfillment/order-management-apps"},"edit_orders":{"label":"Edit existing orders","url":"/docs/apps/build/orders-fulfillment/order-management-apps/edit-orders"},"build_fulfillment_solutions":{"label":"Build fulfillment solutions","url":"/docs/apps/build/orders-fulfillment/order-management-apps/build-fulfillment-solutions"},"track_orders":{"label":"Track orders on other platforms","url":"/docs/apps/build/orders-fulfillment/order-management-apps/track-orders-other-platforms"}}},"order_routing":{"label":"Order routing and fulfillment","children":{"overview":{"label":"Apps in order routing","url":"/docs/apps/build/orders-fulfillment/order-routing-apps"},"location-rules":{"label":"Location rules","children":{"overview":{"label":"About location rules","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules"},"build_function":{"label":"Build a location rule function","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function"},"add_configuration":{"label":"Add configuration","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/add-configuration"},"build_ui":{"label":"Build the UI","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-ui"}}},"fulfillment-constraints":{"label":"Build fulfillment constraints","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints"},"build_local_pickup_options":{"label":"Build local pickup options","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options"}}},"service":{"label":"Fulfillment services","children":{"overview":{"label":"About fulfillment services","url":"/docs/apps/build/orders-fulfillment/fulfillment-service-apps"},"build_fulfillment_services":{"label":"Build for fulfillment services","url":"/docs/apps/build/orders-fulfillment/fulfillment-service-apps/build-for-fulfillment-services"}}},"returns":{"label":"Returns","children":{"overview":{"label":"Apps in returns","url":"/docs/apps/build/orders-fulfillment/returns-apps"},"build_return_management":{"label":"Build for return management","url":"/docs/apps/build/orders-fulfillment/returns-apps/build-return-management"},"manage_exchanges":{"label":"Manage exchanges","url":"/docs/apps/build/orders-fulfillment/returns-apps/manage-exchanges"},"view_refund_duties":{"label":"View and refund duties","url":"/docs/apps/build/orders-fulfillment/returns-apps/view-and-refund-duties"},"manage_reverse_fulfillment":{"label":"Manage reverse fulfillment orders","url":"/docs/apps/build/orders-fulfillment/returns-apps/manage-reverse-fulfillment-orders"},"manage_reverse_deliveries":{"label":"Manage reverse deliveries","url":"/docs/apps/build/orders-fulfillment/returns-apps/manage-reverse-deliveries"}}},"migrate":{"label":"Migrate to fulfillment orders","url":"/docs/apps/build/orders-fulfillment/migrate-to-fulfillment-orders"}}},"payments":{"label":"Payments","children":{"overview":{"label":"Payments extensions","url":"/docs/apps/build/payments"},"requirements":{"label":"Requirements for payments extensions","url":"/docs/apps/build/payments/requirements"},"approval":{"label":"Get approved for payments","url":"/docs/apps/build/payments/payments-extension-review"},"build":{"label":"Build a payments extension","children":{"processing-overview":{"label":"About payment processing","url":"/docs/apps/build/payments/processing"},"build-offsite":{"label":"Build an offsite payments extension","children":{"tutorial":{"label":"Use Shopify CLI","url":"/docs/apps/build/payments/offsite/use-the-cli"}}},"credit-card":{"label":"Build a credit card payments extension","children":{"tutorial":{"label":"Use Shopify CLI","url":"/docs/apps/build/payments/credit-card/use-the-cli"},"manage-encryption-certificates":{"label":"Manage encryption certificates","url":"/docs/apps/build/payments/credit-card/manage-encryption-certificates"},"test-certificate":{"label":"Configure test certificate","url":"/docs/apps/build/payments/credit-card/test-certificate"},"extensibility-tutorial":{"label":"Build with UI extensibility","url":"/docs/apps/build/payments/credit-card/with-extensibility"},"custom-credit-card":{"label":"Build a Shopify custom credit card payments extension","url":"/docs/apps/build/payments/credit-card/custom/use-the-cli"}}},"alternative":{"label":"Build an alternative payments extension","url":"/docs/apps/build/payments/alternative/build-an-alternative-payment-extension"},"redeemable":{"label":"Build a redeemables payments extension","url":"/docs/apps/build/payments/redeemables/build-a-redeemables-payment-extension"},"implementation":{"label":"Implementation considerations","url":"/docs/apps/build/payments/considerations"},"request-reference":{"label":"Request reference","url":"/docs/apps/build/payments/request-reference"}}},"onboard":{"label":"Onboard merchants to your extension","url":"/docs/apps/build/payments/onboard-a-merchant-payments-extension"},"migrate-extensions-to-shopify-cli":{"label":"Migrate extensions to Shopify CLI","url":"/docs/apps/build/payments/migrate-extensions-to-shopify-cli"}}},"sales_channels":{"label":"Sales channels","children":{"overview":{"label":"Apps as sales channels","url":"/docs/apps/build/sales-channels"},"start_building":{"label":"Start building a sales channel","url":"/docs/apps/build/sales-channels/start-building"},"product_sync":{"label":"Product sync","url":"/docs/apps/build/sales-channels/product-sync"},"contextual_product_feeds":{"label":"Contextual Product Feeds","url":"/docs/apps/build/sales-channels/contextual-product-feeds"},"scheduled_publishing":{"label":"About scheduled publishing","url":"/docs/apps/build/sales-channels/scheduled-product-publishing"},"enable":{"label":"Enable scheduled publishing","url":"/docs/apps/build/sales-channels/enable-scheduled-publishing"}}},"b2b":{"label":"B2B","children":{"overview":{"label":"Apps and B2B","url":"/docs/apps/build/b2b"},"start_building":{"label":"Start building for B2B","url":"/docs/apps/build/b2b/start-building"},"manage_client_companies":{"label":"Manage client company locations","url":"/docs/apps/build/b2b/manage-client-company-locations"},"manage_catalogs":{"label":"Manage B2B catalogs","url":"/docs/apps/build/b2b/manage-catalogs"},"draft_orders":{"label":"Use draft orders","url":"/docs/apps/build/b2b/draft-orders"},"b2b_checkout_ui":{"label":"Create B2B checkout UI","url":"/docs/apps/build/b2b/create-checkout-ui"}}},"blockchain":{"label":"Blockchain","children":{"overview":{"label":"Apps in blockchain","url":"/docs/apps/build/blockchain"},"nft_distribution":{"label":"NFT distribution","children":{"overview":{"label":"About NFT distribution","url":"/docs/apps/build/blockchain/nft-distribution"},"nft_eligibility":{"label":"Check NFT sales eligibility","url":"/docs/apps/build/blockchain/nft-distribution/check-nft-sales-eligibility"},"merchant_eligibility":{"label":"Check merchant eligibility","url":"/docs/apps/build/blockchain/nft-distribution/check-merchant-eligibility"},"nft_distribution_ux_guidelines":{"label":"UX for NFT distribution","url":"/docs/apps/build/blockchain/nft-distribution/ux-for-nft-distribution"}}},"tokengating":{"label":"Tokengating","children":{"overview":{"label":"About tokengating","url":"/docs/apps/build/blockchain/tokengating"},"build-a-tokengating-app":{"label":"Build a tokengating app","children":{"overview":{"label":"Apps for tokengating","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app"},"creates_gates_admin":{"label":"Create gates","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gates-admin"},"show_gates_storefront":{"label":"Show gates","url":"/docs/apps/selling-strategies/blockchain/tokengating/build-a-tokengating-app/show-gates-storefront"},"shopify_function_gate_reaction":{"label":"Create the gated discount function","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gated-discount-function"}}},"build_a_tokengated_storefront":{"label":"Build a tokengated storefront","children":{"overview":{"label":"About tokengated storefronts","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront"},"start_building":{"label":"Start building a tokengated storefront","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/start-building"},"save_wallet_to_session":{"label":"Save a connected wallet to session storage","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/save-wallet-to-session"},"read_and_evaluate_gates":{"label":"Read and evaluate gates","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/read-and-evaluate-gates"},"write_gate_context_to_cart_attributes":{"label":"Write gate context to cart attributes","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/write-gate-context-to-cart-attributes"}}},"ux_for_tokengating":{"label":"UX for tokengating","url":"/docs/apps/build/blockchain/tokengating/ux-for-tokengating"}}}}}}},"best_practices_group":{"group_description":"Best practices","links":{"performance":{"label":"Performance","children":{"overview":{"label":"About performance optimization","url":"/docs/apps/build/performance"},"general":{"label":"General app performance","url":"/docs/apps/build/performance/general-best-practices"},"admin":{"label":"Admin, installation, and OAuth performance","url":"/docs/apps/build/performance/admin-installation-oauth"},"storefront":{"label":"Storefront performance","url":"/docs/apps/build/performance/storefront"},"checkout":{"label":"Checkout performance","url":"/docs/apps/build/performance/checkout"}}},"accessibility":{"label":"Accessibility","url":"/docs/apps/build/accessibility"},"internationalization":{"label":"Localize your app","url":"/docs/apps/build/localize-your-app"},"embedding":{"label":"Integrating with Shopify","url":"/docs/apps/build/integrating-with-shopify"},"mobile":{"label":"Mobile support","url":"/docs/apps/build/mobile-support"},"deceptive_code":{"label":"Non-deceptive code","url":"/docs/apps/build/non-deceptive-code"},"privacy_law_compliance":{"label":"Privacy law compliance","url":"/docs/apps/build/privacy-law-compliance"},"security":{"label":"Security","children":{"common_vulnerabilities":{"label":"Protect against common vulnerabilities","url":"/docs/apps/build/security/protect-against-common-vulnerabilities"},"tls_certificates":{"label":"Encrypt with TLS","url":"/docs/apps/build/security/encrypt-with-tls"},"iframe_protection":{"label":"Set up iframe protection","url":"/docs/apps/build/security/set-up-iframe-protection"},"network_services":{"label":"Secure your network service ports","url":"/docs/apps/build/security/secure-network-service-ports"},"secure_tokens":{"label":"Generate secure tokens","url":"/docs/apps/build/security/generate-secure-tokens"},"short_links":{"label":"Shorten URLs with care","url":"/docs/apps/build/security/shorten-urls-with-care"}}}}},"building_blocks_group":{"group_description":"Building blocks","links":{"graphql":{"label":"GraphQL","children":{"overview":{"label":"About GraphQL","url":"/docs/apps/build/graphql"},"graphql-basics":{"label":"GraphQL basics","children":{"queries":{"label":"Queries","url":"/docs/apps/build/graphql/basics/queries"},"mutations":{"label":"Mutations","url":"/docs/apps/build/graphql/basics/mutations"},"variables":{"label":"Variables","url":"/docs/apps/build/graphql/basics/variables"},"advanced":{"label":"Advanced concepts","url":"/docs/apps/build/graphql/basics/advanced"}}},"migrating":{"label":"Migrate to GraphQL from REST","children":{"overview":{"label":"About REST to GraphQL migration","url":"/docs/apps/build/graphql/migrate"},"learn-how":{"label":"Learn how to migrate","url":"/docs/apps/build/graphql/migrate/learn-how"},"libraries":{"label":"Update API calls in your app","url":"/docs/apps/build/graphql/migrate/libraries"},"new_product_model":{"label":"New product model","children":{"overview":{"label":"About the new product model","url":"/docs/apps/build/graphql/migrate/new-product-model"},"api_updates":{"label":"API updates","url":"/docs/apps/build/graphql/migrate/new-product-model/api-updates"},"product_model_resources":{"label":"Product model and components","url":"/docs/apps/build/graphql/migrate/new-product-model/product-model-components"},"migrate_and_test":{"label":"Migrate and test high-variants","url":"/docs/apps/build/graphql/migrate/new-product-model/migrate-and-test"},"retrieve_data":{"label":"Retrieve product data","url":"/docs/apps/build/graphql/migrate/new-product-model/retrieve-data"},"add_data":{"label":"Add product data","url":"/docs/apps/build/graphql/migrate/new-product-model/add-data"},"edit_data":{"label":"Edit product data","url":"/docs/apps/build/graphql/migrate/new-product-model/edit-data"},"sync_data":{"label":"Sync product data","url":"/docs/apps/build/graphql/migrate/new-product-model/sync-data"},"metafield_linked_options":{"label":"Linking metafields to options","url":"/docs/apps/build/graphql/migrate/new-product-model/metafield-linked"}}}}}}},"extensions":{"label":"Extensions","children":{"overview":{"label":"About extensions","url":"/docs/apps/build/app-extensions"},"list":{"label":"List of app extensions","url":"/docs/apps/build/app-extensions/list-of-app-extensions"},"build_app":{"label":"Build an extension-only app","url":"/docs/apps/build/app-extensions/build-extension-only-app"},"configure_extensions":{"label":"Configure app extensions","url":"/docs/apps/build/app-extensions/configure-app-extensions"},"remove_extension":{"label":"Remove an extension","url":"/docs/apps/build/app-extensions/remove-app-extension"}}},"functions":{"label":"Shopify Functions","children":{"overview":{"label":"About Shopify Functions","url":"/docs/apps/build/functions"},"input-output":{"label":"Input and output","children":{"overview":{"label":"About input and output","url":"/docs/apps/build/functions/input-output"},"input-queries":{"label":"Metafields for input queries","url":"/docs/apps/build/functions/input-output/metafields-for-input-queries"},"variables":{"label":"Use variables in input queries","url":"/docs/apps/build/functions/input-output/use-variables-input-queries"},"network-access":{"label":"Network access","children":{"overview":{"label":"About network access","url":"/docs/apps/build/functions/input-output/network-access"},"using-network-access":{"label":"Use network access","url":"/docs/apps/build/functions/input-output/network-access/use-network-access"},"performance":{"label":"About performance and resilience","url":"/docs/apps/build/functions/input-output/network-access/performance-and-resilience"},"graphql":{"label":"GraphQL reference","url":"/docs/apps/build/functions/input-output/network-access/graphql"}}}}},"language_support":{"label":"Programming languages","children":{"overview":{"label":"Language considerations","url":"/docs/apps/build/functions/programming-languages"},"rust":{"label":"Rust for Functions","url":"/docs/apps/build/functions/programming-languages/rust-for-functions"},"javascript":{"label":"JavaScript for Functions","url":"/docs/apps/build/functions/programming-languages/javascript-for-functions"},"webassembly":{"label":"WebAssembly","url":"/docs/apps/build/functions/programming-languages/webassembly-for-functions"}}},"test_debug":{"label":"Test and debug Shopify Functions","url":"/docs/apps/build/functions/test-debug-functions"},"monitoring_errors":{"label":"Monitoring and handling errors in production","url":"/docs/apps/build/functions/monitoring-and-errors"},"localization_practices":{"label":"Localization practices for Shopify Functions","url":"/docs/apps/build/functions/localization-practices-shopify-functions"}}},"webhooks":{"label":"Webhooks","children":{"overview":{"label":"About webhooks","url":"/docs/apps/build/webhooks"},"subscribe":{"label":"Subscribe","children":{"overview":{"label":"About subscriptions","url":"/docs/apps/build/webhooks/subscribe"},"get-started":{"label":"Create a subscription","url":"/docs/apps/build/webhooks/subscribe/get-started"},"using-api":{"label":"Subscribe using Admin API","url":"/docs/apps/build/webhooks/subscribe/subscribe-using-api"},"https":{"label":"Deliver through HTTPS","url":"/docs/apps/build/webhooks/subscribe/https"},"use_newer_version":{"label":"Use a newer API version","url":"/docs/apps/build/webhooks/subscribe/use-newer-api-version"}}},"customize":{"label":"Customize","children":{"overview":{"label":"About customizing your webhooks","url":"/docs/apps/build/webhooks/customize"},"filters":{"label":"Filter events","url":"/docs/apps/build/webhooks/customize/filters"},"modifications":{"label":"Modify payloads","url":"/docs/apps/build/webhooks/customize/modify_payloads"},"sub_topics":{"label":"About sub-topics","url":"/docs/apps/build/webhooks/customize/sub-topics"}}},"duplicates":{"label":"Ignore duplicates","url":"/docs/apps/build/webhooks/ignore-duplicates"},"delivery_metrics":{"label":"Troubleshoot","url":"/docs/apps/build/webhooks/troubleshooting-webhooks"},"best_practices":{"label":"Best practices","url":"/docs/apps/build/webhooks/best-practices"}}},"custom-data":{"label":"Custom data","children":{"overview":{"label":"About metafields and metaobjects","url":"/docs/apps/build/custom-data"},"ownership":{"label":"About reserved prefixes","url":"/docs/apps/build/custom-data/reserved-prefixes"},"metafields":{"label":"Metafields","children":{"types":{"label":"List of data types","url":"/docs/apps/build/custom-data/metafields/list-of-data-types"},"manage_metafields":{"label":"Manage metafields","url":"/docs/apps/build/custom-data/metafields/manage-metafields"},"definitions":{"label":"Definitions","children":{"overview":{"label":"About metafield definitions","url":"/docs/apps/build/custom-data/metafields/definitions"},"access_controls_metafields":{"label":"Use access controls for metafield","url":"/docs/apps/build/custom-data/metafields/definitions/use-access-controls-metafields"},"conditional_metafield_definitions":{"label":"Conditional metafield definitions","url":"/docs/apps/build/custom-data/metafields/definitions/conditional-metafield-definitions"},"standard_metafield_definitions_list":{"label":"List of standard definitions","url":"/docs/apps/build/custom-data/metafields/definitions/list-of-standard-definitions"},"manage_metafield_definitions":{"label":"Manage metafield definitions","url":"/docs/apps/build/custom-data/metafields/definitions/manage-metafield-definitions"},"validation_options_list":{"label":"List of validation options","url":"/docs/apps/build/custom-data/metafields/definitions/list-of-validation-options"},"set_validation_rules":{"label":"Set validation rules","url":"/docs/apps/build/custom-data/metafields/definitions/set-validation-rules"}}},"app_data_metafields":{"label":"Use app-data metafields","url":"/docs/apps/build/custom-data/metafields/use-app-data-metafields"},"private_metafields":{"label":"Manage private metafields","url":"/docs/apps/build/custom-data/metafields/manage-private-metafields"},"migrate_private_metafields":{"label":"Migrate private metafields","url":"/docs/apps/build/custom-data/metafields/migrate-private-metafields"},"capabilities":{"label":"Use metafield capabilities","url":"/docs/apps/build/custom-data/metafields/use-metafield-capabilities"},"migrate_metafields":{"label":"Migrate metafields","url":"/docs/apps/build/custom-data/metafields/migrate-metafields"},"query_by_metafield_value":{"label":"Query by metafield value","url":"/docs/apps/build/custom-data/metafields/query-by-metafield-value"}}},"metaobjects":{"label":"Metaobjects","children":{"work_with_metaobjects":{"label":"Work with metaobjects","url":"/docs/apps/build/custom-data/metaobjects/work-with-metaobjects"},"access_controls":{"label":"Use access controls for metaobjects","url":"/docs/apps/build/custom-data/metaobjects/use-access-controls-metaobjects"},"capabilities":{"label":"Use metaobject capabilities","url":"/docs/apps/build/custom-data/metaobjects/use-metaobject-capabilities"},"standard_metaobject_definitions_list":{"label":"List of standard definitions","url":"/docs/apps/build/custom-data/metaobjects/list-of-standard-definitions"},"limits":{"label":"Metaobject limits","url":"/docs/apps/build/custom-data/metaobjects/metaobject-limits"}}}}},"authentication":{"label":"Authentication","children":{"overview":{"label":"Authentication and authorization","url":"/docs/apps/build/authentication-authorization"},"installation":{"label":"App installation","children":{"overview":{"label":"Enable Shopify-managed installations","url":"/docs/apps/build/authentication-authorization/app-installation"},"manage-access-scopes":{"feature_flag_enabled":"optional_scopes","label":"Manage access scopes","url":"/docs/apps/build/authentication-authorization/app-installation/manage-access-scopes"},"uninstall-app":{"label":"Uninstall an app with an API request","url":"/docs/apps/build/authentication-authorization/app-installation/uninstall-app-api-request"}}},"session_tokens":{"label":"Session tokens","children":{"about_session_tokens":{"label":"About session tokens","url":"/docs/apps/build/authentication-authorization/session-tokens"},"set_up_session_tokens":{"label":"Set up session tokens","url":"/docs/apps/build/authentication-authorization/session-tokens/set-up-session-tokens"}}},"token_types":{"label":"Access tokens","children":{"about_token_acquisition":{"label":"About token acquisition","url":"/docs/apps/build/authentication-authorization/access-tokens/"},"token_exchange":{"label":"Token exchange","url":"/docs/apps/build/authentication-authorization/access-tokens/token-exchange"},"authorization_code_grant":{"label":"Authorization code grant","url":"/docs/apps/build/authentication-authorization/access-tokens/authorization-code-grant"},"admin_created_apps":{"label":"Access tokens for custom apps","url":"/docs/apps/build/authentication-authorization/access-tokens/generate-app-access-tokens-admin"},"online":{"label":"Online access tokens","url":"/docs/apps/build/authentication-authorization/access-tokens/online-access-tokens"},"offline":{"label":"Offline access tokens","url":"/docs/apps/build/authentication-authorization/access-tokens/offline-access-tokens"},"delegate_access_tokens":{"label":"Delegate access tokens","url":"/docs/apps/build/authentication-authorization/access-tokens/use-delegate-tokens"}}},"client_secret":{"label":"Client secret / API key","children":{"overview":{"label":"About client secrets","url":"/docs/apps/build/authentication-authorization/client-secrets"},"rotate":{"label":"Rotate or revoke client credentials","url":"/docs/apps/build/authentication-authorization/client-secrets/rotate-revoke-client-credentials"}}},"set_embedded_auth":{"label":"Set up embedded app authorization","url":"/docs/apps/build/authentication-authorization/set-embedded-app-authorization"}}}}}},"apps_design":{"heading":"Design","guidelines_group":{"group_description":"Guidelines","links":{"overview":{"label":"Overview","url":"/docs/apps/design"},"app_structure":{"label":"App structure","url":"/docs/apps/design/app-structure","always_show_links":true,"anchor_links":{"anatomy":{"label":"Anatomy","url":"/docs/apps/design/app-structure#anatomy"},"app_body":{"label":"App body","url":"/docs/apps/design/app-structure#app-body"},"max_modal":{"label":"Max modal","url":"/docs/apps/design/app-structure#max-modal"},"admin_ui_extensions":{"label":"Admin UI extensions","url":"/docs/apps/design/app-structure#admin-ui-extensions"}}},"layout":{"label":"Layout","url":"/docs/apps/design/layout","always_show_links":true,"anchor_links":{"responsive":{"label":"Responsive layout grid","url":"/docs/apps/design/layout#responsive-layout-grid"},"width":{"label":"App body width","url":"/docs/apps/design/layout#app-body-width"},"options":{"label":"Layout options","url":"/docs/apps/design/layout#layout-options"},"spacing":{"label":"Spacing","url":"/docs/apps/design/layout#spacing"},"information_density":{"label":"Information density","url":"/docs/apps/design/layout#information-density"},"containers":{"label":"Containers","url":"/docs/apps/design/layout#containers"}}},"visual_design":{"label":"Visual design","url":"/docs/apps/design/visual-design","always_show_links":true,"anchor_links":{"color":{"label":"Color","url":"/docs/apps/design/visual-design#color"},"app_icon":{"label":"App icon","url":"/docs/apps/design/visual-design#app-icon"},"typography":{"label":"Typography","url":"/docs/apps/design/visual-design#typography"},"icons":{"label":"Icons","url":"/docs/apps/design/visual-design#icons"},"illustrations":{"label":"Illustrations","url":"/docs/apps/design/visual-design#illustrations"}}},"content":{"label":"Content","url":"/docs/apps/design/content","always_show_links":true,"anchor_links":{"voice_and_tone":{"label":"Voice and tone","url":"/docs/apps/design/content#voice-tone"},"prod_content":{"label":"Product content","url":"/docs/apps/design/content#product-content"},"grammar_and_mechanics":{"label":"Grammar and mechanics","url":"/docs/apps/design/content#grammar"}}},"navigation":{"label":"Navigation","url":"/docs/apps/design/navigation","always_show_links":true,"anchor_links":{"info_architecture":{"label":"Information architecture","url":"/docs/apps/design/navigation#info-architecture"},"appnav":{"label":"App nav","url":"/docs/apps/design/navigation#app-nav"},"appheader":{"label":"App header","url":"/docs/apps/design/navigation#app-header"},"pageheader":{"label":"Page header","url":"/docs/apps/design/navigation#page-header"}}}}},"ux_group":{"group_description":"UX strategies","links":{"alerts":{"label":"Alerts","url":"/docs/apps/design/user-experience/alerts"},"app_home_page":{"label":"App home page","url":"/docs/apps/design/user-experience/app-home-page"},"onboarding":{"label":"Onboarding","url":"/docs/apps/design/user-experience/onboarding"},"marketing":{"label":"Marketing","url":"/docs/apps/design/user-experience/marketing"},"forms":{"label":"Forms","url":"/docs/apps/design/user-experience/forms"},"subscription_apps":{"label":"Subscription apps","url":"/docs/apps/design/user-experience/subscription-apps"}}}},"apps_launch":{"heading":"Launch","quality_assurance_group":{"group_description":"Quality assurance","links":{"apps":{"label":"Going live","url":"/docs/apps/launch"},"requirements_checklist":{"label":"Checklist of requirements","url":"/docs/apps/launch/app-requirements-checklist"},"built-for-shopify":{"label":"Built for Shopify status","children":{"overview":{"label":"About Built for Shopify","url":"/docs/apps/launch/built-for-shopify"},"criteria":{"label":"Achievement criteria","url":"/docs/apps/launch/built-for-shopify/achievement-criteria"},"criteria-categories":{"label":"Category-specific achievement criteria","url":"/docs/apps/launch/built-for-shopify/category-achievement-criteria"},"annual_review":{"label":"Annual reviews","url":"/docs/apps/launch/built-for-shopify/annual-reviews"},"regain_status":{"label":"Regain lost status","url":"/docs/apps/launch/built-for-shopify/regain-lost-status"}}},"privacy-requirements":{"label":"Privacy requirements","url":"/docs/apps/launch/privacy-requirements"},"data_protection":{"label":"Work with protected customer data","url":"/docs/apps/launch/protected-customer-data"}}},"pricing_strategy_group":{"group_description":"Pricing strategy","links":{"overview":{"label":"About billing for your app","url":"/docs/apps/launch/billing"},"managed_pricing":{"label":"Managed pricing","url":"/docs/apps/launch/billing/managed-pricing"},"trials":{"label":"Offer free trials","url":"/docs/apps/launch/billing/offer-free-trials"},"subscriptions":{"label":"Subscription billing","children":{"overview":{"label":"About subscription billing","url":"/docs/apps/launch/billing/subscription-billing"},"time_based_subscription":{"label":"Create time-based subscriptions","url":"/docs/apps/launch/billing/subscription-billing/create-time-based-subscriptions"},"usage_based_subscription":{"label":"Create usage-based subscriptions","url":"/docs/apps/launch/billing/subscription-billing/create-usage-based-subscriptions"},"combine_time_usage_subscription":{"label":"Combine time and usage","url":"/docs/apps/launch/billing/subscription-billing/combine-time-and-usage"},"complex_pricing_models":{"label":"Complex pricing models","url":"/docs/apps/launch/billing/subscription-billing/complex-pricing-models"},"update_max_charge":{"label":"Update the maximum charge","url":"/docs/apps/launch/billing/subscription-billing/update-max-charge"},"subscription_discounts":{"label":"Offer subscription discounts","url":"/docs/apps/launch/billing/subscription-billing/offer-subscription-discounts"}}},"one_time":{"label":"Support one-time purchases","url":"/docs/apps/launch/billing/support-one-time-purchases"},"award_app_credits":{"label":"Award app credits","url":"/docs/apps/launch/billing/award-app-credits"},"refund_app_charges":{"label":"Refund app charges","url":"/docs/apps/launch/billing/refund-app-charges"},"view_charges_earnings":{"label":"View charges and earnings","url":"/docs/apps/launch/billing/view-charges-earnings"}}},"deployment_group":{"group_description":"Deployment","links":{"overview":{"label":"About deployment","url":"/docs/apps/launch/deployment"},"deploy_web":{"label":"Deploy a web app","children":{"overview":{"label":"Deploy to a hosting service","url":"/docs/apps/launch/deployment/deploy-web-app/deploy-to-hosting-service"},"fly":{"label":"Deploy to Fly.io","url":"/docs/apps/launch/deployment/deploy-web-app/deploy-to-fly"},"heroku":{"label":"Deploy to Heroku","url":"/docs/apps/launch/deployment/deploy-web-app/deploy-to-heroku"}}},"app_versions":{"label":"About app versions","url":"/docs/apps/launch/deployment/app-versions"},"deploy_app_versions":{"label":"Deploy and release app versions","url":"/docs/apps/launch/deployment/deploy-app-versions"},"ci_cd":{"label":"Deploy app components in a CD pipeline","url":"/docs/apps/launch/deployment/deploy-in-ci-cd-pipeline"}}},"reaching_customers_group":{"group_description":"Reaching customers","links":{"overview":{"label":"About app distribution","url":"/docs/apps/launch/distribution"},"distribution_method":{"label":"Select a distribution method","url":"/docs/apps/launch/distribution/select-distribution-method"},"support_customers":{"label":"Support your customers","url":"/docs/apps/launch/distribution/support-your-customers"},"sunsetting":{"label":"Sunsetting your app","url":"/docs/apps/launch/distribution/sunsetting-your-app"},"go_to_market_success":{"label":"Go-to-market success","url":"/docs/apps/launch/distribution/go-to-market-success"},"track_app_usage":{"label":"Track app usage","url":"/docs/apps/launch/distribution/track-app-usage"},"app_listing_visibility":{"label":"App listing visibility","url":"/docs/apps/launch/distribution/visibility"},"revenue_share":{"label":"App revenue share","url":"/docs/apps/launch/distribution/revenue-share"}}},"app_store_review_group":{"group_description":"Shopify app store review","links":{"overview":{"label":"About the Shopify App Store","url":"/docs/apps/launch/app-store-review"},"review":{"label":"About the app review process","url":"/docs/apps/launch/app-store-review/review-process"},"submit":{"label":"Submit your app for review","url":"/docs/apps/launch/app-store-review/submit-app-for-review"},"pass_review":{"label":"Pass app review","url":"/docs/apps/launch/app-store-review/pass-app-review"},"app_listing_categories":{"label":"App listing categories","url":"/docs/apps/launch/app-store-review/app-listing-categories"},"policy_violations":{"label":"Policy violations","url":"/docs/apps/launch/app-store-review/policy-violations"},"app_audits":{"label":"About app audits","url":"/docs/apps/launch/app-store-review/app-audits"}}},"marketing_app_group":{"group_description":"Marketing your app","links":{"overview":{"label":"About marketing your app","url":"/docs/apps/launch/marketing"},"release":{"label":"Write a press release","url":"/docs/apps/launch/marketing/write-press-release"},"brand":{"label":"Shopify brand assets","url":"/docs/apps/launch/marketing/shopify-brand-assets"},"tracking_listing_traffic":{"label":"Track your listing traffic","url":"/docs/apps/launch/marketing/track-listing-traffic"},"manage_review":{"label":"Manage app reviews","url":"/docs/apps/launch/marketing/manage-app-reviews"},"advertising":{"label":"Advertise in the Shopify App Store","children":{"overview":{"label":"About Shopify App Store ads","url":"/docs/apps/launch/marketing/advertising"},"start_advertising":{"label":"Start advertising","url":"/docs/apps/launch/marketing/advertising/start-advertising"},"create_ads":{"label":"Create ads","url":"/docs/apps/launch/marketing/advertising/create-ads"},"manage_ads":{"label":"Manage ads","url":"/docs/apps/launch/marketing/advertising/manage-ads"},"check_ad_performance":{"label":"Check ad performance","url":"/docs/apps/launch/marketing/advertising/check-ad-performance"},"ad_billing":{"label":"About ad billing","url":"/docs/apps/launch/marketing/advertising/ad-billing"},"ad_permissions":{"label":"About ad permissions","url":"/docs/apps/launch/marketing/advertising/permissions"},"ads_faq":{"label":"Ads FAQ","url":"/docs/apps/launch/marketing/advertising/faq"}}}}}},"storefronts_themes":{"heading":"Themes","getting_started_group":{"group_description":"Getting started","links":{"themes":{"label":"Overview","url":"/docs/storefronts/themes"},"getting_started":{"label":"Getting started","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/getting-started"},"create":{"label":"Create a theme","url":"/docs/storefronts/themes/getting-started/create"},"customize":{"label":"Customize a theme","url":"/docs/storefronts/themes/getting-started/customize"}}},"architecture":{"label":"Architecture","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture"},"layouts":{"label":"Layouts","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/layouts"},"checkout_liquid":{"label":"checkout.liquid","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/layouts/checkout-liquid"},"customize_checkout":{"label":"Customize checkout.liquid","url":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/customize-checkout"},"checkout_css":{"label":"Checkout CSS","url":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/checkout-css"}}}}},"templates":{"label":"Templates","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/templates"},"json_templates":{"label":"JSON templates","url":"/docs/storefronts/themes/architecture/templates/json-templates"},"404":{"label":404,"url":"/docs/storefronts/themes/architecture/templates/404"},"article":{"label":"article","url":"/docs/storefronts/themes/architecture/templates/article"},"blog":{"label":"blog","url":"/docs/storefronts/themes/architecture/templates/blog"},"cart":{"label":"cart","url":"/docs/storefronts/themes/architecture/templates/cart"},"collection":{"label":"collection","url":"/docs/storefronts/themes/architecture/templates/collection"},"customers_account":{"label":"customers/account","url":"/docs/storefronts/themes/architecture/templates/customers-account"},"customers_activate_account":{"label":"customers/activate_account","url":"/docs/storefronts/themes/architecture/templates/customers-activate-account"},"customers_addresses":{"label":"customers/addresses","url":"/docs/storefronts/themes/architecture/templates/customers-addresses"},"customers_login":{"label":"customers/login","url":"/docs/storefronts/themes/architecture/templates/customers-login"},"customers_order":{"label":"customers/order","url":"/docs/storefronts/themes/architecture/templates/customers-order"},"customers_register":{"label":"customers/register","url":"/docs/storefronts/themes/architecture/templates/customers-register"},"customers_reset_password":{"label":"customers/reset_password","url":"/docs/storefronts/themes/architecture/templates/customers-reset-password"},"gift_card_liquid":{"label":"gift_card.liquid","url":"/docs/storefronts/themes/architecture/templates/gift-card-liquid"},"index":{"label":"index","url":"/docs/storefronts/themes/architecture/templates/index-template"},"list_collections":{"label":"list-collections","url":"/docs/storefronts/themes/architecture/templates/list-collections"},"metaobject":{"label":"metaobject","url":"/docs/storefronts/themes/architecture/templates/metaobject"},"page":{"label":"page","url":"/docs/storefronts/themes/architecture/templates/page"},"password":{"label":"password","url":"/docs/storefronts/themes/architecture/templates/password"},"product":{"label":"product","url":"/docs/storefronts/themes/architecture/templates/product"},"robots_txt_liquid":{"label":"robots.txt.liquid","url":"/docs/storefronts/themes/architecture/templates/robots-txt-liquid"},"search":{"label":"search","url":"/docs/storefronts/themes/architecture/templates/search"}}},"sections":{"label":"Sections","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/sections"},"section_schema":{"label":"Section schema","url":"/docs/storefronts/themes/architecture/sections/section-schema"},"section_assets":{"label":"Section assets","url":"/docs/storefronts/themes/architecture/sections/section-assets"},"integrate_sections_with_the_theme_editor":{"label":"Integrate with the theme editor","url":"/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-editor"}}},"blocks":{"label":"Blocks","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/blocks"},"section_blocks":{"label":"Section blocks","url":"/docs/storefronts/themes/architecture/blocks/section-blocks"},"theme_blocks":{"label":"Theme blocks","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks"},"schema":{"label":"Block schema","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/schema"},"static":{"label":"Static Blocks","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks"},"dynamic_sources":{"label":"Dynamic sources","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/dynamic-sources"},"developer_preview":{"feature_flag_disabled":"theme_blocks_ga","label":"Developer preview","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/developer-preview"}}},"app_blocks":{"label":"App blocks","url":"/docs/storefronts/themes/architecture/blocks/app-blocks"}}},"section_groups":{"label":"Section groups","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/section-groups"},"migrate":{"label":"Migrate","url":"/docs/storefronts/themes/architecture/section-groups/migrate"}}},"config":{"label":"Config","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/config"},"settings_schema_json":{"label":"settings_schema.json","url":"/docs/storefronts/themes/architecture/config/settings-schema-json"},"settings_data_json":{"label":"settings_data.json","url":"/docs/storefronts/themes/architecture/config/settings-data-json"}}},"locales":{"label":"Locales","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/locales"},"schema_locale_files":{"label":"Schema locale files","url":"/docs/storefronts/themes/architecture/locales/schema-locale-files"},"storefront_locale_files":{"label":"Storefront locale files","url":"/docs/storefronts/themes/architecture/locales/storefront-locale-files"}}},"settings":{"label":"Settings","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/settings"},"input_settings":{"label":"Input settings","url":"/docs/storefronts/themes/architecture/settings/input-settings"},"style_settings":{"label":"Style settings","url":"/docs/storefronts/themes/architecture/settings/style-settings"},"sidebar_settings":{"label":"Sidebar settings","url":"/docs/storefronts/themes/architecture/settings/sidebar-settings"},"dynamic_sources":{"label":"Dynamic sources","url":"/docs/storefronts/themes/architecture/settings/dynamic-sources"},"fonts":{"label":"Fonts","url":"/docs/storefronts/themes/architecture/settings/fonts"},"deprecated_settings":{"label":"Deprecated settings","url":"/docs/storefronts/themes/architecture/settings/deprecated-settings"}}}}},"tools":{"label":"Developer tools","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools"},"cli":{"label":"CLI","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/cli"},"ci_cd":{"label":"CI/CD","url":"/docs/storefronts/themes/tools/cli/ci-cd"},"commands":{"label":"Commands","url":"/docs/api/shopify-cli/theme","stepIn":true,"force_in_new_tab":true},"language_server":{"label":"Language Server","url":"/docs/storefronts/themes/tools/cli/language-server"},"environments":{"label":"Environments","url":"/docs/storefronts/themes/tools/cli/environments"},"migrate":{"label":"Migrate","url":"/docs/storefronts/themes/tools/cli/migrate"},"cli_2":{"label":"CLI 2.x","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/cli/cli-2"},"commands":{"label":"Commands","url":"/docs/storefronts/themes/tools/cli/cli-2/commands"},"upgrade-uninstall":{"label":"Install, upgrade, or uninstall","url":"/docs/storefronts/themes/tools/cli/cli-2/upgrade-uninstall"}}}}},"github_integration":{"label":"GitHub integration","url":"/docs/storefronts/themes/tools/github"},"vscode":{"label":"VS Code extension","url":"/docs/storefronts/themes/tools/shopify-liquid-vscode"},"prettier_plugin":{"label":"Prettier plugin","url":"/docs/storefronts/themes/tools/liquid-prettier-plugin"},"theme_check":{"label":"Theme Check","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/theme-check"},"commands":{"label":"Commands","url":"/docs/storefronts/themes/tools/theme-check/commands"},"configuration":{"label":"Configuration","url":"/docs/storefronts/themes/tools/theme-check/configuration"},"checks_reference":{"label":"Checks reference","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/theme-check/checks"},"app_block_valid_tags":{"label":"AppBlockValidTags","url":"/docs/storefronts/themes/tools/theme-check/checks/app-block-valid-tags"},"asset_preload":{"label":"AssetPreload","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-preload"},"asset_size_app_block_css":{"label":"AssetSizeAppBlockCSS","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-css"},"asset_size_app_block_javascript":{"label":"AssetSizeAppBlockJavascript","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-javascript"},"asset_size_css":{"label":"AssetSizeCSS","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-css"},"asset_size_javascript":{"label":"AssetSizeJavascript","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-javascript"},"block_id_usage":{"label":"BlockIdUsage","url":"/docs/storefronts/themes/tools/theme-check/checks/block-id-usage"},"capture_on_content_for_block":{"label":"CaptureOnContentForBlock","url":"/docs/storefronts/themes/tools/theme-check/checks/capture-on-content-for-block"},"cdn_preconnect":{"label":"CdnPreconnect","url":"/docs/storefronts/themes/tools/theme-check/checks/cdn-preconnect"},"content_for_header_modification":{"label":"ContentForHeaderModification","url":"/docs/storefronts/themes/tools/theme-check/checks/content-for-header-modification"},"deprecate_bgsizes":{"label":"DeprecateBgsizes","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes"},"deprecate_lazysizes":{"label":"DeprecateLazysizes","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-lazysizes"},"deprecated_filter":{"label":"DeprecatedFilter","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-filter"},"deprecated_tag":{"label":"DeprecatedTag","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-tag"},"img_width_and_height":{"label":"ImgWidthAndHeight","url":"/docs/storefronts/themes/tools/theme-check/checks/img-width-and-height"},"json_syntax_error":{"label":"JSONSyntaxError","url":"/docs/storefronts/themes/tools/theme-check/checks/json-syntax-error"},"liquid_html_syntax_error":{"label":"LiquidHTMLSyntaxError","url":"/docs/storefronts/themes/tools/theme-check/checks/liquid-html-syntax-error"},"matching_translations":{"label":"MatchingTranslations","url":"/docs/storefronts/themes/tools/theme-check/checks/matching-translations"},"matching_schema_translations":{"label":"MatchingSchemaTranslations","url":"/docs/storefronts/themes/tools/theme-check/checks/matching-schema-translations"},"missing_asset":{"label":"MissingAsset","url":"/docs/storefronts/themes/tools/theme-check/checks/missing-asset"},"missing_template":{"label":"MissingTemplate","url":"/docs/storefronts/themes/tools/theme-check/checks/missing-template"},"pagination_size":{"label":"PaginationSize","url":"/docs/storefronts/themes/tools/theme-check/checks/pagination-size"},"parser_blocking_javascript":{"label":"ParserBlockingJavaScript","url":"/docs/storefronts/themes/tools/theme-check/checks/parser-blocking-javascript"},"remote_asset":{"label":"RemoteAsset","url":"/docs/storefronts/themes/tools/theme-check/checks/remote-asset"},"required_layout_theme_object":{"label":"RequiredLayoutThemeObject","url":"/docs/storefronts/themes/tools/theme-check/checks/required-layout-theme-object"},"translation_key_exists":{"label":"TranslationKeyExists","url":"/docs/storefronts/themes/tools/theme-check/checks/translation-key-exists"},"unclosed_html_element":{"label":"UnclosedHTMLElement","url":"/docs/storefronts/themes/tools/theme-check/checks/unclosed-html-element"},"undefined_object":{"label":"UndefinedObject","url":"/docs/storefronts/themes/tools/theme-check/checks/undefined-object"},"unique_static_block_id":{"label":"UniqueStaticBlockId","url":"/docs/storefronts/themes/tools/theme-check/checks/unique-static-block-id"},"unknown_filter":{"label":"UnknownFilter","url":"/docs/storefronts/themes/tools/theme-check/checks/unknown-filter"},"unused_assign":{"label":"UnusedAssign","url":"/docs/storefronts/themes/tools/theme-check/checks/unused-assign"},"valid_block_target":{"label":"ValidBlockTarget","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-block-target"},"valid_content_for_arguments":{"label":"ValidContentForArguments","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-content-for-arguments"},"valid_html_translation":{"label":"ValidHTMLTranslation","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-html-translation"},"valid_local_blocks":{"label":"ValidLocalBlocks","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-local-blocks"},"valid_schema":{"label":"ValidSchema","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema"},"valid_schema-name":{"label":"ValidSchemaName","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema-name"},"valid_static_block_type":{"label":"ValidStaticBlockType","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-static-block-type"},"variable_name":{"label":"VariableName","url":"/docs/storefronts/themes/tools/theme-check/checks/variable-name"}}},"migrate":{"label":"Migrate","url":"/docs/storefronts/themes/tools/theme-check/migrate"}}},"online_editor":{"label":"Theme editor","url":"/docs/storefronts/themes/tools/online-editor"},"code_editor":{"label":"Code editor","url":"/docs/storefronts/themes/tools/code-editor"},"theme_access":{"label":"Theme Access app","url":"/docs/storefronts/themes/tools/theme-access"},"development_stores":{"label":"Development stores","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/development-stores"},"test-data":{"label":"Test data","url":"/docs/storefronts/themes/tools/development-stores/generated-data"},"transfer":{"label":"Transfer a development store","url":"/docs/storefronts/themes/tools/development-stores/transfer-development-stores"}}},"collaborator_accounts":{"label":"Collaborator accounts","url":"/docs/storefronts/themes/tools/collaborator-accounts"},"theme_inspector":{"label":"Theme Inspector","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/theme-inspector"},"using":{"label":"Optimizing themes using Theme Inspector","url":"/docs/storefronts/themes/tools/theme-inspector/using-the-theme-inspector"}}},"lighthouse_ci":{"label":"Lighthouse CI","url":"/docs/storefronts/themes/tools/lighthouse-ci"},"dawn":{"label":"Dawn","url":"/docs/storefronts/themes/tools/dawn"}}},"best_practices":{"label":"Best practices","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/best-practices"},"templates_sections_blocks":{"label":"Sections and blocks","url":"/docs/storefronts/themes/best-practices/templates-sections-blocks"},"performance":{"label":"Performance","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/best-practices/performance"},"cdn":{"label":"Platform","url":"/docs/storefronts/themes/best-practices/performance/platform"}}},"accessibility":{"label":"Accessibility","url":"/docs/storefronts/themes/best-practices/accessibility"},"theme_editor_preview_inspector":{"label":"Theme editor preview inspector","url":"/docs/storefronts/themes/best-practices/theme-editor-preview-inspector"},"design":{"label":"Design","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/best-practices/design"},"color_system":{"label":"Color system","url":"/docs/storefronts/themes/best-practices/design/color-system"}}},"merchant_stores":{"label":"Merchant stores","url":"/docs/storefronts/themes/best-practices/merchant-stores"},"version_control":{"label":"Version control","url":"/docs/storefronts/themes/best-practices/version-control"},"file_transformation":{"label":"File transformation","url":"/docs/storefronts/themes/best-practices/file-transformation"},"deceptive_code":{"label":"Deceptive code","url":"/docs/storefronts/themes/best-practices/deceptive-code"}}}}},"theme_features_group":{"group_description":"Theme features","links":{"app_extensions":{"label":"Integrating apps","url":"/docs/apps/online-store"},"product_merchandising":{"label":"Product merchandising","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising"},"variants":{"label":"Product variants","children":{"variants":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising/variants"},"support-high-variant-products":{"label":"Support high-variant products","url":"/docs/storefronts/themes/product-merchandising/variants/support-high-variant-products"}}},"recommendations":{"label":"Product recommendations","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising/recommendations"},"related":{"label":"Related products","url":"/docs/storefronts/themes/product-merchandising/recommendations/related-products"},"complementary":{"label":"Complementary products","url":"/docs/storefronts/themes/product-merchandising/recommendations/complementary-products"}}},"media":{"label":"Media and images","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising/media"},"support_media":{"label":"Support product media","url":"/docs/storefronts/themes/product-merchandising/media/support-media"},"media_ux":{"label":"Product media UX guidelines","url":"/docs/storefronts/themes/product-merchandising/media/media-ux"}}},"gift_cards":{"label":"Gift cards","url":"/docs/storefronts/themes/product-merchandising/gift-cards"}}},"pricing_payments":{"label":"Pricing and payments","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/pricing-payments"},"discounts":{"label":"Discounts","url":"/docs/storefronts/themes/pricing-payments/discounts"},"subscriptions":{"label":"Subscriptions","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/pricing-payments/subscriptions"},"support_subscriptions":{"label":"Add subscriptions to your theme","url":"/docs/storefronts/themes/pricing-payments/subscriptions/add-subscriptions-to-your-theme"},"subscriptions_ux":{"label":"Subscription UX guidelines","url":"/docs/storefronts/themes/pricing-payments/subscriptions/subscription-ux-guidelines"}}},"pre_orders_try_before_you_buy":{"label":"Pre-orders and Try Before You Buy","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/pricing-payments/preorder-tbyb"},"support_pre_orders_try_before_you_buy":{"label":"Add pre-orders and TBYB to your theme","url":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/add-preorder-tbyb-to-your-theme"},"deferred_purchase_options_ux":{"label":"Pre-orders and TBYB UX guidelines","url":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/preorder-tbyb-ux-guidelines"}}},"installments":{"label":"Shop Pay Installments","url":"/docs/storefronts/themes/pricing-payments/installments"},"accelerated_checkout":{"label":"Accelerated checkout","children":{"overview":{"label":"About accelerated checkout","url":"/docs/storefronts/themes/pricing-payments/accelerated-checkout"},"upgrade_accelerated_checkout":{"label":"Upgrade accelerated checkout","url":"/docs/storefronts/themes/pricing-payments/accelerated-checkout/upgrade-accelerated-checkout"}}},"b2b":{"label":"B2B","url":"/docs/storefronts/themes/pricing-payments/b2b"},"price_per_unit":{"label":"Unit pricing","url":"/docs/storefronts/themes/pricing-payments/unit-pricing"},"currency_formatting":{"label":"Explicit currency formatting","url":"/docs/storefronts/themes/pricing-payments/currency-formatting"}}},"delivery_fulfillment":{"label":"Delivery and fulfillment","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/delivery-fulfillment"},"pickup_availability":{"label":"Pickup availability","url":"/docs/storefronts/themes/delivery-fulfillment/pickup-availability"}}},"customer_engagement":{"label":"Customer engagement","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/customer-engagement"},"email_consent":{"label":"Email consent","url":"/docs/storefronts/themes/customer-engagement/email-consent"},"additional_customer_information":{"label":"Additional customer information","url":"/docs/storefronts/themes/customer-engagement/additional-customer-information"},"contact_form":{"label":"Add a contact form","url":"/docs/storefronts/themes/customer-engagement/add-contact-form"}}},"markets":{"label":"Markets","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/markets"},"multiple_currencies_languages":{"label":"Support multiple currencies and languages","url":"/docs/storefronts/themes/markets/multiple-currencies-languages"},"localization_discovery":{"label":"Detect and set a visitor’s optimal localization","url":"/docs/storefronts/themes/markets/localization-discovery"},"country_lang_selector_ux":{"label":"Country and language selector UX guidelines","url":"/docs/storefronts/themes/markets/country-language-ux"}}},"navigation_search":{"label":"Site navigation and search","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search"},"navigation":{"label":"Navigation","url":"/docs/storefronts/themes/navigation-search/navigation"},"search":{"label":"Storefront search","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search/search"},"predictive_search":{"label":"Predictive search","url":"/docs/storefronts/themes/navigation-search/search/predictive-search"},"predictive_search_ux":{"label":"Predictive search UX guidelines","url":"/docs/storefronts/themes/navigation-search/search/predictive-search-ux"}}},"filtering":{"label":"Filtering","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search/filtering"},"storefront_filtering":{"label":"Storefront filtering","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering"},"support_storefront_filtering":{"label":"Support storefront filtering","url":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering"},"storefront_filtering_ux":{"label":"Storefront filtering UX guidelines","url":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/storefront-filtering-ux"}}},"tag_filtering":{"label":"Tag filtering","url":"/docs/storefronts/themes/navigation-search/filtering/tag-filtering"}}}}},"seo":{"label":"SEO","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/seo"},"metadata":{"label":"Metadata","url":"/docs/storefronts/themes/seo/metadata"},"hreflang_tags":{"label":"hreflang tags","url":"/docs/storefronts/themes/seo/hreflang"},"robots_txt":{"label":"robots.txt","url":"/docs/storefronts/themes/seo/robots-txt"}}},"trust_security":{"label":"Trust and security","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/trust-security"},"security_badge":{"label":"Security badges","url":"/docs/storefronts/themes/trust-security/security-badges"},"captcha":{"label":"Captcha","url":"/docs/storefronts/themes/trust-security/captcha"}}},"migration":{"label":"Migrating to Online Store 2.0","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/os20"},"assessment":{"label":"Assessment","url":"/docs/storefronts/themes/os20/assessment"},"migration":{"label":"Migration guide","url":"/docs/storefronts/themes/os20/migration"}}},"troubleshooting":{"label":"Troubleshooting","url":"/docs/storefronts/themes/troubleshooting"}}},"sell_themes_group":{"group_description":"Sell themes","links":{"theme-store":{"label":"Theme Store","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/store"},"requirements":{"label":"Requirements","url":"/docs/storefronts/themes/store/requirements"},"testing":{"label":"Testing","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/store/test-theme"},"assets":{"label":"Testing assets","url":"/docs/storefronts/themes/store/test-theme/assets"},"checklist":{"label":"Testing checklist","url":"/docs/storefronts/themes/store/test-theme/checklist"}}},"review-process":{"label":"Review process","children":{"submit":{"label":"Submitting a theme","url":"/docs/storefronts/themes/store/review-process/submit-theme"},"listings":{"label":"Theme Store listings","url":"/docs/storefronts/themes/store/review-process/listings"},"rejections":{"label":"Common theme rejections","url":"/docs/storefronts/themes/store/review-process/common-theme-rejections"}}},"success":{"label":"Theme success","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/store/success"},"prohibited":{"label":"Prohibited actions","url":"/docs/storefronts/themes/store/success/prohibited-actions"},"reviews":{"label":"Managing theme reviews","url":"/docs/storefronts/themes/store/success/managing-theme-reviews"},"assets":{"label":"Brand asset guidance","url":"/docs/storefronts/themes/store/success/brand-assets"},"updates":{"label":"Updating your theme","url":"/docs/storefronts/themes/store/success/updates"},"sunset":{"label":"Removing a theme","url":"/docs/storefronts/themes/store/success/remove-theme"}}},"revenue-share":{"label":"Theme revenue share","url":"/docs/storefronts/themes/store/revenue-share"}}}}}},"storefronts_headless":{"heading":"Headless","getting_started_group":{"group_description":"Getting started","links":{"custom_storefronts":{"label":"Overview","url":"/docs/storefronts/headless"},"getting_started":{"label":"Getting started","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/getting-started"},"build_options":{"label":"Build options","url":"/docs/storefronts/headless/getting-started/build-options"}}}}},"hydrogen_oxygen_group":{"group_description":"Hydrogen and Oxygen","links":{"getting_started":{"label":"Getting started","url":"/docs/storefronts/headless/hydrogen/getting-started"},"structure":{"label":"Fundamentals","url":"/docs/storefronts/headless/hydrogen/fundamentals"},"analytics":{"label":"Analytics","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/analytics"},"consent":{"label":"Consent management","url":"/docs/storefronts/headless/hydrogen/analytics/consent"},"consent_3p":{"label":"Third-party consent services","url":"/docs/storefronts/headless/hydrogen/analytics/consent-3p"},"tracking":{"label":"Event tracking","url":"/docs/storefronts/headless/hydrogen/analytics/tracking"},"validation":{"label":"Validation and troubleshooting","url":"/docs/storefronts/headless/hydrogen/analytics/validation"}}},"cart":{"label":"Cart","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/cart"},"setup":{"label":"Set up a cart handler","url":"/docs/storefronts/headless/hydrogen/cart/setup"},"read":{"label":"Read cart data","url":"/docs/storefronts/headless/hydrogen/cart/read"},"items":{"label":"Manage cart line items","url":"/docs/storefronts/headless/hydrogen/cart/manage"},"metafields":{"label":"Update metafields","url":"/docs/storefronts/headless/hydrogen/cart/metafields"},"buyer-identity":{"label":"Update buyer identity","url":"/docs/storefronts/headless/hydrogen/cart/buyer-identity"},"notes":{"label":"Update notes","url":"/docs/storefronts/headless/hydrogen/cart/notes"},"attributes":{"label":"Update attributes","url":"/docs/storefronts/headless/hydrogen/cart/attributes"},"discount-codes":{"label":"Update discount codes","url":"/docs/storefronts/headless/hydrogen/cart/discount-codes"},"selected-delivery-options":{"label":"Update selected delivery options","url":"/docs/storefronts/headless/hydrogen/cart/selected-delivery-options"},"customize-cart-handler":{"label":"Customize cart handler methods","url":"/docs/storefronts/headless/hydrogen/cart/customize-cart-handler"},"variants":{"label":"Variant selector form","url":"/docs/storefronts/headless/hydrogen/cart/variant-selector"},"render-client-side":{"label":"Client-rendering carts","url":"/docs/storefronts/headless/hydrogen/cart/render-client-side"}}},"csp":{"label":"Content security policy","url":"/docs/storefronts/headless/hydrogen/content-security-policy"},"data_fetching":{"label":"Data fetching","children":{"fetch_data":{"label":"Shopify API data","url":"/docs/storefronts/headless/hydrogen/data-fetching"},"fetch_data_3p":{"label":"Third-party API data","url":"/docs/storefronts/headless/hydrogen/data-fetching/third-party"},"pagination":{"label":"Pagination","url":"/docs/storefronts/headless/hydrogen/data-fetching/pagination"},"graphiql":{"label":"GraphiQL","url":"/docs/storefronts/headless/hydrogen/data-fetching/graphiql"}}},"caching":{"label":"Caching","children":{"first_party":{"label":"Shopify API data","url":"/docs/storefronts/headless/hydrogen/caching"},"third_party":{"label":"Third-party data","url":"/docs/storefronts/headless/hydrogen/caching/third-party"},"full_page_cache":{"label":"Full-page cache","url":"/docs/storefronts/headless/hydrogen/caching/full-page-cache"}}},"i18n_h2":{"label":"Markets","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/markets"},"defaults":{"label":"Default locale","url":"/docs/storefronts/headless/hydrogen/markets/default-locale"},"subpaths2":{"label":"Multiple languages with URL paths","url":"/docs/storefronts/headless/hydrogen/markets/multiple-languages-url-paths"},"domains":{"label":"Multiple languages with domains","url":"/docs/storefronts/headless/hydrogen/markets/multiple-languages-domains"},"country":{"label":"Country selector","url":"/docs/storefronts/headless/hydrogen/markets/country-selector"},"detect":{"label":"Locale detection","url":"/docs/storefronts/headless/hydrogen/markets/locale-detection"}}},"seo":{"label":"SEO","url":"/docs/storefronts/headless/hydrogen/seo"},"storefronts":{"label":"Storefronts","url":"/docs/storefronts/headless/hydrogen/storefronts"},"environments":{"label":"Environments","url":"/docs/storefronts/headless/hydrogen/environments"},"deployments":{"label":"Deployments","children":{"oxygen":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/deployments"},"github":{"label":"CI/CD with GitHub","url":"/docs/storefronts/headless/hydrogen/deployments/github"},"custom_ci_cd":{"label":"Custom CI/CD","url":"/docs/storefronts/headless/hydrogen/deployments/custom-ci-cd"},"runtime":{"label":"Oxygen runtime","url":"/docs/storefronts/headless/hydrogen/deployments/oxygen-runtime"},"self_hosting":{"label":"Self-hosting Hydrogen","url":"/docs/storefronts/headless/hydrogen/deployments/self-hosting"}}},"debugging":{"label":"Debugging and testing","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/debugging"},"error_console":{"label":"Error console","url":"/docs/storefronts/headless/hydrogen/debugging/error-console"},"server_code":{"label":"Attach a debugger","url":"/docs/storefronts/headless/hydrogen/debugging/server-code"},"bundle_size":{"label":"Inspect your bundle size","url":"/docs/storefronts/headless/hydrogen/debugging/bundle-size"},"cpu_startup":{"label":"Measure CPU startup time","url":"/docs/storefronts/headless/hydrogen/debugging/cpu-startup"},"subrequest_profiler":{"label":"Profile data requests","url":"/docs/storefronts/headless/hydrogen/debugging/subrequest-profiler"},"e2e_testing":{"label":"End-to-end testing","url":"/docs/storefronts/headless/hydrogen/debugging/end-to-end-testing"},"log_drains":{"label":"Log drains","url":"/docs/storefronts/headless/hydrogen/logging"}}},"performance":{"label":"Performance","children":{"data_loading":{"label":"Data loading","url":"/docs/storefronts/headless/hydrogen/performance/data-loading"},"on_page_optimizations":{"label":"On-page optimizations","url":"/docs/storefronts/headless/hydrogen/performance/on-page-optimizations"}}},"migrate_upgrade":{"label":"Migrate and upgrade","children":{"migrate":{"label":"Migrate from Online Store","url":"/docs/storefronts/headless/hydrogen/migrate"},"redirects":{"label":"Redirect traffic from Online Store","url":"/docs/storefronts/headless/hydrogen/migrate/redirect-traffic"},"upgrade":{"label":"Upgrade Hydrogen 1 to 2 with Remix","url":"https://shopify.github.io/hydrogen-v1/migrate","force_in_new_tab":true}}},"checklist":{"label":"Production checklist","url":"/docs/storefronts/headless/hydrogen/production-checklist"},"shopify-cli":{"label":"Hydrogen CLI commands","url":"/docs/api/shopify-cli/hydrogen","stepIn":true,"force_in_new_tab":true},"hydrogen_reference":{"label":"Hydrogen API reference","url":"/docs/api/hydrogen","stepIn":true,"force_in_new_tab":true}}},"mobile_commerce_group":{"group_description":"Mobile commerce","links":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/mobile-apps"},"android":{"label":"Android Buy SDK","url":"/docs/storefronts/headless/mobile-apps/buy-sdk-android"},"ios":{"label":"iOS Buy SDK","url":"/docs/storefronts/headless/mobile-apps/buy-sdk-ios"}}},"bring_your_own_stack_group":{"group_description":"Bring your own stack","links":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/bring-your-own-stack"},"b2b":{"label":"Headless with B2B","url":"/docs/storefronts/headless/bring-your-own-stack/b2b"}}},"headless_api_group":{"group_description":"Headless APIs","links":{"storefront_api":{"label":"Building with the Storefront API","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/"},"getting_started":{"label":"Getting started","url":"/docs/storefronts/headless/building-with-the-storefront-api/getting-started"},"manage_headless":{"label":"Managing Headless channels","url":"/docs/storefronts/headless/building-with-the-storefront-api/manage-headless-channels"},"api_exploration":{"label":"API exploration","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/api-exploration"},"graphiql":{"label":"GraphiQL Storefront API explorer","url":"/docs/storefronts/headless/building-with-the-storefront-api/api-exploration/graphiql-storefront-api"},"learning_kit":{"label":"Storefront API learning kit","url":"https://github.com/Shopify/storefront-api-learning-kit"}}},"products":{"label":"Products and collections","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/"},"getting-started":{"label":"Getting started","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/getting-started"},"filtering":{"label":"Product filtering","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/filter-products"},"metafields":{"label":"Metafields","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/metafields"},"local_pickup":{"label":"Local pickup","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/local-pickup"},"subscriptions":{"label":"Subscriptions","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/subscriptions"}}},"search":{"label":"Search and discovery","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/search-discovery"},"search_tracking":{"label":"Set up search tracking","url":"/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking"}}},"i18n":{"label":"Markets","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/markets/"},"international_pricing":{"label":"International pricing","url":"/docs/storefronts/headless/building-with-the-storefront-api/markets/international-pricing"},"multiple_languages":{"label":"Multiple languages","url":"/docs/storefronts/headless/building-with-the-storefront-api/markets/multiple-languages"}}},"cart":{"label":"Cart","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart"},"manage":{"label":"Create and update a cart","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart/manage"},"migrate":{"label":"Migrate to the Cart API","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart/migrate-to-cart-api"},"migrate_cart":{"label":"Migrate your app","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart/migrate-to-cart-api/migrate-your-app"}}}}},"customer_accounts":{"label":"Customers","url":"/docs/storefronts/headless/building-with-the-storefront-api/customer-accounts"},"defer_directive":{"label":"Prioritizing data in your query","url":"/docs/storefronts/headless/building-with-the-storefront-api/defer"},"release_notes":{"label":"Release notes","url":"/docs/api/release-notes/latest#graphql-storefront-api-changes","force_in_new_tab":true},"api_reference":{"label":"Storefront API reference","url":"/docs/api/storefront","stepIn":true,"force_in_new_tab":true}}},"customer_account_api":{"label":"Building with the Customer Account API","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-customer-account-api/"},"getting_started":{"label":"Getting started","url":"/docs/storefronts/headless/building-with-the-customer-account-api/getting-started"},"using_customer_account_api_with_hydrogen":{"label":"Using Customer Account API with Hydrogen","url":"/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen"},"customers":{"label":"Customers","url":"/docs/storefronts/headless/building-with-the-customer-account-api/customer-accounts"},"api_reference":{"label":"Customer Account API reference","url":"/docs/api/customer","stepIn":true,"force_in_new_tab":true}}},"additional_kits":{"label":"Additional SDKs","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/additional-sdks"},"web_sdks":{"label":"Web SDKs","children":{"storefront_api_client":{"label":"Storefront API Client","url":"https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client"},"buy_button_js":{"label":"Buy Button JS","url":"/docs/storefronts/headless/additional-sdks/buy-button"},"js_buy":{"label":"JS Buy SDK","url":"/docs/storefronts/headless/additional-sdks/js-buy"},"web_components":{"label":"Web Components","url":"/docs/storefronts/headless/additional-sdks/web-components"}}},"server_backend_sdks":{"label":"Backend SDKs","children":{"node":{"label":"Node.js client library","url":"https://github.com/Shopify/shopify-api-node"},"php":{"label":"PHP client library","url":"https://github.com/Shopify/shopify-api-php"},"ruby":{"label":"Ruby client library","url":"https://github.com/Shopify/shopify-api-ruby"}}}}}}}},"api":{"heading":"APIs and references","overview_tools_group":{"group_description":"Overview and tools","links":{"api":{"label":"APIs, libraries, and tools","url":"/docs/api"},"shopify_app_remix":{"label":"Remix app package","stepIn":true,"url":"/docs/api/shopify-app-remix"},"cli":{"label":"Shopify CLI","url":"/docs/api/shopify-cli","stepIn":true},"github_app":{"label":"Shopify GitHub app","url":"/docs/api/github-app"},"dev_stores":{"label":"Dev stores","children":{"overview":{"label":"About dev stores","url":"/docs/api/development-stores"},"test_data":{"label":"Generated test data","url":"/docs/api/development-stores/generated-test-data"}}},"usage":{"label":"Shopify APIs","children":{"overview":{"label":"About Shopify APIs","url":"/docs/api/usage"},"authentication":{"label":"Authentication","url":"/docs/api/usage/authentication"},"access_scopes":{"label":"Access scopes","url":"/docs/api/usage/access-scopes"},"api_exploration":{"label":"API exploration","children":{"admin-graphiql-explorer":{"label":"Admin GraphiQL Explorer","url":"/docs/api/usage/api-exploration/admin-graphiql-explorer"},"storefront-graphiql-explorer":{"label":"Storefront GraphiQL Explorer","url":"/docs/api/usage/api-exploration/storefront-graphiql-explorer"}}},"versioning":{"label":"Versioning","children":{"overview":{"label":"About versioning","url":"/docs/api/usage/versioning"},"updates":{"label":"Getting updates","url":"/docs/api/usage/versioning/updates"},"api-health-report":{"label":"API health report","url":"/docs/api/usage/versioning/api-health"}}},"gids":{"label":"Global IDs","url":"/docs/api/usage/gids"},"rate_limit":{"label":"Rate limits","url":"/docs/api/usage/rate-limits"},"search_syntax":{"label":"Search syntax","url":"/docs/api/usage/search-syntax"},"response_codes":{"label":"Response status codes","url":"/docs/api/usage/response-codes"},"idempotent_request":{"label":"Idempotent requests","url":"/docs/api/usage/idempotent-requests"},"bulk":{"label":"Bulk operations","children":{"query":{"label":"Exports and queries","url":"/docs/api/usage/bulk-operations/queries"},"mutation":{"label":"Imports and mutations","url":"/docs/api/usage/bulk-operations/imports"}}},"pagination":{"label":"About GraphQL pagination","url":"/docs/api/usage/pagination-graphql"}}},"release_notes":{"label":"API version release notes","children":{"overview":{"label":"About the release notes","url":"/docs/api/release-notes"},"developer_previews":{"label":"Developer previews","url":"/docs/api/release-notes/developer-previews"},"2025-01":{"label":"2025-01 (release candidate)","url":"/docs/api/release-notes/2025-01"},"2024-10":{"label":"2024-10","url":"/docs/api/release-notes/2024-10"},"2024-07":{"label":"2024-07","url":"/docs/api/release-notes/2024-07"},"2024-04":{"label":"2024-04","url":"/docs/api/release-notes/2024-04"},"2024-01":{"label":"2024-01","url":"/docs/api/release-notes/2024-01"},"previous_versions":{"label":"Previous versions","url":"/docs/api/release-notes/previous-versions"}}}}},"app_data_logic_group":{"group_description":"App data and logic","links":{"graphql_admin":{"label":"GraphQL Admin API","stepIn":true,"url":"/docs/api/admin-graphql"},"shopify_functions":{"label":"Shopify Functions","children":{"overview":{"label":"About Shopify Functions APIs","url":"/docs/api/functions"},"shopifyvm_apis":{"label":"API references","children":{"cart_checkout_validation":{"label":"Cart and Checkout Validation API","children":{"overview":{"label":"About the Cart and Checkout Validation API","url":"/docs/api/functions/reference/cart-checkout-validation"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/cart-checkout-validation/graphql"}}},"cart_transform":{"label":"Cart Transform API","children":{"overview":{"label":"About the Cart Transform API","url":"/docs/api/functions/reference/cart-transform"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/cart-transform/graphql"}}},"pickup_point_delivery_option_generator":{"label":"Pickup Point Delivery Option Generator API","children":{"overview":{"label":"About the Pickup Point Delivery Option Generator API","url":"/docs/api/functions/reference/pickup-point-delivery-option-generator"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/pickup-point-delivery-option-generator/graphql"}}},"delivery_customization":{"label":"Delivery Customization API","children":{"overview":{"label":"About the Delivery Customization API","url":"/docs/api/functions/reference/delivery-customization"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/delivery-customization/graphql"}}},"disc":{"label":"Discounts APIs","children":{"order_discounts":{"label":"Order Discount API","children":{"overview":{"label":"About the Order Discount API","url":"/docs/api/functions/reference/order-discounts"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/order-discounts/graphql"}}},"product_discounts":{"label":"Product Discount API","children":{"overview":{"label":"About the Product Discount API","url":"/docs/api/functions/reference/product-discounts"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/product-discounts/graphql"}}},"shipping_discounts":{"label":"Shipping Discount API","children":{"overview":{"label":"About the Shipping Discount Function","url":"/docs/api/functions/reference/shipping-discounts"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/shipping-discounts/graphql"}}},"discounts_allocator":{"label":"Discounts Allocator API","children":{"overview":{"label":"About the Discounts Allocator API","url":"/docs/api/functions/reference/discounts-allocator"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/discounts-allocator/graphql"}}}}},"fulfillment_constraints":{"label":"Fulfillment Constraints API","children":{"overview":{"label":"About the Fulfillment Constraints API","url":"/docs/api/functions/reference/fulfillment-constraints"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/fulfillment-constraints/graphql"}}},"local_pickup_delivery_option_generator":{"label":"Local Pickup Delivery Option Generator API","children":{"overview":{"label":"About the Local Pickup Delivery Option Generator API","url":"/docs/api/functions/reference/local-pickup-delivery-option-generator"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/local-pickup-delivery-option-generator/graphql"}}},"order_routing_location_rule":{"label":"Order Routing Location Rule API","children":{"overview":{"label":"About the Order Routing Location Rule API","url":"/docs/api/functions/reference/order-routing-location-rule"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/order-routing-location-rule/graphql"}}},"payment_customization":{"label":"Payment Customization API","children":{"overview":{"label":"About the Payment Customization API","url":"/docs/api/functions/reference/payment-customization"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/payment-customization/graphql"}}}}},"configuration":{"label":"Configuration","url":"/docs/api/functions/configuration"}}},"partner":{"label":"Partner API","stepIn":true,"url":"/docs/api/partner"},"payments":{"label":"Payments Apps API","stepIn":true,"url":"/docs/api/payments-apps"},"webhooks":{"label":"Webhooks","stepIn":true,"url":"/docs/api/webhooks"},"rest_admin_legacy":{"label":"REST Admin API (legacy)","children":{"reference":{"label":"Reference","stepIn":true,"url":"/docs/api/admin-rest"},"api_usage":{"label":"API usage","children":{"access_scopes":{"label":"Access scopes","url":"/docs/api/admin-rest/usage/access-scopes"},"versioning":{"label":"Versioning","url":"/docs/api/admin-rest/usage/versioning"},"simple_ids":{"label":"Simple IDs","url":"/docs/api/admin-rest/usage/simple-ids"},"rate-limits":{"label":"Rate limits","url":"/docs/api/admin-rest/usage/rate-limits"},"idempotent_requests":{"label":"Idempotent requests","url":"/docs/api/admin-rest/usage/idempotent-requests"},"pagination":{"label":"Pagination","url":"/docs/api/admin-rest/usage/pagination"}}}}}}},"app_experience_group":{"group_description":"App experience","links":{"app-bridge":{"label":"App Bridge","children":{"overview":{"label":"About App Bridge","url":"/docs/api/app-bridge"},"reference":{"label":"Reference","url":"/docs/api/app-bridge-library"},"modals":{"label":"Using modals in your app","url":"/docs/api/app-bridge/using-modals-in-your-app"},"migrating":{"label":"Migration guide","url":"/docs/api/app-bridge/migration-guide"},"app_bridge_3":{"label":"Previous versions","children":{"getting_started":{"label":"App Bridge from npm","children":{"setup":{"label":"App setup","url":"/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup"},"using_react":{"label":"Using React","url":"/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react"}}},"actions":{"label":"Actions","children":{"overview":{"label":"About actions","url":"/docs/api/app-bridge/previous-versions/actions"},"appState":{"label":"App state","url":"/docs/api/app-bridge/previous-versions/actions/app-state"},"button":{"label":"Button","url":"/docs/api/app-bridge/previous-versions/actions/button"},"buttongroup":{"label":"ButtonGroup","url":"/docs/api/app-bridge/previous-versions/actions/buttongroup"},"cart":{"label":"Cart","url":"/docs/api/app-bridge/previous-versions/actions/cart"},"contextualSaveBar":{"label":"ContextualSaveBar","url":"/docs/api/app-bridge/previous-versions/actions/contextualsavebar"},"error":{"label":"Error","url":"/docs/api/app-bridge/previous-versions/actions/error"},"features":{"label":"Features","url":"/docs/api/app-bridge/previous-versions/actions/features"},"fullscreen":{"label":"Fullscreen","url":"/docs/api/app-bridge/previous-versions/actions/fullscreen"},"loading":{"label":"Loading","url":"/docs/api/app-bridge/previous-versions/actions/loading"},"menu":{"label":"Menu","children":{"overview":{"label":"About Menu actions","url":"/docs/api/app-bridge/previous-versions/actions/menu"},"channel":{"label":"Channel Menu","url":"/docs/api/app-bridge/previous-versions/actions/menu/channel"},"navigation":{"label":"Navigation Menu","url":"/docs/api/app-bridge/previous-versions/actions/menu/navigation"}}},"modal":{"label":"Modal","url":"/docs/api/app-bridge/previous-versions/actions/modal"},"navigation":{"label":"Navigation","children":{"overview":{"label":"About Navigation actions","url":"/docs/api/app-bridge/previous-versions/actions/navigation"},"history":{"label":"History","url":"/docs/api/app-bridge/previous-versions/actions/navigation/history"},"redirect":{"label":"Redirect / Navigate","url":"/docs/api/app-bridge/previous-versions/actions/navigation/redirect-navigate"}}},"pos":{"label":"POS","url":"/docs/api/app-bridge/previous-versions/actions/pos"},"picker":{"label":"unstable_Picker","url":"/docs/api/app-bridge/previous-versions/actions/picker"},"resourcepicker":{"label":"ResourcePicker","url":"/docs/api/app-bridge/previous-versions/actions/resourcepicker"},"scanner":{"label":"Scanner","url":"/docs/api/app-bridge/previous-versions/actions/scanner"},"share":{"label":"Sharing","url":"/docs/api/app-bridge/previous-versions/actions/share"},"titleBar":{"label":"TitleBar","url":"/docs/api/app-bridge/previous-versions/actions/titlebar"},"toast":{"label":"Toast","url":"/docs/api/app-bridge/previous-versions/actions/toast"}}},"methods":{"label":"Methods","url":"/docs/api/app-bridge/previous-versions/methods"},"debugging":{"label":"Debugging","url":"/docs/api/app-bridge/previous-versions/debugging"}}}}},"admin":{"label":"Admin extensions","children":{"overview":{"label":"About admin extensions","stepIn":true,"url":"/docs/api/admin-extensions"},"extension_points_api":{"label":"APIs","stepIn":true,"url":"/docs/api/admin-extensions/api"},"components":{"label":"Components","stepIn":true,"url":"/docs/api/admin-extensions/components"}}},"checkout":{"label":"Checkout","children":{"overview":{"label":"About checkout app extensions","url":"/docs/api/checkout-extensions"},"in_checkout":{"label":"Checkout UI","stepIn":true,"url":"/docs/api/checkout-ui-extensions"},"post_purchase":{"label":"Post-purchase","children":{"overview":{"label":"About post-purchase extensions","url":"/docs/api/checkout-extensions/post-purchase"},"configuration":{"label":"Configuration","url":"/docs/api/checkout-extensions/post-purchase/configuration"},"extension_points_api":{"label":"Extension points API","url":"/docs/api/checkout-extensions/post-purchase/api"},"components":{"label":"Components","url":"/docs/api/checkout-extensions/post-purchase/components"},"jwt-specification":{"label":"JWT specification","url":"/docs/api/checkout-extensions/post-purchase/jwt-specification"}}}}},"customer_accounts":{"label":"Customer account","children":{"overview":{"label":"About customer account extensions","stepIn":true,"url":"/docs/api/customer-account-ui-extensions"},"targets":{"label":"Targets","stepIn":true,"url":"/docs/api/customer-account-ui-extensions/targets"},"apis":{"label":"APIs","stepIn":true,"url":"/docs/api/customer-account-ui-extensions/apis"},"components":{"label":"Components","stepIn":true,"url":"/docs/api/customer-account-ui-extensions/components"}}},"discounts":{"label":"Discount components","children":{"overview":{"label":"About discount components","url":"/docs/api/discounts"},"components":{"label":"Components","children":{"activeDatesCard":{"label":"ActiveDatesCard","url":"/docs/api/discounts/components/active-dates-card"},"appProvider":{"label":"AppProvider","url":"/docs/api/discounts/components/app-provider"},"combinationCard":{"label":"CombinationCard","url":"/docs/api/discounts/components/combination-card"},"countriesAndRatesCard":{"label":"CountriesAndRatesCard","url":"/docs/api/discounts/components/countries-and-rates-card"},"customerEligibilityCard":{"label":"CustomerEligibilityCard","url":"/docs/api/discounts/components/customer-eligibility-card"},"methodCard":{"label":"MethodCard","url":"/docs/api/discounts/components/method-card"},"minimumRequirementsCard":{"label":"MinimumRequirementsCard","url":"/docs/api/discounts/components/minimum-requirements-card"},"purchaseTypeCard":{"label":"PurchaseTypeCard","url":"/docs/api/discounts/components/purchase-type-card"},"summaryCard":{"label":"SummaryCard","url":"/docs/api/discounts/components/summary-card"},"usageLimitsCard":{"label":"UsageLimitsCard","url":"/docs/api/discounts/components/usage-limits-card"}}}}},"marketing":{"label":"Marketing activities","children":{"overview":{"label":"About marketing activities app extensions","url":"/docs/api/marketing-activities"},"components":{"label":"Components","url":"/docs/api/marketing-activities/components"},"endpoints":{"label":"Endpoints","url":"/docs/api/marketing-activities/endpoints"},"statuses":{"label":"Statuses","url":"/docs/api/marketing-activities/statuses"}}},"pos":{"label":"Shopify Point of Sale","children":{"overview":{"label":"About Shopify Point of Sale app extensions","url":"/docs/api/pos-extensions"},"ui-extensions":{"label":"UI extensions reference","children":{"overview":{"label":"About POS UI extensions","stepIn":true,"url":"/docs/api/pos-ui-extensions"},"targets":{"label":"Extension targets","stepIn":true,"url":"/docs/api/pos-ui-extensions/targets"},"apis":{"label":"APIs","stepIn":true,"url":"/docs/api/pos-ui-extensions/apis"},"components":{"label":"Components","stepIn":true,"url":"/docs/api/pos-ui-extensions/components"},"versions":{"label":"Versions","stepIn":true,"url":"/docs/api/pos-ui-extensions/versions"},"migration":{"label":"Migration guide","stepIn":true,"url":"/docs/api/pos-ui-extensions/migrating"}}},"cart":{"label":"Cart extension reference","url":"/docs/api/pos-extensions/cart-reference"},"recommendations":{"label":"Product recommendations reference","url":"/docs/api/pos-extensions/product-recommendations-reference"}}},"product_subscription":{"label":"Product subscriptions","children":{"overview":{"label":"About product subscription app extensions","url":"/docs/api/product-subscription-extensions"},"extension_points_apis":{"label":"Extension points APIs","url":"/docs/api/product-subscription-extensions/api"},"components":{"label":"Components","url":"/docs/api/product-subscription-extensions/components"}}}}},"storefronts_group":{"group_description":"Storefronts","links":{"storefront":{"label":"Storefront API","stepIn":true,"url":"/docs/api/storefront"},"liquid":{"label":"Liquid","stepIn":true,"url":"/docs/api/liquid"},"ajax_api":{"label":"Ajax API","children":{"overview":{"label":"About the Ajax API","url":"/docs/api/ajax"},"reference":{"label":"Reference","url":"/docs/api/ajax/reference","children":{"cart":{"label":"Cart","url":"/docs/api/ajax/reference/cart"},"product":{"label":"Product","url":"/docs/api/ajax/reference/product"},"product_recommendations":{"label":"Product recommendations","url":"/docs/api/ajax/reference/product-recommendations"},"predictive_search":{"label":"Predictive search","url":"/docs/api/ajax/reference/predictive-search"}}},"section_rendering_api":{"label":"Section Rendering API","url":"/docs/api/ajax/section-rendering"}}},"hydrogen_2":{"label":"Hydrogen framework","stepIn":true,"url":"/docs/api/hydrogen"},"hydrogen_react":{"label":"Hydrogen React library","stepIn":true,"url":"/docs/api/hydrogen-react"},"customer_privacy_api":{"label":"Customer Privacy API","url":"/docs/api/customer-privacy"},"customer_account_api":{"label":"Customer Account API","stepIn":true,"url":"/docs/api/customer"}}},"additional_apis_group":{"group_description":"Additional APIs","links":{"blockchain":{"label":"Blockchain","children":{"overview":{"label":"About blockchain components","url":"/docs/api/blockchain"},"components":{"label":"Components","url":"/docs/api/blockchain/components","children":{"connect-wallet":{"label":"Connect wallet","url":"/docs/api/blockchain/components/connect-wallet"},"tokengate":{"label":"Tokengate","url":"/docs/api/blockchain/components/tokengate"}}},"theming":{"label":"Theming","url":"/docs/api/blockchain/theming"},"analytics":{"label":"Analytics","url":"/docs/api/blockchain/analytics"}}},"multipass":{"label":"Multipass","url":"/docs/api/multipass"},"shopifyql":{"label":"ShopifyQL for analytics","children":{"overview":{"label":"About ShopifyQL for analytics","url":"/docs/api/shopifyql"},"shopifyql-reference":{"label":"ShopifyQL reference","url":"/docs/api/shopifyql/shopifyql-reference"},"segment-query-language-reference":{"label":"Segment query language reference","url":"/docs/api/shopifyql/segment-query-language-reference"},"datasets":{"label":"Datasets","url":"/docs/api/shopifyql/datasets","children":{"orders-dataset":{"label":"Orders dataset","url":"/docs/api/shopifyql/datasets/orders-dataset"},"products-dataset":{"label":"Products dataset","url":"/docs/api/shopifyql/datasets/products-dataset"},"payment-attempts-dataset":{"label":"Payment attempts dataset","url":"/docs/api/shopifyql/datasets/payment-attempts-dataset"}}}}},"pixels":{"label":"Web pixel","children":{"overview":{"label":"About Web pixel app extensions","url":"/docs/api/pixels"},"extension_api":{"label":"Web Pixels API","stepIn":true,"url":"/docs/api/web-pixels-api"}}}}}},"beta":{"heading":"Beta","pos_extension_migration":{"pos_extension_migration_group":{"group_description":"POS unified extension migration.","links":{"pos_extension_migration":{"label":"POS unified extension migration","url":"/beta/pos-extension-migration"}}}},"awareness_ads":{"awareness_ads_group":{"group_description":"Purchase awareness ads.","links":{"awareness_ads":{"label":"Awareness ads","url":"/beta/awareness-ads"}}}},"managed_pricing":{"managed_pricing_group":{"group_description":"Managed app pricing","links":{"managed_pricing":{"label":"Managed app pricing","url":"/beta/managed-pricing/getting-started"}}}},"shipping_partner_platform":{"shipping_partner_platform_group":{"group_description":"Shipping Partner Platform","links":{"shipping_partner_platform":{"label":"Shipping Partner Platform","children":{"overview":{"label":"Overview","url":"/beta/shipping-partner-platform"},"file-uploads":{"label":"File Uploads","url":"/beta/shipping-partner-platform/file-uploads","children":{"generic-rate-cards":{"label":"Generic Rate Cards","url":"/beta/shipping-partner-platform/file-uploads/generic-rate-cards"}}},"grc":{"label":"Generic Rate Cards","children":{"overview":{"label":"Overview","url":"/beta/shipping-partner-platform/generic-rate-cards"},"settings-global":{"label":"Settings Global File format","url":"/beta/shipping-partner-platform/generic-rate-cards/settings-global-file-format"},"zones":{"label":"Zones File format","url":"/beta/shipping-partner-platform/generic-rate-cards/zones-file-format"},"conditions":{"label":"Conditions File format","url":"/beta/shipping-partner-platform/generic-rate-cards/conditions-file-format"},"mail_services":{"label":"Mail Services File format","url":"/beta/shipping-partner-platform/generic-rate-cards/mail-services-file-format"},"package_types":{"label":"Package Types File format","url":"/beta/shipping-partner-platform/generic-rate-cards/package-types-file-format"},"settings_rates":{"label":"Settings Rates File format","url":"/beta/shipping-partner-platform/generic-rate-cards/settings-rates-file-format"},"base_rates":{"label":"Base Rates File format","url":"/beta/shipping-partner-platform/generic-rate-cards/base-rates-file-format"},"flat_rates":{"label":"Flat Rates File format","url":"/beta/shipping-partner-platform/generic-rate-cards/flat-rates-file-format"},"shipment_options":{"label":"Shipment Options File format","url":"/beta/shipping-partner-platform/generic-rate-cards/shipment-options-file-format"},"surcharges":{"label":"Surcharges File format","url":"/beta/shipping-partner-platform/generic-rate-cards/surcharges-file-format"},"time_in_transit":{"label":"Time in Transit File format","url":"/beta/shipping-partner-platform/generic-rate-cards/time-in-transit-file-format"},"facility_time_in_transit":{"label":"Facility Time in Transit File format","url":"/beta/shipping-partner-platform/generic-rate-cards/facility-time-in-transit-file-format"},"postal_code_to_facility_code":{"label":"Postal Code to Facility Code File format","url":"/beta/shipping-partner-platform/generic-rate-cards/postal-code-to-facility-code-file-format"},"messages":{"label":"Messages File format","url":"/beta/shipping-partner-platform/generic-rate-cards/messages-file-format"}}},"pickup_points":{"label":"Pickup Points","children":{"specification":{"label":"File format","url":"/beta/shipping-partner-platform/pickup-points/file-format"}}}}}}}}},"workshops":{"heading":"Training","hydrogen":{"hydrogen_workshops_group":{"group_description":"Curriculum","links":{"welcome":{"label":"Welcome","url":"/workshops/hydrogen"},"pre-work":{"label":"Pre-work","url":"/workshops/hydrogen/begin-development"},"day_1":{"label":"Day 1","children":{"remix":{"label":"Remix core concepts","url":"/workshops/hydrogen/remix"},"home_page":{"label":"Build a home page","url":"/workshops/hydrogen/collection-page"}}},"day_2":{"label":"Day 2","children":{"oxygen":{"label":"Deploy with Oxygen","url":"/workshops/hydrogen/deploy-oxygen"},"product_page":{"label":"Build a product page","url":"/workshops/hydrogen/product-page"}}},"day_3":{"label":"Day 3","children":{"cart":{"label":"Build a cart page","url":"/workshops/hydrogen/cart-page"}}}}}}}}}; window.I18n.globals = {"total_blog_subscribers":"446,005","trial_length":3,"custom_signup_header":""}; //]]> </script> <script> //<![CDATA[ window.RailsData = {"features":["adaptive_rate_limiter","automated_privacy","cli_managed_subscription_link_creation_and_migration","combined_listings","conditionally_disable_gift_cards","customer_account_ui_extensions_stable_docs","dat_scheduled_feature_tho","discounts_allocator_function","editor_extension_collections_docs","enforce_fulfillment_order_status_on_create_fulfillment","explicit_buyer_consent","extensions_only_discounts_app","flex_sections","gql_ai","gql_ai_v2","gql_example_switcher","gql_operation_cache","headless_cmp","mockshop_ai","mockshop_ai_disable_force_ai","net_new_webhooks_reference_2024","online_store_new_datasources","product_discount_cart_line_targeting","rest_admin_api_deprecation","rev_share_jan24","sched_2","schedule_test","shipping_discount_functions_general_availability","static_blocks","style_settings","theme_blocks","theme_blocks_data_sources","versioned_app_config","zero_redirect_auth"],"enable_theme_mode":true,"search":{"selectable_versions":{"default":{"values":["unstable","2025-01","2024-10","2024-07","2024-04","2024-01"],"stable_version":"2024-10"},"API: Admin Extensions":{"stable_version":"unstable","values":["unstable","2024-10","2024-07","2024-04","2024-01","2023-10"]},"API: Checkout UI extensions":{"stable_version":"unstable","values":["unstable","2024-10","2024-07","2024-04","2024-01","2023-10","2023-07","2023-04"]},"API: Customer account UI extensions":{"stable_version":"unstable","values":["unstable","2024-10"]},"API: Hydrogen":{"stable_version":"2024-10","values":["2024-10","2024-07","2024-04","2024-01","2023-10","2023-07","2023-04"]},"API: Hydrogen React":{"stable_version":"2024-10","values":["2024-10","2024-07","2024-04","2024-01","2023-10","2023-07","2023-04","2023-01"]},"API: POS UI Extensions":{"stable_version":"unstable","values":["unstable","2024-10","2024-07","2024-04"]},"API: shopify app remix":{"stable_version":"v3","values":["v3","v2","v1"]},"API: Webhooks":{"stable_version":"unstable","values":["unstable","2025-01","2024-10","2024-07","2024-04","2024-01"]}},"categories":{"API: Admin Extensions":{"reference_name":"admin-extensions","versioned":true,"cookie_name":"api_version"},"API: App Bridge Library":{"reference_name":"app-bridge-library","versioned":false,"cookie_name":"api_version"},"API: Checkout UI extensions":{"reference_name":"checkout-ui-extensions","versioned":true,"cookie_name":"api_version"},"API: Customer account UI extensions":{"reference_name":"customer-account-ui-extensions","versioned":true,"cookie_name":"api_version"},"API: Hydrogen":{"reference_name":"hydrogen","versioned":true,"cookie_name":"api_version"},"API: Hydrogen React":{"reference_name":"hydrogen-react","versioned":true,"cookie_name":"api_version"},"API: Hydrogen UI":{"reference_name":"hydrogen-ui","versioned":false,"cookie_name":"api_version"},"API: POS UI Extensions":{"reference_name":"pos-ui-extensions","versioned":true,"cookie_name":"api_version"},"API: shopify app remix":{"reference_name":"shopify-app-remix","versioned":true,"cookie_name":"api_version_shopify-app-remix"},"API: Shopify CLI":{"reference_name":"shopify-cli","versioned":false,"cookie_name":"api_version"},"API: Web Pixels API":{"reference_name":"web-pixels-api","versioned":false,"cookie_name":"api_version"},"API: Webhooks":{"reference_name":"webhooks","versioned":true,"cookie_name":"api_version"}}},"env":"production","bugsnagApiKey":"fc1be50c64e992230ef8ca972c17217c","url_section":"storefronts","markdown_path":"content/storefronts/themes/architecture/sections/section-schema.md","sidebarData":{"heading":"Themes","groups":[{"label":"Getting started","isGroup":true,"children":[{"label":"Overview","href":"/docs/storefronts/themes"},{"label":"Getting started","children":[{"label":"Overview","href":"/docs/storefronts/themes/getting-started"},{"label":"Create a theme","href":"/docs/storefronts/themes/getting-started/create"},{"label":"Customize a theme","href":"/docs/storefronts/themes/getting-started/customize"}]},{"label":"Architecture","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture"},{"label":"Layouts","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/layouts"},{"label":"checkout.liquid","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/layouts/checkout-liquid"},{"label":"Customize checkout.liquid","href":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/customize-checkout"},{"label":"Checkout CSS","href":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/checkout-css"}]}]},{"label":"Templates","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/templates"},{"label":"JSON templates","href":"/docs/storefronts/themes/architecture/templates/json-templates"},{"label":"article","href":"/docs/storefronts/themes/architecture/templates/article"},{"label":"blog","href":"/docs/storefronts/themes/architecture/templates/blog"},{"label":"cart","href":"/docs/storefronts/themes/architecture/templates/cart"},{"label":"collection","href":"/docs/storefronts/themes/architecture/templates/collection"},{"label":"customers/account","href":"/docs/storefronts/themes/architecture/templates/customers-account"},{"label":"customers/activate_account","href":"/docs/storefronts/themes/architecture/templates/customers-activate-account"},{"label":"customers/addresses","href":"/docs/storefronts/themes/architecture/templates/customers-addresses"},{"label":"customers/login","href":"/docs/storefronts/themes/architecture/templates/customers-login"},{"label":"customers/order","href":"/docs/storefronts/themes/architecture/templates/customers-order"},{"label":"customers/register","href":"/docs/storefronts/themes/architecture/templates/customers-register"},{"label":"customers/reset_password","href":"/docs/storefronts/themes/architecture/templates/customers-reset-password"},{"label":"gift_card.liquid","href":"/docs/storefronts/themes/architecture/templates/gift-card-liquid"},{"label":"index","href":"/docs/storefronts/themes/architecture/templates/index-template"},{"label":"list-collections","href":"/docs/storefronts/themes/architecture/templates/list-collections"},{"label":"metaobject","href":"/docs/storefronts/themes/architecture/templates/metaobject"},{"label":"page","href":"/docs/storefronts/themes/architecture/templates/page"},{"label":"password","href":"/docs/storefronts/themes/architecture/templates/password"},{"label":"product","href":"/docs/storefronts/themes/architecture/templates/product"},{"label":"robots.txt.liquid","href":"/docs/storefronts/themes/architecture/templates/robots-txt-liquid"},{"label":"search","href":"/docs/storefronts/themes/architecture/templates/search"},{"label":"404","href":"/docs/storefronts/themes/architecture/templates/404"}]},{"label":"Sections","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/sections"},{"label":"Section schema","href":"/docs/storefronts/themes/architecture/sections/section-schema"},{"label":"Section assets","href":"/docs/storefronts/themes/architecture/sections/section-assets"},{"label":"Integrate with the theme editor","href":"/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-editor"}]},{"label":"Blocks","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/blocks"},{"label":"Section blocks","href":"/docs/storefronts/themes/architecture/blocks/section-blocks"},{"label":"Theme blocks","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks"},{"label":"Block schema","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/schema"},{"label":"Static Blocks","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks"},{"label":"Dynamic sources","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/dynamic-sources"},{"label":"Developer preview","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/developer-preview"}]},{"label":"App blocks","href":"/docs/storefronts/themes/architecture/blocks/app-blocks"}]},{"label":"Section groups","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/section-groups"},{"label":"Migrate","href":"/docs/storefronts/themes/architecture/section-groups/migrate"}]},{"label":"Config","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/config"},{"label":"settings_schema.json","href":"/docs/storefronts/themes/architecture/config/settings-schema-json"},{"label":"settings_data.json","href":"/docs/storefronts/themes/architecture/config/settings-data-json"}]},{"label":"Locales","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/locales"},{"label":"Schema locale files","href":"/docs/storefronts/themes/architecture/locales/schema-locale-files"},{"label":"Storefront locale files","href":"/docs/storefronts/themes/architecture/locales/storefront-locale-files"}]},{"label":"Settings","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/settings"},{"label":"Input settings","href":"/docs/storefronts/themes/architecture/settings/input-settings"},{"label":"Style settings","href":"/docs/storefronts/themes/architecture/settings/style-settings"},{"label":"Sidebar settings","href":"/docs/storefronts/themes/architecture/settings/sidebar-settings"},{"label":"Dynamic sources","href":"/docs/storefronts/themes/architecture/settings/dynamic-sources"},{"label":"Fonts","href":"/docs/storefronts/themes/architecture/settings/fonts"},{"label":"Deprecated settings","href":"/docs/storefronts/themes/architecture/settings/deprecated-settings"}]}]},{"label":"Developer tools","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools"},{"label":"CLI","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/cli"},{"label":"CI/CD","href":"/docs/storefronts/themes/tools/cli/ci-cd"},{"label":"Commands","href":"/docs/api/shopify-cli/theme","stepIn":true},{"label":"Language Server","href":"/docs/storefronts/themes/tools/cli/language-server"},{"label":"Environments","href":"/docs/storefronts/themes/tools/cli/environments"},{"label":"Migrate","href":"/docs/storefronts/themes/tools/cli/migrate"},{"label":"CLI 2.x","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/cli/cli-2"},{"label":"Commands","href":"/docs/storefronts/themes/tools/cli/cli-2/commands"},{"label":"Install, upgrade, or uninstall","href":"/docs/storefronts/themes/tools/cli/cli-2/upgrade-uninstall"}]}]},{"label":"GitHub integration","href":"/docs/storefronts/themes/tools/github"},{"label":"VS Code extension","href":"/docs/storefronts/themes/tools/shopify-liquid-vscode"},{"label":"Prettier plugin","href":"/docs/storefronts/themes/tools/liquid-prettier-plugin"},{"label":"Theme Check","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/theme-check"},{"label":"Commands","href":"/docs/storefronts/themes/tools/theme-check/commands"},{"label":"Configuration","href":"/docs/storefronts/themes/tools/theme-check/configuration"},{"label":"Checks reference","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/theme-check/checks"},{"label":"AppBlockValidTags","href":"/docs/storefronts/themes/tools/theme-check/checks/app-block-valid-tags"},{"label":"AssetPreload","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-preload"},{"label":"AssetSizeAppBlockCSS","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-css"},{"label":"AssetSizeAppBlockJavascript","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-javascript"},{"label":"AssetSizeCSS","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-css"},{"label":"AssetSizeJavascript","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-javascript"},{"label":"BlockIdUsage","href":"/docs/storefronts/themes/tools/theme-check/checks/block-id-usage"},{"label":"CaptureOnContentForBlock","href":"/docs/storefronts/themes/tools/theme-check/checks/capture-on-content-for-block"},{"label":"CdnPreconnect","href":"/docs/storefronts/themes/tools/theme-check/checks/cdn-preconnect"},{"label":"ContentForHeaderModification","href":"/docs/storefronts/themes/tools/theme-check/checks/content-for-header-modification"},{"label":"DeprecateBgsizes","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes"},{"label":"DeprecateLazysizes","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-lazysizes"},{"label":"DeprecatedFilter","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-filter"},{"label":"DeprecatedTag","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-tag"},{"label":"ImgWidthAndHeight","href":"/docs/storefronts/themes/tools/theme-check/checks/img-width-and-height"},{"label":"JSONSyntaxError","href":"/docs/storefronts/themes/tools/theme-check/checks/json-syntax-error"},{"label":"LiquidHTMLSyntaxError","href":"/docs/storefronts/themes/tools/theme-check/checks/liquid-html-syntax-error"},{"label":"MatchingTranslations","href":"/docs/storefronts/themes/tools/theme-check/checks/matching-translations"},{"label":"MatchingSchemaTranslations","href":"/docs/storefronts/themes/tools/theme-check/checks/matching-schema-translations"},{"label":"MissingAsset","href":"/docs/storefronts/themes/tools/theme-check/checks/missing-asset"},{"label":"MissingTemplate","href":"/docs/storefronts/themes/tools/theme-check/checks/missing-template"},{"label":"PaginationSize","href":"/docs/storefronts/themes/tools/theme-check/checks/pagination-size"},{"label":"ParserBlockingJavaScript","href":"/docs/storefronts/themes/tools/theme-check/checks/parser-blocking-javascript"},{"label":"RemoteAsset","href":"/docs/storefronts/themes/tools/theme-check/checks/remote-asset"},{"label":"RequiredLayoutThemeObject","href":"/docs/storefronts/themes/tools/theme-check/checks/required-layout-theme-object"},{"label":"TranslationKeyExists","href":"/docs/storefronts/themes/tools/theme-check/checks/translation-key-exists"},{"label":"UnclosedHTMLElement","href":"/docs/storefronts/themes/tools/theme-check/checks/unclosed-html-element"},{"label":"UndefinedObject","href":"/docs/storefronts/themes/tools/theme-check/checks/undefined-object"},{"label":"UniqueStaticBlockId","href":"/docs/storefronts/themes/tools/theme-check/checks/unique-static-block-id"},{"label":"UnknownFilter","href":"/docs/storefronts/themes/tools/theme-check/checks/unknown-filter"},{"label":"UnusedAssign","href":"/docs/storefronts/themes/tools/theme-check/checks/unused-assign"},{"label":"ValidBlockTarget","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-block-target"},{"label":"ValidContentForArguments","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-content-for-arguments"},{"label":"ValidHTMLTranslation","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-html-translation"},{"label":"ValidLocalBlocks","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-local-blocks"},{"label":"ValidSchema","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema"},{"label":"ValidSchemaName","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema-name"},{"label":"ValidStaticBlockType","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-static-block-type"},{"label":"VariableName","href":"/docs/storefronts/themes/tools/theme-check/checks/variable-name"}]},{"label":"Migrate","href":"/docs/storefronts/themes/tools/theme-check/migrate"}]},{"label":"Theme editor","href":"/docs/storefronts/themes/tools/online-editor"},{"label":"Code editor","href":"/docs/storefronts/themes/tools/code-editor"},{"label":"Theme Access app","href":"/docs/storefronts/themes/tools/theme-access"},{"label":"Development stores","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/development-stores"},{"label":"Test data","href":"/docs/storefronts/themes/tools/development-stores/generated-data"},{"label":"Transfer a development store","href":"/docs/storefronts/themes/tools/development-stores/transfer-development-stores"}]},{"label":"Collaborator accounts","href":"/docs/storefronts/themes/tools/collaborator-accounts"},{"label":"Theme Inspector","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/theme-inspector"},{"label":"Optimizing themes using Theme Inspector","href":"/docs/storefronts/themes/tools/theme-inspector/using-the-theme-inspector"}]},{"label":"Lighthouse CI","href":"/docs/storefronts/themes/tools/lighthouse-ci"},{"label":"Dawn","href":"/docs/storefronts/themes/tools/dawn"}]},{"label":"Best practices","children":[{"label":"Overview","href":"/docs/storefronts/themes/best-practices"},{"label":"Sections and blocks","href":"/docs/storefronts/themes/best-practices/templates-sections-blocks"},{"label":"Performance","children":[{"label":"Overview","href":"/docs/storefronts/themes/best-practices/performance"},{"label":"Platform","href":"/docs/storefronts/themes/best-practices/performance/platform"}]},{"label":"Accessibility","href":"/docs/storefronts/themes/best-practices/accessibility"},{"label":"Theme editor preview inspector","href":"/docs/storefronts/themes/best-practices/theme-editor-preview-inspector"},{"label":"Design","children":[{"label":"Overview","href":"/docs/storefronts/themes/best-practices/design"},{"label":"Color system","href":"/docs/storefronts/themes/best-practices/design/color-system"}]},{"label":"Merchant stores","href":"/docs/storefronts/themes/best-practices/merchant-stores"},{"label":"Version control","href":"/docs/storefronts/themes/best-practices/version-control"},{"label":"File transformation","href":"/docs/storefronts/themes/best-practices/file-transformation"},{"label":"Deceptive code","href":"/docs/storefronts/themes/best-practices/deceptive-code"}]}]},{"label":"Theme features","isGroup":true,"children":[{"label":"Integrating apps","href":"/docs/apps/online-store"},{"label":"Product merchandising","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising"},{"label":"Product variants","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising/variants"},{"label":"Support high-variant products","href":"/docs/storefronts/themes/product-merchandising/variants/support-high-variant-products"}]},{"label":"Product recommendations","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising/recommendations"},{"label":"Related products","href":"/docs/storefronts/themes/product-merchandising/recommendations/related-products"},{"label":"Complementary products","href":"/docs/storefronts/themes/product-merchandising/recommendations/complementary-products"}]},{"label":"Media and images","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising/media"},{"label":"Support product media","href":"/docs/storefronts/themes/product-merchandising/media/support-media"},{"label":"Product media UX guidelines","href":"/docs/storefronts/themes/product-merchandising/media/media-ux"}]},{"label":"Gift cards","href":"/docs/storefronts/themes/product-merchandising/gift-cards"}]},{"label":"Pricing and payments","children":[{"label":"Overview","href":"/docs/storefronts/themes/pricing-payments"},{"label":"Discounts","href":"/docs/storefronts/themes/pricing-payments/discounts"},{"label":"Subscriptions","children":[{"label":"Overview","href":"/docs/storefronts/themes/pricing-payments/subscriptions"},{"label":"Add subscriptions to your theme","href":"/docs/storefronts/themes/pricing-payments/subscriptions/add-subscriptions-to-your-theme"},{"label":"Subscription UX guidelines","href":"/docs/storefronts/themes/pricing-payments/subscriptions/subscription-ux-guidelines"}]},{"label":"Pre-orders and Try Before You Buy","children":[{"label":"Overview","href":"/docs/storefronts/themes/pricing-payments/preorder-tbyb"},{"label":"Add pre-orders and TBYB to your theme","href":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/add-preorder-tbyb-to-your-theme"},{"label":"Pre-orders and TBYB UX guidelines","href":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/preorder-tbyb-ux-guidelines"}]},{"label":"Shop Pay Installments","href":"/docs/storefronts/themes/pricing-payments/installments"},{"label":"Accelerated checkout","children":[{"label":"About accelerated checkout","href":"/docs/storefronts/themes/pricing-payments/accelerated-checkout"},{"label":"Upgrade accelerated checkout","href":"/docs/storefronts/themes/pricing-payments/accelerated-checkout/upgrade-accelerated-checkout"}]},{"label":"B2B","href":"/docs/storefronts/themes/pricing-payments/b2b"},{"label":"Unit pricing","href":"/docs/storefronts/themes/pricing-payments/unit-pricing"},{"label":"Explicit currency formatting","href":"/docs/storefronts/themes/pricing-payments/currency-formatting"}]},{"label":"Delivery and fulfillment","children":[{"label":"Overview","href":"/docs/storefronts/themes/delivery-fulfillment"},{"label":"Pickup availability","href":"/docs/storefronts/themes/delivery-fulfillment/pickup-availability"}]},{"label":"Customer engagement","children":[{"label":"Overview","href":"/docs/storefronts/themes/customer-engagement"},{"label":"Email consent","href":"/docs/storefronts/themes/customer-engagement/email-consent"},{"label":"Additional customer information","href":"/docs/storefronts/themes/customer-engagement/additional-customer-information"},{"label":"Add a contact form","href":"/docs/storefronts/themes/customer-engagement/add-contact-form"}]},{"label":"Markets","children":[{"label":"Overview","href":"/docs/storefronts/themes/markets"},{"label":"Support multiple currencies and languages","href":"/docs/storefronts/themes/markets/multiple-currencies-languages"},{"label":"Detect and set a visitor’s optimal localization","href":"/docs/storefronts/themes/markets/localization-discovery"},{"label":"Country and language selector UX guidelines","href":"/docs/storefronts/themes/markets/country-language-ux"}]},{"label":"Site navigation and search","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search"},{"label":"Navigation","href":"/docs/storefronts/themes/navigation-search/navigation"},{"label":"Storefront search","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search/search"},{"label":"Predictive search","href":"/docs/storefronts/themes/navigation-search/search/predictive-search"},{"label":"Predictive search UX guidelines","href":"/docs/storefronts/themes/navigation-search/search/predictive-search-ux"}]},{"label":"Filtering","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search/filtering"},{"label":"Storefront filtering","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering"},{"label":"Support storefront filtering","href":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering"},{"label":"Storefront filtering UX guidelines","href":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/storefront-filtering-ux"}]},{"label":"Tag filtering","href":"/docs/storefronts/themes/navigation-search/filtering/tag-filtering"}]}]},{"label":"SEO","children":[{"label":"Overview","href":"/docs/storefronts/themes/seo"},{"label":"Metadata","href":"/docs/storefronts/themes/seo/metadata"},{"label":"hreflang tags","href":"/docs/storefronts/themes/seo/hreflang"},{"label":"robots.txt","href":"/docs/storefronts/themes/seo/robots-txt"}]},{"label":"Trust and security","children":[{"label":"Overview","href":"/docs/storefronts/themes/trust-security"},{"label":"Security badges","href":"/docs/storefronts/themes/trust-security/security-badges"},{"label":"Captcha","href":"/docs/storefronts/themes/trust-security/captcha"}]},{"label":"Migrating to Online Store 2.0","children":[{"label":"Overview","href":"/docs/storefronts/themes/os20"},{"label":"Assessment","href":"/docs/storefronts/themes/os20/assessment"},{"label":"Migration guide","href":"/docs/storefronts/themes/os20/migration"}]},{"label":"Troubleshooting","href":"/docs/storefronts/themes/troubleshooting"}]},{"label":"Sell themes","isGroup":true,"children":[{"label":"Theme Store","children":[{"label":"Overview","href":"/docs/storefronts/themes/store"},{"label":"Requirements","href":"/docs/storefronts/themes/store/requirements"},{"label":"Testing","children":[{"label":"Overview","href":"/docs/storefronts/themes/store/test-theme"},{"label":"Testing assets","href":"/docs/storefronts/themes/store/test-theme/assets"},{"label":"Testing checklist","href":"/docs/storefronts/themes/store/test-theme/checklist"}]},{"label":"Review process","children":[{"label":"Submitting a theme","href":"/docs/storefronts/themes/store/review-process/submit-theme"},{"label":"Theme Store listings","href":"/docs/storefronts/themes/store/review-process/listings"},{"label":"Common theme rejections","href":"/docs/storefronts/themes/store/review-process/common-theme-rejections"}]},{"label":"Theme success","children":[{"label":"Overview","href":"/docs/storefronts/themes/store/success"},{"label":"Prohibited actions","href":"/docs/storefronts/themes/store/success/prohibited-actions"},{"label":"Managing theme reviews","href":"/docs/storefronts/themes/store/success/managing-theme-reviews"},{"label":"Brand asset guidance","href":"/docs/storefronts/themes/store/success/brand-assets"},{"label":"Updating your theme","href":"/docs/storefronts/themes/store/success/updates"},{"label":"Removing a theme","href":"/docs/storefronts/themes/store/success/remove-theme"}]},{"label":"Theme revenue share","href":"/docs/storefronts/themes/store/revenue-share"}]}]}]},"page":{"gid":"681845AA-DFDB-4C96-8451-9601B5BF9D7D","error_type":null}} //]]> </script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/runtime-ea8ae0432c21b175dec34e78932fd74fe0b148f9bd1e4e3636ac9621a838082d.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_buffer_index_js-6058094e37b5637bf74a10bf4e56b90b66298cee81a245c3fac459f7df6ffdfd.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_jquery_dist_jquery_js-ee5a0459d56a6853367ae50bfbcf439154e941a4c52791e24de38e3ee50f1abf.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_shopify_monorail_lib_esnext_producers_monorail-edge-producer_esnext-node-bbaa59-02fc12c0f234a49e04be7f3ed47d42a67e745670ec6ab6345b514edd54d70106.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/application-648df1ef626ff3b3c4ba19a4fb2204e2e1e21f4ed7819fe8a2366df67781c03d.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_shopify_react-i18n_build_esnext_hooks_esnext-82590a72ce35c447eebc1bc5b1db690730edfb1b53b129ba77fe2c84a39b5d63.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_codemirror_state_dist_index_js-49f1612af09fbcd5c83eb648524e9d2c56ed07632af21f273613b033753af213.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_codemirror_view_dist_index_js-ad6bc125e51f7345ae63ee033e12db2b0a5823ec0797930de012a85192db1b3f.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_graphql-language-service_esm_index_js-548c6d4aa5b3eb047a3639b2de5b73829afeb43317e055193115b91a1f807e12.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_codemirror_language_dist_index_js-39e44c0834846ff62af8c55ea7f7bc4204a8d6854094711b640c4a079c494bda.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_cm6-graphql_dist_index_js-node_modules_codemirror_lang-html_dist_index_j-02ea26-4715ef8549e02c3f61174a18503d048552dc67d3361546ec9ae786da5de9de9f.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_lodash_debounce_index_js-node_modules_codemirror_commands_dist_index_js-adc0c775e1cb6c31fc3687c8e4f2f341eb6dcbe9b06fe4ffc73a1bdd0d05c107.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_classnames_index_js-node_modules_babel_runtime_helpers_extends_js-node_m-f4e6f8-a9342cfc56df30ee4d5ae13dfef5c4e7f75295da5e7bdc7e7441c308751064c2.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_marked_lib_marked_esm_js-27eb913b872a447b007078c1038b6cfcdde13d8232b6fd5c4eaeb25d93aa3be4.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_html-react-parser_esm_index_mjs-5b6c0da2b0f9c6ebb9322e662fea32ae0a347159b8111ea295894c46d26ad5a7.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_react-dom_server_browser_js-8ea7fd5993ec838c75ca6dd1b64670f661e8703d5eef41b99ae912dfe3a5ed82.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_bugsnag_js_browser_notifier_js-fee1503f0d3344076a617c3f74f8934e8aeb84ebde5fe803bc7b4b2e7f163972.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_shopify_monorail_lib_esnext_producers_monorail-edge-producer_esnext-node-376426-d4a9ae4fc4c3c30f7e048cfb00ef5e025ba123f16b03b48f54d48da7338d9fc2.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_radix-ui_react-popover_dist_index_mjs-f3cfb12154ed983e6b3ec7e233f0f7ad6f9191a0c200ec25f3df448d2133d1f9.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_shopify_css-utilities_build_esnext_variation-name_esnext-node_modules_re-d73217-cdc2682a807427471bd9b2e6a0dce63593cfa7773ed4bffc3e753cc1f48935dc.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_react-dom_client_js-a8d5eb94370eb1a10fbf5f746968a8ac12c6547cf473a84618203cb7fd04af6c.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_shopify_react-i18n_build_esnext_context_esnext-node_modules_babel_runtim-8b66b8-3312ec6425803301ffe14ccc211d457d7e82c6c07721ebadface0b243df11c53.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_codemirror-graphql_lint_js-node_modules_codemirror-graphql_mode_js-node_-0c4b37-d3254adc6f8974ef34ac92ed3696aed530bf27223f7a1b8de2364423b73676ec.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_codemirror-graphql_hint_js-node_modules_codemirror-graphql_variables_hin-9fc5f2-aa99460dc82083c932f24e7bb5b5b29472de24b62c555435d596054aea7c9b42.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors-node_modules_bugsnag_plugin-react_dist_bugsnag-react_js-node_modules_shopify_react-i1-a2d6af-8f05d7b50b04889b3768bbe73ef8fe7301de1543e67223688c43cedeb283ccc0.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_icons_index_ts-87fcfeceb1b52cdb4261f861424db673d124f92493cb94e1250bb74e64564481.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_CodeBlock_CodeBlock_tsx-app_ui_components_CodeBlock_components_SkeletonHead-fc1a35-cfe239791613842bb07888142a3d78fc3b4bf3e0f331dcba28454f894af3abf0.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_Search_components_SearchModal_components_Results_components_TabPanels_Resul-440ecd-68fb9c0b73ab12238cb39c630dc1dc0d7ba759a9bdcc121bc418fbbca448fa3e.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_Layout_Sidebar_Sidebar_tsx-9d321d4b5b31b2150c3e76eff0f87a891891c7f2c4dda266da4feb451225f352.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/app_ui_components_Layout_MainLayout_MainLayout_tsx-app_ui_components_Layout_MainLayout_index_-d16546-3d2785ce57aeaafcc0af1a52073ea46d2a660e75969efac621097bc4c3112be1.js"></script> <script src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/manifests/markdown_in_react-e46cd2913355ee97411635ff26f4a88d7de009788bf69ee4e4e16c9e26d99c93.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','//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://www.facebook.com/tr?id=1139564706572105&ev=PageView&noscript=1" /> </noscript> </body> </html>