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>Theme app extension configuration</title> <meta name="description" content="Learn about app blocks and app embed blocks for extending themes with apps."> <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="Theme app extension configuration" /> <meta property="og:description" content="Learn about app blocks and app embed blocks for extending themes with apps." /> <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/apps/build/online-store/theme-app-extensions/configuration" /> <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="Theme app extension configuration" /> <meta property="twitter:description" content="Learn about app blocks and app embed blocks for extending themes with apps." /> <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="vr7HACp7APJW39_-iqCRjjrkrpzUHf2CUL0uTZJjbzjFMIiZO_c6wQzHTb5ez2ZpkMMUVqijlZw6Ez6YaN0wog" /> </head> <body class="page--apps-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="#file-structure">File structure</a></li><li><a href="#app-blocks-for-themes">App blocks for themes</a></li><li><a href="#app-embed-blocks">App embed blocks</a></li><li><a href="#conditional-app-blocks">Conditional app blocks</a></li><li><a href="#schema">Schema</a></li><li><a href="#recommendations">Recommendations</a></li><li><a href="#file-and-content-size-limits">File and content size limits</a></li><li><a href="#restrictions">Restrictions</a></li><li><a href="#next-steps">Next steps</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"> Theme app extension configuration </h1> </div> <p>A theme app extension is a bundle of app blocks, app embed blocks, assets, and snippets.</p> <section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="file-structure">File structure</h2><a class="article-anchor-link" href="#file-structure"><span class="visuallyhidden">Anchor link to section titled "File structure"</span></a></div> <p>When you <a href="/docs/apps/build/online-store/theme-app-extensions/build">create a theme app extension</a>, Shopify adds the following <code class="text-highlight text-highlight--grey">theme-app-extension</code> directory and subdirectories to your app:</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> </div> <script data-option="filename" data-value="Theme app extension file structure"></script> <script type="text/plain" data-language="file" data-title="Newly-generated extension"> └── extensions └── my-theme-app-extension ├── assets ├── blocks ├── snippets ├── locales ├── package.json └── shopify.extension.toml </script> <script type="text/plain" data-language="file" data-title="Populated"> └── extensions └── my-theme-app-extension ├── assets │ ├── image.jpg │ ├── icon.svg │ ├── app-block.js │ ├── app-block.css │ ├── app-embed-block.js │ └── app-embed-block.css ├── blocks │ ├── app-block.liquid │ └── app-embed-block.liquid ├── snippets │ ├── app-block-snippet.liquid │ └── app-embed-block-snippet.liquid ├── locales | ├── en.default.json | ├── en.default.schema.json | ├── fr.json | └── fr.schema.json ├── package.json └── shopify.extension.toml </script> </div> </p> <table> <caption>Theme app extension subdirectory descriptions</caption> <tr> <th scope="col">Subdirectory</th> <th scope="col">Description</th> </tr> <tr> <td><code>assets</code></td> <td><p>Contains CSS, JavaScript, and other static app content that gets injected into themes.</p> <p>Apps can load <a href="/docs/storefronts/themes/architecture#assets">assets</a> using either the <code>JavaScript</code> and <code>stylesheet</code> <a href="#schema">schema attributes</a> or from the <code><a href="/docs/api/liquid/filters/asset_url">asset_url</a></code> and <code><a href="/docs/api/liquid/filters/asset_img_url">asset_img_url</a></code> Liquid URL filters.</p></td> </tr> <tr> <td><code>blocks</code></td> <td>Contains <a href="#app-blocks-for-themes">app blocks for themes</a> and <a href="#app-embed-blocks">app embed block</a> Liquid files.</td> </tr> <tr> <td><code>snippets</code></td> <td>Contains Liquid <a href="/docs/storefronts/themes/architecture#snippets">snippet</a> files for the theme app extension, which are bits of code that you can reference in other app blocks and app embed blocks.</td> </tr> <tr> <td><code>locales</code></td> <td> <p>Contains JSON locale files to host merchant-facing and customer-facing translations. These files are similar to <a href="/docs/storefronts/themes/architecture/locales">theme locale files</a> in their schema and usage. You can include the following file types:</p> <ul> <li><a href="/docs/storefronts/themes/architecture/locales/schema-locale-files">Schema locale files</a>: Contains merchant-facing translations. Use these files to translate the settings that appear in the theme editor.</li> <li><a href="/docs/storefronts/themes/architecture/locales/storefront-locale-files">Storefront locale files</a>: Contains customer-facing translations. Use these files to translate the text that appears in the storefront when your app block or app embed block is rendered.</li> </ul> <p><b>Note:</b> Merchants can't edit the strings in theme app extension storefront locale files.</p> </td> </tr> <tr> <td><code>shopify.extension.toml</code></td> <td> <p>A configuration file containing basic app configuration settings, including the extension name and type (<code>theme</code>). </td> </tr> </table> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="app-blocks-for-themes">App blocks for themes</h2><a class="article-anchor-link" href="#app-blocks-for-themes"><span class="visuallyhidden">Anchor link to section titled "App blocks for themes"</span></a></div> <p>Apps that inject inline content on a page extend themes using app blocks. Merchants can add app blocks to a compatible theme section, or as <a href="#examples-of-app-blocks-in-a-theme">wrapped</a> app blocks that are added at the section level. Create an app block by setting the <code class="text-highlight text-highlight--grey">target</code> in the schema to <code class="text-highlight text-highlight--grey">section</code>.</p> <p>By default, themes don't include app blocks after an app is installed. Merchants need to add the app blocks to the theme from the <strong>Apps</strong> section of the <a href="/docs/storefronts/themes/tools/online-editor">theme editor</a>.</p> <aside class="note tip"> <h4>Tip</h4> <p> <a rel="external noreferrer noopener" target="_blank" href="https://www.shopify.com/partners/blog/responsive-app-blocks">Build app blocks responsively</a>, so that they can adapt to the size of the sections to which they're added.</p> </aside> <p>Use app blocks for the following types of apps:</p> <ul> <li><p>Apps that you want to automatically point to dynamic sources, such as product reviews apps and star ratings apps.</p></li> <li><p>Apps that merchants might want to reposition on a page.</p></li> <li><p>Apps that should span the full width of a page.</p></li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="app-block-support-in-themes">App block support in themes</h3><a class="article-anchor-link" href="#app-block-support-in-themes"><span class="visuallyhidden">Anchor link to section titled "App block support in themes"</span></a></div> <p>For app blocks to function, a theme must contain the following:</p> <ul> <li><a href="/docs/storefronts/themes/architecture/templates/json-templates">JSON templates</a>.</li> <li><p>Sections that <a href="/docs/storefronts/themes/architecture/blocks/app-blocks#supporting-app-blocks">support</a> and <a href="/docs/storefronts/themes/architecture/blocks/app-blocks#render-app-blocks">render</a> blocks of type <code class="text-highlight text-highlight--grey">@app</code>.</p> <p>Refer to Dawn's <a rel="external noreferrer noopener" target="_blank" href="https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid">main product section</a> for an example implementation.</p></li> </ul> <p>You can <a href="/docs/apps/build/online-store/verify-support">verify</a> whether a theme supports app blocks .</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="example-app-block">Example app block</h3><a class="article-anchor-link" href="#example-app-block"><span class="visuallyhidden">Anchor link to section titled "Example app block"</span></a></div> <p>The following example creates a <code class="text-highlight text-highlight--grey">span</code> element with a <code class="text-highlight text-highlight--grey">style</code> attribute. The <code class="text-highlight text-highlight--grey">style</code> value (<code class="text-highlight text-highlight--grey">color: {{ block.settings.color }}</code>) searches inside of <code class="text-highlight text-highlight--grey">schema</code> for a <code class="text-highlight text-highlight--grey">settings</code> key, and then searches for a <code class="text-highlight text-highlight--grey">color</code> key, which contains the <code class="text-highlight text-highlight--grey">"default": "#000000"</code> value. This value then populates the <code class="text-highlight text-highlight--grey">style</code> attribute with the default color <code class="text-highlight text-highlight--grey">#000000</code>, which renders the <code class="text-highlight text-highlight--grey">App blocks let you build powerful integrations with online store themes!</code> text in black.</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> </div> <script data-option="filename" data-value="Example app block"></script> <script type="text/plain" data-language="liquid"> <span style="color: {{ block.settings.color }}"> App blocks let you build powerful integrations with online store themes. </span> {% render "app_snippet" %} {% schema %} { "name": "Hello World", "target": "section", "enabled_on": { "templates": ["index"] }, "stylesheet": "app.css", "javascript": "app.js", "settings": [ { "label": "Color", "id": "color", "type": "color", "default": "#000000" } ] } {% endschema %} </script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p> For a more complex example, refer to Shopify's <a rel="external noreferrer noopener" target="_blank" href="https://github.com/Shopify/product-reviews-sample-app">product reviews app</a>.</p> </aside><div class="heading-wrapper heading-wrapper-3"><h3 id="examples-of-app-blocks-in-a-theme">Examples of app blocks in a theme</h3><a class="article-anchor-link" href="#examples-of-app-blocks-in-a-theme"><span class="visuallyhidden">Anchor link to section titled "Examples of app blocks in a theme"</span></a></div> <p>The following is an example of an app block added to a section:</p> <div style="text-align: center"><img src="/assets/apps/app-block.png" alt="An example of an app block added to a section. The section is beside a product image and is for a product star ratings app block." width="50%"></div> <p>The following is an example of a wrapped app block:</p> <div style="text-align: center"><img src="/assets/apps/app-block-fw.png" alt="An example of an app block added as a section and wrapped to span the full width of the page. The section is below product details and is for a customer review comments app block." width="50%"></div> <div class="heading-wrapper heading-wrapper-3"><h3 id="benefits-of-app-blocks">Benefits of app blocks</h3><a class="article-anchor-link" href="#benefits-of-app-blocks"><span class="visuallyhidden">Anchor link to section titled "Benefits of app blocks"</span></a></div> <p>App blocks are flexible. Merchants can use the theme editor to add, remove, and reorder app blocks at the section level for easy customization.</p> <p>An app block can use <a href="#autofill"><code class="text-highlight text-highlight--grey">autofill</code> resource settings</a> to automatically point to dynamic sources and ensure that content remains in sync with its parent section. For example, an app block on the <strong>Products</strong> page can point to a dynamic source to show data for different products as they display on the page.</p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="app-embed-blocks">App embed blocks</h2><a class="article-anchor-link" href="#app-embed-blocks"><span class="visuallyhidden">Anchor link to section titled "App embed blocks"</span></a></div> <p>Apps that don't have a UI component, or that add floating or overlaid elements, extend themes using app embed blocks. Shopify renders and injects app embed blocks before HTML <code class="text-highlight text-highlight--grey"></head></code> and <code class="text-highlight text-highlight--grey"></body></code> closing tags. Create an app embed block by setting the <code class="text-highlight text-highlight--grey">target</code> in the schema to either <code class="text-highlight text-highlight--grey">compliance_head</code>, <code class="text-highlight text-highlight--grey">head</code>, or <code class="text-highlight text-highlight--grey">body</code>. App embed blocks with <code class="text-highlight text-highlight--grey">compliance_head</code> will be included first and should be used only when necessary, for example in cookie consent banners.</p> <p>By default, app embed blocks are deactivated after an app is installed. Merchants need to activate app embed blocks in the theme editor, from <strong>Theme Settings</strong> > <strong>App embeds</strong>. However, your app can provide merchants with a <a href="#deep-linking">deep link</a>, post installation, to activate an app embed block automatically.</p> <p>Use app embed blocks for the following types of apps:</p> <ul> <li><p>Apps that provide a floating or overlaid component to a page, such as chat bubble apps and product image badge apps.</p></li> <li><p>Apps that add SEO meta tags, analytics, or tracking pixels.</p></li> </ul> <p>App embed blocks are supported in vintage and in Online Store 2.0 themes, because they don't rely on sections or JSON templates. However, app embed blocks can't point to dynamic sources, because these blocks only have access to the Global Liquid scope for the page on which they're rendered.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="example-app-embed-block-code">Example app embed block code</h3><a class="article-anchor-link" href="#example-app-embed-block-code"><span class="visuallyhidden">Anchor link to section titled "Example app embed block code"</span></a></div><aside class="note tip"> <h4>Tip</h4> <p> For a more complex example, refer to our <a rel="external noreferrer noopener" target="_blank" href="https://github.com/Shopify/theme-extension-getting-started">getting started sample code</a>.</p> </aside> <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> </div> <script data-option="filename" data-value="Example app embed block"></script> <script type="text/plain" data-language="liquid"> <div style="position: fixed; bottom: 0; right: 0"> {{ "kitten.jpg" | asset_url | img_tag }} </div> {% schema %} { "name": "App Embed", "target": "body", "settings": [] } {% endschema %} </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="example-of-an-app-embed-block-in-a-theme">Example of an app embed block in a theme</h3><a class="article-anchor-link" href="#example-of-an-app-embed-block-in-a-theme"><span class="visuallyhidden">Anchor link to section titled "Example of an app embed block in a theme"</span></a></div> <div style="text-align: center"><img src="/assets/apps/app-embed-block.png" alt="An example of an app embed block injected into a theme's closing HTML body tag. The app provides a floating element on the page and is for a chat bubble app embed block" width="50%"></div> <div class="heading-wrapper heading-wrapper-3"><h3 id="benefits-of-app-embed-blocks">Benefits of app embed blocks</h3><a class="article-anchor-link" href="#benefits-of-app-embed-blocks"><span class="visuallyhidden">Anchor link to section titled "Benefits of app embed blocks"</span></a></div> <p>App embed blocks are supported in vintage and Online Store 2.0 themes. This means any merchant can use your app without you needing to maintain two installation paths: one for vintage themes and one for Online Store 2.0 themes.</p> <p>After installation, merchants can use the theme code editor to configure app embed block settings for a more customized experience.</p> <p>App embed blocks allow you to only load scripts on specific pages, which isn't possible with the <a href="/docs/api/admin-graphql/latest/objects/ScriptTag"><code class="text-highlight text-highlight--grey">ScriptTag</code></a> object. Loading scripts on specific pages minimizes your app's performance impact by limiting it to only the pages where it's needed.</p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="conditional-app-blocks">Conditional app blocks</h2><a class="article-anchor-link" href="#conditional-app-blocks"><span class="visuallyhidden">Anchor link to section titled "Conditional app blocks"</span></a></div> <p>You can control the visibility of an app block or app embed block based on a custom condition. For example, you might want to limit content based on plan tier, or geographic location.</p> <p>The condition can be included in the block's <a href="#schema">schema</a> with the <code class="text-highlight text-highlight--grey">available_if</code> attribute, and the state of the condition is stored in an <a href="/docs/apps/build/custom-data/metafields/use-app-data-metafields">app-data metafield</a>. The metafield can be accessed through the Liquid <a href="/docs/api/liquid/objects/app"><code class="text-highlight text-highlight--grey">app</code> object</a>.</p> <aside class="note"> <h4>Note</h4> <p> The app metafield must be a <code class="text-highlight text-highlight--grey">boolean</code> type metafield.</p> </aside> <p>For example, if you had an app metafield with the namespace of <code class="text-highlight text-highlight--grey">conditional</code> and key of <code class="text-highlight text-highlight--grey">block1</code>, then you might use the following schema:</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> </div> <script data-option="filename" data-value="Conditional app block example"></script> <script type="text/plain" data-language="liquid"> {% schema %} { "name": "Conditional App block", "target": "section", "stylesheet": "app.css", "javascript": "app.js", "available_if": "{{ app.metafields.conditional.block1 }}", "settings": [ { "label": "Colour", "id": "colour", "type": "color", "default": "#000000" } ] } {% endschema %} </script> </div> </p> </section><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>The schema for app blocks and app embed blocks is similar to the <a href="/docs/storefronts/themes/architecture/sections/section-schema">theme section schema</a>. It supports the following attributes, some of which are unique to app blocks and app embed blocks:</p> <table> <caption>Schema attributes</caption> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> <th>Required</th> </tr> <tr> <td><code>name</code></td> <td>The title in the theme editor for the app block or app embed block.<br/><br/>Keep app block and app embed block names under 25 characters so they fit in the theme editor sidebar.<br/><br/>Don't include the title of your app in the name of the block. The title of your app displays below the name of the app block or app embed block in app block pickers, the app embeds panel, and the app details panel.</td> <td>Yes</td> </tr> <tr> <td><code>target</code></td> <td><p>Where the block is located. The possible values are <code>section</code>, <code>head</code>, <code>compliance_head</code>, and <code>body</code>.</p> <p>The value for app blocks is <code>section</code>. The values for app embed blocks are <code>head</code>, <code>compliance_head</code, and <code>body</code>. </td> <td>Yes</td> </tr> <tr> <td><code>JavaScript</code></td> <td><p>A JavaScript file to load from the <code>assets</code> subdirectory.</p> <p>If the block is present on the page, then you can load this file automatically by adding a <code><script async></code> tag in the <code><head></code> section of the page.</p> <p>If a merchant adds multiple app blocks or app embed blocks that reference the same JavaScript file to a page, then the file is only included once when the page is loaded.</p> </td> <td>No</td> </tr> <tr> <td><code>stylesheet</code></td> <td><p>A CSS file to load from the <code>assets</code> subdirectory.</p> <p>If the block is present on the page, then you can load this file automatically by adding a <code><link rel="stylesheet"></code> tag in the <code><head></code> section of the page.</p> <p>If a merchant adds multiple app blocks or app embed blocks that reference the same stylesheet file to a page, then the file is only included once when the page is loaded.</p> </td> <td>No</td> </tr> <tr> <td><code>enabled_on</code></td> <td><p>Limit an app block to specific templates and section groups, or limit an app embed block to specific templates.</p> <p>Refer to <a href="/docs/storefronts/themes/architecture/sections/section-schema#enabled_on">theme section schema</a> for more details.</p> <p>App blocks and app embed blocks can't be rendered on <a href="#restrictions">checkout step pages</a>.</p> <p>You can use only one of <code>enabled_on</code> or <code>disabled_on</code>.</p> </td> <td>No</td> </tr> <tr> <td><code>disabled_on</code></td> <td><p>Prevent app block from being used in specific templates and section groups, or prevent an app embed block from being used in specific templates.</p> <p>Refer to <a href="/docs/storefronts/themes/architecture/sections/section-schema#disabled_on">theme section schema</a> for more details.</p> <p>App blocks and app embed blocks can't be rendered on <a href="#restrictions">checkout step pages</a>.</p> <p>You can use only one of <code>enabled_on</code> or <code>disabled_on</code>.</p> </td> <td>No</td> </tr> <tr> <td><code>class</code></td> <td><p>Additional CSS classes to be included in the wrapping tag element, similar to <a href="/docs/storefronts/themes/architecture/sections/section-schema#class">theme section classes</a>.</p> <p>Theme app extensions will always include the <code>shopify-block</code> class.</p> </td> <td>No</td> </tr> <tr> <td><code>tag</code></td> <td><p>If set, then a <a href="/docs/storefronts/themes/architecture/sections/section-schema#tag">tag</a> wraps the block's output. If not set, then the output is wrapped in a <code>div</code>.</p> </td> <td>No<a id="schema-settings"></td> </tr> <tr> <td><code>settings</code></td> <td><p><a href="/docs/storefronts/themes/architecture/settings">Settings</a> that you provide to the merchant for customizing the app block or app embed block. These settings appear in the theme editor when the block is selected. Setting values can be <a href="/docs/storefronts/themes/architecture/settings#access-settings">accessed</a> using the <a href="/docs/api/liquid/objects/block#block-settings">settings</a> Liquid object.</p> </td> <td>No</td> </tr> <tr> <td><code>default</code></td> <td><p>A default setting configuration for the block. Refer to the <a href="/docs/storefronts/themes/architecture/sections/section-schema#default">section schema</a> for an example.</p> </td> <td>No</td> </tr> <tr> <td><code>available_if</code></td> <td> <p>Determines whether the block will be rendered on the storefront and visible in the theme editor.</p> <p>The value must be a reference to an <a href="/docs/api/admin-graphql/latest/objects/AppInstallation#field-appinstallation-metafield">app-data metafield</a> value. If the value of the app-data metafield returns true, then the block is rendered and available in the theme editor.</p> <p>Refer to <a href="#conditional-app-blocks">Conditional app blocks</a> for an example.</p> </td> <td>No</td> </tr> </table> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="recommendations">Recommendations</h2><a class="article-anchor-link" href="#recommendations"><span class="visuallyhidden">Anchor link to section titled "Recommendations"</span></a></div> <p>Review the following recommendations for building theme app extensions:</p> <ul> <li><a href="#autofill">Autofill</a></li> <li><a href="#deep-linking">Deep linking</a></li> <li><a href="#performance">Performance</a></li> <li><a href="#theme-editor-compatibility">Theme editor compatibility</a></li> <li><a href="#detecting-app-blocks-and-app-embed-blocks">Detecting app blocks and app embed blocks</a></li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="autofill">Autofill</h3><a class="article-anchor-link" href="#autofill"><span class="visuallyhidden">Anchor link to section titled "Autofill"</span></a></div> <p><code class="text-highlight text-highlight--grey">autofill</code> is an app block setting that's automatically set to <a href="/docs/storefronts/themes/architecture/settings/dynamic-sources">dynamic sources</a> when merchants add an app block to a section.</p> <p>App blocks can include settings in the <code class="text-highlight text-highlight--grey">settings</code> schema object, like <a href="/docs/storefronts/themes/architecture/sections/section-schema#settings">sections</a> do. You can give <a href="/docs/storefronts/themes/architecture/settings/input-settings#specialized-input-settings">settings that reference resources</a> an additional <code class="text-highlight text-highlight--grey">autofill</code> attribute. <code class="text-highlight text-highlight--grey">autofill</code> indicates that Shopify will determine the setting value automatically when merchants add the app block to a section.</p> <p><code class="text-highlight text-highlight--grey">autofill</code> setting values will be set to one of the following sources:</p> <ul> <li><p>A dynamic source pointing to the parent section's resource setting of the same type.</p></li> <li><p>A dynamic source pointing to the template's global resource.</p></li> </ul> <div class="heading-wrapper heading-wrapper-4"><h4 id="autofill-example">Autofill example</h4><a class="article-anchor-link" href="#autofill-example"><span class="visuallyhidden">Anchor link to section titled "Autofill example"</span></a></div> <p>A featured product section will have a setting of type <code class="text-highlight text-highlight--grey">product</code>, which allows a merchant to choose which product to display as featured. An app block that has a <code class="text-highlight text-highlight--grey">product</code> setting with <code class="text-highlight text-highlight--grey">autofill</code> set will automatically use the featured product.</p> <p>In the following example, <code class="text-highlight text-highlight--grey">block.settings.product</code> will use the section's <code class="text-highlight text-highlight--grey">product</code> setting:</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> </div> <script data-option="filename" data-value="Autofill example"></script> <script type="text/plain" data-language="liquid"> {{ block.settings.product.handle }} {% schema %} { ... "settings": [ { "type": "product", "id": "product", "label": "Product", "autofill": true } ], ... } {% endschema %} </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="deep-linking">Deep linking</h3><a class="article-anchor-link" href="#deep-linking"><span class="visuallyhidden">Anchor link to section titled "Deep linking"</span></a></div> <p>Post-installation, your app can provide deep links to help merchants add app blocks or activate app embed blocks directly in a theme. If a merchant clicks a deep link, then they're taken to the theme editor to preview the app block or app embed block before saving.</p> <p>Deep linking simplifies your app's installation because merchants won't need to navigate to the theme editor, find the block, and then act on it. Instead, your app does the work for them. Merchants can preview the block before saving and have more control over what they include in their online store.</p> <div class="heading-wrapper heading-wrapper-4"><h4 id="app-block-deep-linking">App block deep linking</h4><a class="article-anchor-link" href="#app-block-deep-linking"><span class="visuallyhidden">Anchor link to section titled "App block deep linking"</span></a></div> <p>You can implement a deep link to add an app block to the following locations:</p> <ul> <li>Any JSON template. For example, the <code class="text-highlight text-highlight--grey">Default product</code> template.</li> <li>A header, footer, or aside section group. For example, the <code class="text-highlight text-highlight--grey">Header</code> section group.</li> <li>Any main section that supports app blocks. For example, the <code class="text-highlight text-highlight--grey">main-product</code> section.</li> <li>A specific section that supports app blocks by <strong>targeting its ID</strong>. For example, the <code class="text-highlight text-highlight--grey">Newsletter</code> section on the <code class="text-highlight text-highlight--grey">index.json</code> template.</li> </ul> <p>After you add the app block in the theme editor, a coach mark helps the merchant move forward with next steps:</p> <div style="text-align: center"><img src="/assets/apps/coachmark.png" alt="An example of an app block added to a section. The section is beside a product image and is for a product star ratings app block." width="100%"></div> <aside class="note"> <h4>Note</h4> <p> You can deep link only to sections that support app blocks. Additionally, you can add only one app block at a time with a deep link.</p> </aside><div class="heading-wrapper heading-wrapper-4"><h4 id="app-block-deep-link-query-parameters">App block deep link query parameters</h4><a class="article-anchor-link" href="#app-block-deep-link-query-parameters"><span class="visuallyhidden">Anchor link to section titled "App block deep link query parameters"</span></a></div> <table> <caption>App block deep link URL query parameters</caption> <tr> <th scope="col">Query parameter</th> <th scope="col">Description</th> </tr> <tr> <td><code>{template}</code></td> <td><p>The JSON template to which the app block should be added. If not set, then Shopify will default to the index.json template.</p> </td> </tr> <tr> <td><code>{uuid}</code></td> <td><p>The ID of the theme app extension.</p> <p>Retrieve the <code>SHOPIFY_{YOUR_EXTENSION_NAME}_ID</code> value from your project's <code>.env</code> file. This file is only available after you run the <code>deploy</code> command for the first time.</p> </td> </tr> <td><code>{handle}</code></td> <td><p>The filename of the block's Liquid file.</p> <p>For example, if the Liquid file is located at <code>theme-app-extension/blocks/app-block.liquid</code>, then the <code>{handle}</code> is <code>app-block</code>.</p> <p>To see this Liquid file in the context of an app block, refer to the theme app extension <a href="https://github.com/Shopify/theme-extension-getting-started">getting started sample code</code></a>.</p> </td> <tr> <td><code>{header|footer|aside}</code></td> <td><p>The section group to which the app block should be added. Only “header,” “footer,” and “aside” are supported.</p></td> </tr> <tr> <td><code>{sectionID}</code></td> <td><p>The ID of the section to which the app block should be added. The <code>sectionID</code> must be prefixed by the string <code>sectionId</code>:</p> <p>Go to JSON templates: <a href="/docs/storefronts/themes/architecture/templates/json-templates#section-data">Section data</a> for an example of where a section ID can be found in a JSON template file.</p> </td> </tr> </table> <div class="heading-wrapper heading-wrapper-4"><h4 id="example-urls">Example URLs</h4><a class="article-anchor-link" href="#example-urls"><span class="visuallyhidden">Anchor link to section titled "Example URLs"</span></a></div> <p>Your app needs to redirect merchants to a URL with populated parameters.</p> <p><strong>Adding and app block to any JSON template</strong></p> <p>The following is the deep link structure for adding an app block to any JSON template in a new Apps 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> </div> <script data-option="filename" data-value="App block URL"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template=${template}&addAppBlockId={uuid}/{handle}&target=newAppsSection </script> </div> </p> <p>For example, the deep link to add the <code class="text-highlight text-highlight--grey">customer_review.liquid</code> block to the <code class="text-highlight text-highlight--grey">Default product</code> template might look like the following:</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> </div> <script data-option="filename" data-value="Adding customer_review block to the Default product template"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template=product& addAppBlockId=8f1f0756-d5fc-4c36-b7f4-b2aa8828ced8/customer_review&target=newAppsSection </script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p> Your app can target any JSON template in a theme that's published in the Shopify Theme Store. This is because all JSON templates are required to support app blocks in the <a href="/docs/storefronts/themes/architecture/blocks/app-blocks#app-block-wrapper">Apps section</a>.</p> </aside> <p><strong>Adding an app block to a section group</strong></p> <p>The following example shows a deep link structure for adding an app block to the header, footer, or aside 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> </div> <script data-option="filename" data-value="App block URL"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template={template}&addAppBlockId={uuid}/{handle}&target=sectionGroup:{header|footer|aside} </script> </div> </p> <p>For example, the deep link to add the <code class="text-highlight text-highlight--grey">announcement_bar.liquid</code> block to the <code class="text-highlight text-highlight--grey">Header</code> section group might look like the following:</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> </div> <script data-option="filename" data-value="Adding announcement_bar block to the Header section group"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template=product& addAppBlockId=8f1f0756-d5fc-4c36-b7f4-b2aa8828ced8/announcement_bar& target=sectionGroup:header </script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p>You can verify the availability of a <a href="/docs/storefronts/themes/architecture/section-groups">section group</a>, such as header, footer, or aside, in a theme using the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code class="text-highlight text-highlight--grey">read_themes</code> access scope</a>. This allows you to check if a specific section group is used in a theme before providing a merchant with a deep link to it.</p> </aside> <p><strong>Adding an app block to the main section</strong></p> <p>The main section is a section with <code class="text-highlight text-highlight--grey">ID="main"</code>.</p> <p>The following example shows a deep link structure for adding an app block to the main section of a template:</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> </div> <script data-option="filename" data-value="App block URL"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template={template}& addAppBlockId={uuid}/{handle}&target=mainSection </script> </div> </p> <p>For example, the deep link to add the <code class="text-highlight text-highlight--grey">star_rating.liquid</code> block to the main section of the <code class="text-highlight text-highlight--grey">product.json</code> template might look like the following:</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> </div> <script data-option="filename" data-value="Adding star_rating block to the main section of the product template"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template=product& addAppBlockId=8f1f0756-d5fc-4c36-b7f4-b2aa8828ced8/star_rating&target=mainSection </script> </div> </p> <p>The following example of a theme's <code class="text-highlight text-highlight--grey">product.json</code> template includes a section with an <code class="text-highlight text-highlight--grey">id</code> of <code class="text-highlight text-highlight--grey">main</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> </div> <script data-option="filename" data-value="templates/product.json"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="text"> { "sections": { "main": { "type": "product", "settings": { "show_vendor": true } }, }, "order": [ "main", ] } </script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p> Only the main section of the default product template is required to support app blocks. However, we recommend that all sections that have blocks should support app blocks. You can verify compatibility with the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code class="text-highlight text-highlight--grey">read_themes</code> access scope</a>.</p> </aside> <p><strong>Adding an app block to a section using its ID</strong></p> <p>The following example shows a deep link structure for adding an app block to a section by targeting its ID:</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> </div> <script data-option="filename" data-value="App block URL"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template={template}&addAppBlockId={uuid}/{handle}&target=sectionId:{sectionId} </script> </div> </p> <p>For example, the deep link to add the <code class="text-highlight text-highlight--grey">form.liquid</code> block to the <code class="text-highlight text-highlight--grey">Newsletter</code> section of the <code class="text-highlight text-highlight--grey">index.json</code> template might look like the following:</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> </div> <script data-option="filename" data-value="Adding form block to the Newsletter section of the index.json template"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="text"> https://<myshopifyDomain>/admin/themes/current/editor?template=index& addAppBlockId=8f1f0756-d5fc-4c36-b7f4-b2aa8828ced8/form& target=sectionId:5ac3e115-be8f-4426-a09c-4397a1672899 </script> </div> </p> <p>You can find the parameters for the section you want to target in the template’s JSON file. For example, the parameters of the <code class="text-highlight text-highlight--grey">Newsletter</code> of the index.json template are shown below:</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> </div> <script data-option="filename" data-value="templates/index.json"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="text"> { "sections": { "5ac3e115-be8f-4426-a09c-4397a1672899": { "type": "newsletter" } }, "order": [ "5ac3e115-be8f-4426-a09c-4397a1672899" ] } </script> </div> </p> <aside class="note tip"> <h4>Tip</h4> <p> You can verify the availability of a section ID in a theme using <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code class="text-highlight text-highlight--grey">read_themes</code> access scope</a>. This allows you to check if a specific section (for example, <code class="text-highlight text-highlight--grey">Newsletter</code> or <code class="text-highlight text-highlight--grey">Featured product</code>) is used within a theme before providing a merchant with a deep link to it.</p> </aside><div class="heading-wrapper heading-wrapper-4"><h4 id="app-block-errors-and-edge-cases">App block errors and edge cases</h4><a class="article-anchor-link" href="#app-block-errors-and-edge-cases"><span class="visuallyhidden">Anchor link to section titled "App block errors and edge cases"</span></a></div> <p>In the following scenarios, an error message is shown to merchants to guide them with next steps. When possible, you should take steps to prevent these errors.</p> <table> <caption>App block errors and edge cases</caption> <tr> <th scope="col">Error scenario</th> <th scope="col">How to prevent</th> </tr> <tr> <td><p>Section limit has been reached in template or section group</p></td> <td><p>This error can’t be prevented. The merchant will be invited to remove a section and try again.</p> </td> </tr> <tr> <td><p>Template is not found</p></td> <td><p>You can prevent this error by having your app verify the availability of a template, section group, or section with the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code>read_themes</code> access scope</a>.</p> </td> </tr> <tr> <td><p>Section is not found</p></td> <td> <p>If the error occurs, the app block will fall back to be added to the template instead.</p> <p>You can prevent this error by having your app verify the availability of a template, section group, or section with the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code>read_themes</code> access scope</a>.</p> </td> </tr> <tr> <td><p>Section group is not found</p></td> <td><p>You can prevent this error by having your app verify the availability of a template, section group, or section with the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code>read_themes</code> access scope</a>.</p> </td> </tr> <tr> <td><p>Template type is not supported in app block schema</p></td> <td><p>You can prevent this error by making sure that your app only deep links to templates that are supported in your app block’s schema.</p> </td> </tr> </tr> <tr> <td><p>Typo in deep link URL </p></td> <td><p>You can prevent this error by testing deep links to confirm they work and don’t contain typos.</p> </td> </tr> </tr> <tr> <td><p>Template doesn’t have a resource to be rendered</p></td> <td><p>This error can’t be prevented. The merchant will be invited to create a resource, such as a product, collection, or blog post, and then try again.</p> </td> </tr> </tr> <tr> <td><p>Template is liquid</p></td> <td><p>You can prevent this error by having your app verify compatibility of a template with the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code>read_themes</code> access scope</a>.</p> </td> </tr> </tr> <tr> <td><p>Section doesn’t support blocks or app blocks</p></td> <td> <p>If the error occurs, the app block will fall back to be added to the template instead.</p> <p>You can prevent this error by having your app verify compatibility of a section with the <a href="/docs/api/usage/access-scopes#authenticated-access-scopes"><code>read_themes</code> access scope</a>.</p> </td> </tr> </tr> <tr> <td><p>Block limit has been reached in a section</p></td> <td><p>This error can’t be prevented. The merchant will be invited to remove a block and try again.</p> </td> </tr> </table> <div class="heading-wrapper heading-wrapper-4"><h4 id="app-embed-block-deep-linking">App embed block deep linking</h4><a class="article-anchor-link" href="#app-embed-block-deep-linking"><span class="visuallyhidden">Anchor link to section titled "App embed block deep linking"</span></a></div> <p>You can implement a deep link to activate an app embed block directly in a theme.</p> <div class="heading-wrapper heading-wrapper-4"><h4 id="app-embed-block-deep-link-url-query-parameters">App embed block deep link URL query parameters</h4><a class="article-anchor-link" href="#app-embed-block-deep-link-url-query-parameters"><span class="visuallyhidden">Anchor link to section titled "App embed block deep link URL query parameters"</span></a></div> <table> <caption>Deep link URL query parameters</caption> <tr> <th scope="col">Query parameter</th> <th scope="col">Description</th> </tr> <tr> <td><code>context</code></td> <td><p>The context in which the app is being activated. The value is <code>apps</code>.</p>  </td> </tr> <tr> <td><code>{template}</code></td> <td><p>The templates on which a block is rendered. If not set, then Shopify will default to the <a href="/docs/storefronts/themes/architecture/templates/index-template">index template</a>.</p> <p>The possible values are <code>product</code>, <code>collection</code>, <code>article</code>, and <code>blog</code>.</a></p> </td> </tr> <tr> <td><code>{uuid}</code></td> <td><p>The ID of the theme app extension.</p> <p>Retrieve the <code>SHOPIFY_<EXTENSION_NAME>_ID</code> value from your project's <code>.env</code> file. This file is only available after you run the <code>deploy</code> command for the first time.</p> </td> <tr> <td><code>{handle}</code></td> <td><p>The filename of the block's Liquid file.</p> <p>For example, if the Liquid file is located at <code>theme-app-extension/blocks/app-embed.liquid</code>, then the <code>{handle}</code> is <code>app-embed</code>.</p> <p>To see this Liquid file in the context of an app embed block, refer to the theme app extension <a href="https://github.com/Shopify/theme-extension-getting-started">getting started sample code</code></a>.</p> </td> </table> <div class="heading-wrapper heading-wrapper-4"><h4 id="app-embed-block-deep-linking-url">App embed block deep linking URL</h4><a class="article-anchor-link" href="#app-embed-block-deep-linking-url"><span class="visuallyhidden">Anchor link to section titled "App embed block deep linking URL"</span></a></div> <p>Your app needs to redirect merchants to the following URL, with URL query parameters populated:</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> </div> <script data-option="filename" data-value="App embed block URL"></script> <script type="text/plain" data-language="url"> https://<myshopifyDomain>/admin/themes/current/editor?context=apps&template=${template}&activateAppId={uuid}/{handle} </script> </div> </p> <p>You can retrieve the <code class="text-highlight text-highlight--grey"><myshopifyDomain></code> value from the <a href="/docs/api/admin-graphql/latest/objects/shop"><code class="text-highlight text-highlight--grey">Shop</code> GraphQL Admin API object</a>.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="performance">Performance</h3><a class="article-anchor-link" href="#performance"><span class="visuallyhidden">Anchor link to section titled "Performance"</span></a></div> <p>All files inside the <code class="text-highlight text-highlight--grey">assets/</code> folder are automatically served from <a href="/docs/storefronts/themes/best-practices/performance#host-assets-on-shopify-servers">Shopify's CDN</a> for fast, reliable asset delivery. Reference your assets by using either the <code class="text-highlight text-highlight--grey">javascript</code> and <code class="text-highlight text-highlight--grey">stylesheet</code> <a href="#schema">schema</a> attributes or using the <a href="/docs/api/liquid/filters/asset_url"><code class="text-highlight text-highlight--grey">asset_url</code></a> and <a href="/docs/api/liquid/filters/asset_img_url"><code class="text-highlight text-highlight--grey">asset_img_url</code></a> Liquid URL filters.</p> <p>For app embed blocks, take advantage of their ability to only load scripts on specific pages.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="theme-editor-compatibility">Theme editor compatibility</h3><a class="article-anchor-link" href="#theme-editor-compatibility"><span class="visuallyhidden">Anchor link to section titled "Theme editor compatibility"</span></a></div> <p>You need to ensure that the app works in the <a href="/docs/storefronts/themes/tools/online-editor">theme editor</a> environment. If necessary, you can set your app to <a href="/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-editor#detect-the-theme-editor">detect the theme editor</a>, so that you can adjust your app to work in that environment.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="detecting-app-blocks-and-app-embed-blocks">Detecting app blocks and app embed blocks</h3><a class="article-anchor-link" href="#detecting-app-blocks-and-app-embed-blocks"><span class="visuallyhidden">Anchor link to section titled "Detecting app blocks and app embed blocks"</span></a></div> <p>If you want to identify whether a merchant has added app blocks to their theme, or enabled app embed blocks, you can use the <a href="/docs/apps/build/online-store/asset-legacy"><code class="text-highlight text-highlight--grey">Asset</code> REST Admin API resource</a> to look for blocks that match your app type.</p> <div class="heading-wrapper heading-wrapper-4"><h4 id="detecting-app-blocks">Detecting app blocks</h4><a class="article-anchor-link" href="#detecting-app-blocks"><span class="visuallyhidden">Anchor link to section titled "Detecting app blocks"</span></a></div> <p>When a merchant adds an app block to a theme, a reference to the app block is added to the template JSON file.</p> <p>You can identify your app block by the block type, which uses the following syntax:</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> </div> <script type="text/plain" data-language="json"> "<block_unique_ID>": { "type:": "<partner_name>:\/\/apps\/<app_name>\/blocks\/<block_name>\/<unique_ID>" </script> </div> </p> <p>An app block is given a unique ID, and the <code class="text-highlight text-highlight--grey">type</code> value is appended with a unique ID which identifies the app.</p> <p>The following example contains two app blocks from the same app: one in the <code class="text-highlight text-highlight--grey">main-product</code> section, and one in an <code class="text-highlight text-highlight--grey">apps</code> 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 class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-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="templates/product.json"></script> <script type="text/plain" data-language="json"> { "sections": { "main": { "type": "main-product", "blocks": { "title": { "type": "title", "settings": { } }, "dc0a5152-193b-4663-9203-6153357d0c8e": { "type": "shopify:\/\/apps\/product-reviews\/blocks\/star_rating\/bae150af-8da8-48b2-9867-398188115e5f", "settings": { "stars_fill_color": "#44ff00", "star_size": 15, "text_align": "flex-start", "product": "", "stars_text_empty": "No reviews" } }, ... }, "block_order": [ "title", "dc0a5152-193b-4663-9203-6153357d0c8e" ... ], "settings": { ... } }, "164193020622fc8e2f": { "type": "apps", "blocks": { "cadef24e-ecf6-49f8-a544-6bb5186af219": { "type": "shopify:\/\/apps\/product-reviews\/blocks\/reviews\/bae150af-8da8-48b2-9867-398188115e5f", "settings": { } } }, "block_order": [ "cadef24e-ecf6-49f8-a544-6bb5186af219" ], "settings": { ... } } }, ... } </script> </div> </p> <div class="heading-wrapper heading-wrapper-4"><h4 id="detecting-app-embed-blocks">Detecting app embed blocks</h4><a class="article-anchor-link" href="#detecting-app-embed-blocks"><span class="visuallyhidden">Anchor link to section titled "Detecting app embed blocks"</span></a></div> <p>App embed blocks appear in <code class="text-highlight text-highlight--grey">settings_data.json</code>.</p> <p>An app embed block is added to <code class="text-highlight text-highlight--grey">settings_data.json</code> only after it's enabled for the first time. If the app embed block is disabled after it's been enabled, then it remains in <code class="text-highlight text-highlight--grey">settings_data.json</code>, and <code class="text-highlight text-highlight--grey">disabled</code> is set to <code class="text-highlight text-highlight--grey">true</code>.</p> <p>You can identify your app block by the block type, which uses the following syntax:</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> </div> <script type="text/plain" data-language="json"> "<block_unique_ID>": { "type:": "<partner_name>:\/\/apps\/<app_name>\/blocks\/<block_name>\/<unique_ID>" </script> </div> </p> <p>An app block is given a unique ID, and the <code class="text-highlight text-highlight--grey">type</code> value is appended with a unique ID which identifies the app.</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> </div> <script data-option="filename" data-value="config/settings_data.json"></script> <script type="text/plain" data-language="json"> { "current": { "sections": { ... }, "content_for_index": [ ], "blocks": { "17878678986028907411": { "type": "shopify:\/\/apps\/faceforms-better-pop-ups\/blocks\/app-embed\/f2173231-e611-461d-884b-bd8e6cc2ded4", "disabled": false, "settings": { ... } } } } } </script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="reserved-prefixes-for-metafields-and-metaobjects">Reserved prefixes for metafields and metaobjects</h3><a class="article-anchor-link" href="#reserved-prefixes-for-metafields-and-metaobjects"><span class="visuallyhidden">Anchor link to section titled "Reserved prefixes for metafields and metaobjects"</span></a></div> <p>You can reference reserved namespaces and reserved types for metafields and metaobjects using <a href="/docs/apps/build/custom-data/reserved-prefixes">reserved prefixes</a> in your theme app extension Liquid snippets. This approach eliminates the need to hardcode app IDs and simplifies developing your app for different environments, such as testing and production.</p> <div class="heading-wrapper heading-wrapper-4"><h4 id="metafield-namespaces">Metafield namespaces</h4><a class="article-anchor-link" href="#metafield-namespaces"><span class="visuallyhidden">Anchor link to section titled "Metafield namespaces"</span></a></div> <p>The following example assumes a metafield value for the key <code class="text-highlight text-highlight--grey">my_key</code> has been set under a metafield within a reserved namespace <code class="text-highlight text-highlight--grey">$app:custom</code>. The value can be referenced using the following syntax:</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> </div> <script data-option="filename" data-value="/blocks/metafield.liquid"></script> <script type="text/plain" data-language="liquid"> block.settings.product.metafields["$app:custom"].my_key.value </script> </div> </p> <div class="heading-wrapper heading-wrapper-4"><h4 id="metaobject-types">Metaobject types</h4><a class="article-anchor-link" href="#metaobject-types"><span class="visuallyhidden">Anchor link to section titled "Metaobject types"</span></a></div> <p>The following example assumes a metaobject definition has been created with a reserved type <code class="text-highlight text-highlight--grey">$app:custom</code>, and a metaobject has been created with a handle of <code class="text-highlight text-highlight--grey">my_handle</code> and a field for the key <code class="text-highlight text-highlight--grey">my_key</code>. The value can be referenced using the following syntax:</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> </div> <script data-option="filename" data-value="/blocks/metaobject.liquid"></script> <script type="text/plain" data-language="liquid"> shop.metaobjects["$app:custom"]["my_handle"].my_key.value </script> </div> </p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="file-and-content-size-limits">File and content size limits</h2><a class="article-anchor-link" href="#file-and-content-size-limits"><span class="visuallyhidden">Anchor link to section titled "File and content size limits"</span></a></div> <p>Shopify validates theme app extensions when you <a href="/docs/apps/build/online-store/theme-app-extensions/build#step-5-deploy-and-release-the-extension">deploy your extension</a>. If the app's content exceeds any file and content size limits, then the theme app extension fails validation and doesn't update.</p> <p>The following table provides the enforced, and suggested, limits on theme app extensions:</p> <table> <caption>Limits</caption> <tr> <th scope="col">App content</th> <th scope="col">Limit</th> <th scope="col">Enforced or suggested</th> </tr> <tr> <td>All files in a theme app extension</td> <td>10 MB</td> <td>Enforced</td> </tr> <tr> <td>Number of blocks</td> <td>25</td> <td>Enforced</td> </tr> <tr> <td>Number of locale files in the extension</td> <td>100</td> <td>Enforced</td> </tr> <tr> <td>Size of each locale file</td> <td>15 KB</td> <td>Enforced</td> </tr> <tr> <td>Size of Liquid across all files</td> <td>100 KB</td> <td>Enforced</td> </tr> <tr> <td>Size of CSS (compressed) referenced directly by the schema</td> <td>100 KB</td> <td>Suggested</td> </tr> <tr> <td>Size of JS (compressed) referenced directly by the schema</td> <td>10 KB</td> <td>Suggested</td> </tr> </table> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="restrictions">Restrictions</h2><a class="article-anchor-link" href="#restrictions"><span class="visuallyhidden">Anchor link to section titled "Restrictions"</span></a></div> <p>The following pages and objects can't be used with theme app extensions.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="pages">Pages</h3><a class="article-anchor-link" href="#pages"><span class="visuallyhidden">Anchor link to section titled "Pages"</span></a></div> <p>Theme app extension app blocks and app embed blocks can't be rendered on <a href="/docs/storefronts/themes/architecture/layouts/checkout-liquid#checkout-steps">checkout pages</a>. This includes all pages that are rendered when a customer initiates a checkout, such as <strong>Contact information</strong>, <strong>Shipping method</strong>, <strong>Payment method</strong>, and <strong>Order status</strong>.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="liquid-objects">Liquid objects</h3><a class="article-anchor-link" href="#liquid-objects"><span class="visuallyhidden">Anchor link to section titled "Liquid objects"</span></a></div> <p>Theme app extensions don't have access to the following Liquid objects or properties:</p> <ul> <li>The <a href="/docs/api/liquid/objects/content_for_header"><code class="text-highlight text-highlight--grey">content_for_header</code></a> object</li> <li>The <a href="/docs/api/liquid/objects/content_for_index"><code class="text-highlight text-highlight--grey">content_for_index</code></a> object</li> <li>The <a href="/docs/api/liquid/objects/content_for_layout"><code class="text-highlight text-highlight--grey">content_for_layout</code></a> object</li> <li>Any properties of the parent <a href="/docs/api/liquid/objects/content_for_layout"><code class="text-highlight text-highlight--grey">section</code></a> object, other than <code class="text-highlight text-highlight--grey">id</code>. You can use the <code class="text-highlight text-highlight--grey">id</code> property to interact with the <a href="/docs/api/ajax/section-rendering">section rendering API</a>.</li> </ul> <div class="heading-wrapper heading-wrapper-4"><h4 id="section-liquid-object">Section Liquid Object</h4><a class="article-anchor-link" href="#section-liquid-object"><span class="visuallyhidden">Anchor link to section titled "Section Liquid Object"</span></a></div> <p>App blocks have access to their parent <a href="/docs/api/liquid/objects/section">section</a> liquid object. Only the ID property is accessible, which can be used with the <a href="/docs/api/ajax/section-rendering">section rendering API</a>.</p> <div class="heading-wrapper heading-wrapper-3"><h3 id="json-with-comments">JSON with comments</h3><a class="article-anchor-link" href="#json-with-comments"><span class="visuallyhidden">Anchor link to section titled "JSON with comments"</span></a></div> <p>Theme app extensions do not support comments and trailing commas in JSON like <a href="/docs/storefronts/themes/architecture#json-with-comments">theme files</a>.</p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="next-steps">Next steps</h2><a class="article-anchor-link" href="#next-steps"><span class="visuallyhidden">Anchor link to section titled "Next steps"</span></a></div> <ul> <li><a href="/docs/apps/build/online-store/theme-app-extensions/build">Get started</a> building a theme app extension.</li> </ul> </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="#file-structure">File structure</a></li><li><a href="#app-blocks-for-themes">App blocks for themes</a></li><li><a href="#app-embed-blocks">App embed blocks</a></li><li><a href="#conditional-app-blocks">Conditional app blocks</a></li><li><a href="#schema">Schema</a></li><li><a href="#recommendations">Recommendations</a></li><li><a href="#file-and-content-size-limits">File and content size limits</a></li><li><a href="#restrictions">Restrictions</a></li><li><a href="#next-steps">Next steps</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":"apps","markdown_path":"content/apps/build/online-store/theme-app-extensions/configuration.md","sidebarData":{"heading":"Build","groups":[{"label":"Getting started","isGroup":true,"children":[{"label":"Shopify app platform","href":"/docs/apps/build"},{"label":"App surfaces","href":"/docs/apps/build/app-surfaces"},{"label":"Scaffold an app","href":"/docs/apps/build/scaffold-app"},{"label":"Build an app","href":"/docs/apps/build/build"},{"label":"Shopify CLI for apps","children":[{"label":"About Shopify CLI for apps","href":"/docs/apps/build/cli-for-apps"},{"label":"About app structure","href":"/docs/apps/build/cli-for-apps/app-structure"},{"label":"About app configuration","href":"/docs/apps/build/cli-for-apps/app-configuration"},{"label":"Manage app config files","href":"/docs/apps/build/cli-for-apps/manage-app-config-files"},{"label":"Use ngrok for tunneling during app development","href":"/docs/apps/build/cli-for-apps/use-ngrok-tunneling"},{"label":"Migrate a Dashboard-managed app to Shopify CLI","href":"/docs/apps/build/cli-for-apps/migrate-from-dashboard"},{"label":"Migrate to the latest Shopify CLI","href":"/docs/apps/build/cli-for-apps/migrate-to-latest-cli"}]}]},{"label":"Extending Shopify","isGroup":true,"children":[{"label":"Admin","children":[{"label":"Apps in admin","href":"/docs/apps/build/admin"},{"label":"Admin UI extensions","children":[{"label":"About admin extensions","href":"/docs/apps/build/admin/actions-blocks"},{"label":"Build an admin action","href":"/docs/apps/build/admin/actions-blocks/build-admin-action"},{"label":"Build an admin block","href":"/docs/apps/build/admin/actions-blocks/build-admin-block"},{"label":"Connect admin extensions","href":"/docs/apps/build/admin/actions-blocks/connect-admin-extensions"},{"label":"Connect to your app's backend","href":"/docs/apps/build/admin/actions-blocks/connect-app-backend"},{"label":"Build an admin print action","href":"/docs/apps/build/admin/actions-blocks/build-admin-print-action"}]},{"label":"Admin links (legacy)","children":[{"label":"About admin links (legacy)","href":"/docs/apps/build/admin/admin-links"},{"label":"Add admin links (legacy)","href":"/docs/apps/build/admin/admin-links/add-admin-links"}]}]},{"label":"Checkout","children":[{"label":"Apps in checkout","href":"/docs/apps/build/checkout"},{"label":"Technologies for customizing checkout","href":"/docs/apps/build/checkout/technologies"},{"label":"Start building for checkout","href":"/docs/apps/build/checkout/start-building"},{"label":"Display custom data","href":"/docs/apps/build/checkout/display-custom-data"},{"label":"Validation","children":[{"label":"About cart and checkout validation","href":"/docs/apps/build/checkout/cart-checkout-validation"},{"label":"Create client-side validation","href":"/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation"},{"label":"Create server-side validation","href":"/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation"},{"label":"Create admin UI validation","href":"/docs/apps/build/checkout/cart-checkout-validation/create-admin-ui-validation"}]},{"label":"Create cart permalinks","href":"/docs/apps/build/checkout/create-cart-permalinks"},{"label":"Styling","children":[{"label":"About checkout styling","href":"/docs/apps/build/checkout/styling"},{"label":"Customize typography","href":"/docs/apps/build/checkout/styling/customize-typography"},{"label":"Add the favicon","href":"/docs/apps/build/checkout/styling/add-favicon"},{"label":"Customize form controls","href":"/docs/apps/build/checkout/styling/customize-form-controls"},{"label":"Update color settings","href":"/docs/apps/build/checkout/styling/update-color-settings"},{"label":"Customize sections","href":"/docs/apps/build/checkout/styling/customize-sections"}]},{"label":"Customize the header","href":"/docs/apps/build/checkout/customize-header"},{"label":"Customize the footer","href":"/docs/apps/build/checkout/customize-footer"},{"label":"Banners and fields","children":[{"label":"About custom banners and fields","href":"/docs/apps/build/checkout/fields-banners"},{"label":"Add a banner","href":"/docs/apps/build/checkout/fields-banners/add-banner"},{"label":"Add a field","href":"/docs/apps/build/checkout/fields-banners/add-field"},{"label":"UX for fields","href":"/docs/apps/build/checkout/fields-banners/ux-for-fields"}]},{"label":"Delivery and shipping","children":[{"label":"About delivery and shipping","href":"/docs/apps/build/checkout/delivery-shipping"},{"label":"Convert additional address fields","href":"/docs/apps/build/checkout/delivery-shipping/additional-address-fields"},{"label":"Rename delivery options","children":[{"label":"Build the delivery options function","href":"/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function"},{"label":"Add the configuration","href":"/docs/apps/build/checkout/delivery-shipping/delivery-options/add-configuration"},{"label":"Build the UI","href":"/docs/apps/build/checkout/delivery-shipping/delivery-options/build-ui"},{"label":"UX for delivery options","href":"/docs/apps/build/checkout/delivery-shipping/delivery-options/ux-for-delivery-options"}]},{"label":"Customize delivery methods","children":[{"label":"Build a date picker","href":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/date-picker"},{"label":"Create local pickup charges","href":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/create-local-pickup-charges"},{"label":"Generate pickup points","href":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points"},{"label":"UX for pickup points","href":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-pickup-points"},{"label":"UX for delivery methods","href":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-delivery-methods"}]},{"label":"Customize address autocomplete","children":[{"label":"Build a custom address autocomplete extension","href":"/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete"},{"label":"Format suggested addresses","href":"/docs/apps/build/checkout/delivery-shipping/address-autocomplete/format-suggestion"}]}]},{"label":"Product offers","children":[{"label":"About product offers","href":"/docs/apps/build/checkout/product-offers"},{"label":"Build a pre-purchase offer","href":"/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer"},{"label":"UX for pre-purchase offers","href":"/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers"},{"label":"Build a post-purchase offer","href":"/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer"},{"label":"Create a post-purchase subscription","href":"/docs/apps/build/checkout/product-offers/create-a-post-purchase-subscription"},{"label":"UX for post-purchase offers","href":"/docs/apps/build/checkout/product-offers/ux-for-post-purchase-product-offers"},{"label":"UX for post-purchase subscriptions","href":"/docs/apps/build/checkout/product-offers/ux-for-post-purchase-subscriptions"}]},{"label":"Payments","children":[{"label":"About payments customizations","href":"/docs/apps/build/checkout/payments"},{"label":"Create the payments function","href":"/docs/apps/build/checkout/payments/create-payments-function"},{"label":"Add the configuration","href":"/docs/apps/build/checkout/payments/add-configuration"},{"label":"Build the UI","href":"/docs/apps/build/checkout/payments/build-ui"},{"label":"UX for payments","href":"/docs/apps/build/checkout/payments/ux-for-payments"}]},{"label":"Thank you and Order status","children":[{"label":"About Thank you and Order status page customizations","href":"/docs/apps/build/checkout/thank-you-order-status"},{"label":"Add a survey","href":"/docs/apps/build/checkout/thank-you-order-status/add-survey"},{"label":"UX for Thank you and Order status pages","href":"/docs/apps/build/checkout/thank-you-order-status/ux-for-thank-you-order-status"}]},{"label":"Localized UI extensions","children":[{"label":"About checkout UI extension localization","href":"/docs/apps/build/checkout/localized-checkout-ui-extensions"},{"label":"Localize a checkout UI extension","href":"/docs/apps/build/checkout/localized-checkout-ui-extensions/localize"}]},{"label":"Test UI extensions","href":"/docs/apps/build/checkout/test-checkout-ui-extensions"},{"label":"Create multi-page extensions","href":"/docs/apps/build/checkout/create-multi-page-extensions"},{"label":"UX for checkout","href":"/docs/apps/build/checkout/ux-for-checkout"}]},{"label":"Customer accounts","children":[{"label":"Apps in customer accounts","href":"/docs/apps/build/customer-accounts"},{"label":"Start building for customer accounts","href":"/docs/apps/build/customer-accounts/start-building"},{"label":"Decide on extension placement","href":"/docs/apps/build/customer-accounts/extension-placement"},{"label":"UX for customer accounts","href":"/docs/apps/build/customer-accounts/ux"},{"label":"About the Order status page","href":"/docs/apps/build/customer-accounts/order-status-page"},{"label":"Inline extensions","children":[{"label":"About inline extensions","href":"/docs/apps/build/customer-accounts/inline-extensions"},{"label":"Build Order status","href":"/docs/apps/build/customer-accounts/inline-extensions/build-order-status"},{"label":"Build profile","href":"/docs/apps/build/customer-accounts/inline-extensions/build-profile"}]},{"label":"Pre-auth Order status page extensions","children":[{"label":"About pre-auth Order status page extensions","href":"/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions"},{"label":"Build pre-auth Order status page extensions","href":"/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions/build-pre-auth-order-status-page-extensions"}]},{"label":"Order action extensions","children":[{"label":"About order action menus","href":"/docs/apps/build/customer-accounts/order-action-extensions"},{"label":"Build for order action menus","href":"/docs/apps/build/customer-accounts/order-action-extensions/build-for-order-action-menus"},{"label":"UX for order actions","href":"/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions"}]},{"label":"Full-page extensions","children":[{"label":"Add pages to customer accounts","href":"/docs/apps/build/customer-accounts/full-page-extensions"},{"label":"Build new pages","href":"/docs/apps/build/customer-accounts/full-page-extensions/build-new-pages"},{"label":"UX for full pages","href":"/docs/apps/build/customer-accounts/full-page-extensions/ux-for-full-pages"}]},{"label":"Build metafield writes into extensions","href":"/docs/apps/build/customer-accounts/metafields"},{"label":"Editor extension collections","children":[{"label":"About editor extension collections","href":"/docs/apps/build/customer-accounts/editor-extension-collections"},{"label":"Build an editor extension collection","href":"/docs/apps/build/customer-accounts/editor-extension-collections/build-editor-extension-collection"},{"label":"UX for editor extension collections","href":"/docs/apps/build/customer-accounts/editor-extension-collections/editor-extension-collections-ux-guidelines"}]},{"label":"Localization","children":[{"label":"About localizing customer account extensions","href":"/docs/apps/build/customer-accounts/localization"},{"label":"Localize a customer account extension","href":"/docs/apps/build/customer-accounts/localization/localize"}]},{"label":"Test customer account extensions","href":"/docs/apps/build/customer-accounts/test"}]},{"label":"Flow","children":[{"label":"About Flow","href":"/docs/apps/build/flow"},{"label":"About Flow development","href":"/docs/apps/build/flow/development"},{"label":"Triggers","children":[{"label":"About triggers","href":"/docs/apps/build/flow/triggers"},{"label":"Create a trigger","href":"/docs/apps/build/flow/triggers/create"},{"label":"Trigger reference","href":"/docs/apps/build/flow/triggers/reference"}]},{"label":"Actions","children":[{"label":"About actions","href":"/docs/apps/build/flow/actions"},{"label":"Create an action","href":"/docs/apps/build/flow/actions/create"},{"label":"Action reference","href":"/docs/apps/build/flow/actions/reference"},{"label":"Create action endpoints","href":"/docs/apps/build/flow/actions/endpoints"},{"label":"Build the configuration UI","href":"/docs/apps/build/flow/actions/build-config-ui"}]},{"label":"Templates","children":[{"label":"About templates","href":"/docs/apps/build/flow/templates"},{"label":"Create a template","href":"/docs/apps/build/flow/templates/create-a-template"},{"label":"Template reference","href":"/docs/apps/build/flow/templates/reference"}]},{"label":"Track Flow lifecycle events","href":"/docs/apps/build/flow/track-lifecycle-events"},{"label":"Migrate legacy Flow extensions","href":"/docs/apps/build/flow/migrate-legacy-extensions"},{"label":"Configure complex data types","href":"/docs/apps/build/flow/configure-complex-data-types"}]},{"label":"Online store","children":[{"label":"Apps in the online store","href":"/docs/apps/build/online-store"},{"label":"Display dynamic data","href":"/docs/apps/build/online-store/display-dynamic-data"},{"label":"Theme app extensions","children":[{"label":"About theme app extensions","href":"/docs/apps/build/online-store/theme-app-extensions"},{"label":"Build theme app extensions","href":"/docs/apps/build/online-store/theme-app-extensions/build"},{"label":"Theme app extension configuration","href":"/docs/apps/build/online-store/theme-app-extensions/configuration"},{"label":"UX for theme app extensions","href":"/docs/apps/build/online-store/theme-app-extensions/ux"},{"label":"Migrate to theme app extensions","href":"/docs/apps/build/online-store/theme-app-extensions/migrate"}]},{"label":"Verify theme support","href":"/docs/apps/build/online-store/verify-support"},{"label":"Manage media for products","href":"/docs/apps/build/online-store/product-media"},{"label":"Manage media for product variants","href":"/docs/apps/build/online-store/product-variant-media"},{"label":"ScriptTag resource (legacy)","href":"/docs/apps/build/online-store/script-tag-legacy"},{"label":"Asset resource (legacy)","href":"/docs/apps/build/online-store/asset-legacy"}]},{"label":"Point of Sale","children":[{"label":"Apps in POS","href":"/docs/apps/build/pos"},{"label":"Embed your app in POS","href":"/docs/apps/build/pos/embed-app-in-pos"},{"label":"UI extensions","children":[{"label":"About POS UI extensions","href":"/docs/api/pos-ui-extensions","stepIn":true},{"label":"Start building POS UI extensions","href":"/docs/api/pos-ui-extensions/getting-started","stepIn":true},{"label":"Build a POS discount","href":"/docs/api/pos-ui-extensions/example-discount-extension","stepIn":true},{"label":"Build a print extension","href":"/docs/api/pos-ui-extensions/example-print-extension","stepIn":true},{"label":"Debug POS UI extensions","href":"/docs/api/pos-ui-extensions/debugging","stepIn":true},{"label":"Communicate with a server","href":"/docs/api/pos-ui-extensions/server-communication","stepIn":true},{"label":"Troubleshoot UI extensions","href":"/docs/api/pos-ui-extensions/troubleshooting","stepIn":true}]},{"label":"Legacy extensions","children":[{"label":"POS links (legacy)","href":"/docs/apps/build/pos/links-legacy"},{"label":"POS cart app extensions (legacy)","href":"/docs/apps/build/pos/cart-legacy"},{"label":"POS product recommendations extension (legacy)","href":"/docs/apps/build/pos/recommendations-legacy"}]}]}]},{"label":"Use cases","isGroup":true,"children":[{"label":"Marketing and analytics","children":[{"label":"Apps for marketing and analytics","href":"/docs/apps/build/marketing-analytics"},{"label":"About web pixels","href":"/docs/apps/build/marketing-analytics/pixels"},{"label":"Build web pixels","href":"/docs/apps/build/marketing-analytics/build-web-pixels"},{"label":"Customer segments","children":[{"label":"About customer segments","href":"/docs/apps/build/marketing-analytics/customer-segments"},{"label":"Build a template extension","href":"/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension"},{"label":"Build an action extension","href":"/docs/apps/build/marketing-analytics/customer-segments/build-an-action-extension"},{"label":"Manage customer segments","href":"/docs/apps/build/marketing-analytics/customer-segments/manage"},{"label":"Migrate saved searches","href":"/docs/apps/build/marketing-analytics/customer-segments/migrate-saved-searches"},{"label":"Migrate to async queries","href":"/docs/apps/build/marketing-analytics/customer-segments/migrate-to-async-queries"}]},{"label":"Marketing activities","children":[{"label":"About marketing activities","href":"/docs/apps/build/marketing-analytics/marketing-activities"},{"label":"Migrate marketing activity extensions","href":"/docs/apps/build/marketing-analytics/marketing-activities/migrate-extensions"}]},{"label":"Marketing automations","children":[{"label":"About marketing automations","href":"/docs/apps/build/marketing-analytics/automations"},{"label":"Create marketing automation actions","href":"/docs/apps/build/marketing-analytics/automations/create-marketing-automation-actions"},{"label":"List of action endpoints","href":"/docs/apps/build/marketing-analytics/automations/action-endpoints"},{"label":"Build a configuration page","href":"/docs/apps/build/marketing-analytics/automations/build-custom-configuration-page"}]},{"label":"Optimize SEO","href":"/docs/apps/build/marketing-analytics/optimize-storefront-seo"}]},{"label":"Discounts","children":[{"label":"About discounts","href":"/docs/apps/build/discounts"},{"label":"Build a discount function","href":"/docs/apps/build/discounts/build-discount-function"},{"label":"Build a discounts UI with UI extensions","href":"/docs/apps/build/discounts/build-ui-extension"},{"label":"Build a discounts UI with Remix","href":"/docs/apps/build/discounts/build-ui-with-remix"},{"label":"Build a discounts allocator","href":"/docs/apps/build/discounts/build-discounts-allocator"},{"label":"UX for discounts","href":"/docs/apps/build/discounts/ux-for-discounts"}]},{"label":"Product merchandising","children":[{"label":"Product bundles","children":[{"label":"About product bundles","href":"/docs/apps/build/product-merchandising/bundles"},{"label":"Start building bundles","href":"/docs/apps/build/product-merchandising/bundles/start-building"},{"label":"Add a fixed bundle","children":[{"label":"About fixed bundles","href":"/docs/apps/build/product-merchandising/bundles/add-fixed-bundle"},{"label":"Add a product fixed bundle","href":"/docs/apps/build/product-merchandising/bundles/add-product-fixed-bundle"},{"label":"Add a variant fixed bundle","href":"/docs/apps/build/product-merchandising/bundles/add-variant-fixed-bundle"}]},{"label":"Add a customized bundle","href":"/docs/apps/build/product-merchandising/bundles/add-customized-bundle"},{"label":"Add UI for merchant customization","href":"/docs/apps/build/product-merchandising/bundles/add-merchant-config-ui"},{"label":"Create a bundle app","href":"/docs/apps/build/product-merchandising/bundles/create-bundle-app"},{"label":"Turn on publishing","href":"/docs/apps/build/product-merchandising/bundles/turn-on-publishing"}]},{"label":"Combined listings","children":[{"label":"About combined listings","href":"/docs/apps/build/product-merchandising/combined-listings"},{"label":"Build for combined listings","href":"/docs/apps/build/product-merchandising/combined-listings/build-for-combined-listings"}]}]},{"label":"Purchase options","children":[{"label":"About custom purchase options","href":"/docs/apps/build/purchase-options"},{"label":"Subscriptions","children":[{"label":"About subscriptions","href":"/docs/apps/build/purchase-options/subscriptions"},{"label":"Model a subscriptions solution","href":"/docs/apps/build/purchase-options/subscriptions/model-subscriptions-solution"},{"label":"Selling plans","children":[{"label":"About selling plans","href":"/docs/apps/build/purchase-options/subscriptions/selling-plans"},{"label":"Build a selling plan","href":"/docs/apps/build/purchase-options/subscriptions/selling-plans/build-a-selling-plan"}]},{"label":"Subscription contracts","children":[{"label":"About subscription contracts","href":"/docs/apps/build/purchase-options/subscriptions/contracts"},{"label":"Build a subscription contract","href":"/docs/apps/build/purchase-options/subscriptions/contracts/build-a-subscription-contract"},{"label":"Update a subscription contract","href":"/docs/apps/build/purchase-options/subscriptions/contracts/update-a-subscription-contract"},{"label":"Combine subscription contracts","href":"/docs/apps/build/purchase-options/subscriptions/contracts/combine-subscription-contracts"},{"label":"Subscription link extensions","children":[{"label":"Build a subscription link extension","href":"/docs/apps/build/purchase-options/subscriptions/contracts/subscription-link-extensions/start-building"},{"label":"Migrate existing extensions to Shopify CLI","href":"/docs/apps/build/purchase-options/subscriptions/contracts/subscription-link-extensions/migrate-to-cli"}]}]},{"label":"Billing cycles","children":[{"label":"About subscription billing cycles","href":"/docs/apps/build/purchase-options/subscriptions/billing-cycles"},{"label":"Manage billing cycle contracts","href":"/docs/apps/build/purchase-options/subscriptions/billing-cycles/manage-billing-cycle-contracts"},{"label":"Manage billing cycles in bulk","href":"/docs/apps/build/purchase-options/subscriptions/billing-cycles/bulk-billing-cycles"}]},{"label":"Fulfillments","children":[{"label":"About fulfillment for subscriptions","href":"/docs/apps/build/purchase-options/subscriptions/fulfillments"},{"label":"Sync orders and subscriptions","href":"/docs/apps/build/purchase-options/subscriptions/fulfillments/sync-orders-subscriptions"},{"label":"Manage fulfillments for prepaid subscriptions","href":"/docs/apps/build/purchase-options/subscriptions/fulfillments/manage-subscription-fulfillments"}]},{"label":"Migrate to the Subscriptions API","children":[{"label":"Subscriptions API migration guide","href":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api"},{"label":"Migrate customer information","href":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/migrate-customer-information"},{"label":"Migrate existing subscriptions","href":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/migrate-subscription-contracts"},{"label":"UX for migration","href":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/ux-for-migration"}]}]},{"label":"Pre-orders and Try Before You Buy","children":[{"label":"About pre-orders and Try Before You Buy","href":"/docs/apps/build/purchase-options/deferred"},{"label":"Model pre-orders and Try Before You Buy","href":"/docs/apps/build/purchase-options/deferred/model-deferred-purchase-solutions"},{"label":"Build a pre-order and Try Before You Buy solution","href":"/docs/apps/build/purchase-options/deferred/build-deferment-solution"},{"label":"Delivery and deferment","children":[{"label":"About delivery for pre-order and Try Before You Buy","href":"/docs/apps/build/purchase-options/deferred/delivery-and-deferment"},{"label":"Build delivery profiles","href":"/docs/apps/build/purchase-options/deferred/delivery-and-deferment/build-delivery-profiles"}]},{"label":"Building your app","children":[{"label":"Start building a pre-order and Try Before You Buy (TBYB) app","href":"/docs/apps/build/purchase-options/deferred/create-deferred-purchase-app/start-building"},{"label":"Create the UI","href":"/docs/apps/build/purchase-options/deferred/create-deferred-purchase-app/create-ui"}]}]},{"label":"Product subscription app extensions","children":[{"label":"About product subscription app extensions","href":"/docs/apps/build/purchase-options/product-subscription-app-extensions"},{"label":"Start building product subscription app extensions","href":"/docs/apps/build/purchase-options/product-subscription-app-extensions/start-building"},{"label":"Extension points","href":"/docs/apps/build/purchase-options/product-subscription-app-extensions/extension-points"},{"label":"Authenticate app extension requests","href":"/docs/apps/build/purchase-options/product-subscription-app-extensions/authenticate-extension-requests"},{"label":"Create and manage app extensions","href":"/docs/apps/build/purchase-options/product-subscription-app-extensions/create-and-manage"}]},{"label":"Build a customer-facing purchase-option portal","children":[{"label":"About customer-facing portals","href":"/docs/apps/build/purchase-options/customer-portal"},{"label":"Create customer-facing portals","href":"/docs/apps/build/purchase-options/customer-portal/create-customer-portal"}]}]},{"label":"Global markets","children":[{"label":"About Shopify Markets","href":"/docs/apps/build/markets"},{"label":"About catalogs for different markets","href":"/docs/apps/build/markets/catalogs-different-markets"},{"label":"Build a catalog","href":"/docs/apps/build/markets/build-catalog"},{"label":"Migrate to catalogs","href":"/docs/apps/build/markets/migrate-to-catalogs"},{"label":"Manage translated content","href":"/docs/apps/build/markets/manage-translated-content"},{"label":"Add locally required order data","href":"/docs/apps/build/markets/add-locally-required-order-data"}]},{"label":"Orders and fulfillment","children":[{"label":"Apps in orders and fulfillment","href":"/docs/apps/build/orders-fulfillment"},{"label":"Inventory management","children":[{"label":"Apps in inventory management","href":"/docs/apps/build/orders-fulfillment/inventory-management-apps"},{"label":"Manage inventory","href":"/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states"}]},{"label":"Order management","children":[{"label":"Apps in order management","href":"/docs/apps/build/orders-fulfillment/order-management-apps"},{"label":"Edit existing orders","href":"/docs/apps/build/orders-fulfillment/order-management-apps/edit-orders"},{"label":"Build fulfillment solutions","href":"/docs/apps/build/orders-fulfillment/order-management-apps/build-fulfillment-solutions"},{"label":"Track orders on other platforms","href":"/docs/apps/build/orders-fulfillment/order-management-apps/track-orders-other-platforms"}]},{"label":"Order routing and fulfillment","children":[{"label":"Apps in order routing","href":"/docs/apps/build/orders-fulfillment/order-routing-apps"},{"label":"Location rules","children":[{"label":"About location rules","href":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules"},{"label":"Build a location rule function","href":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function"},{"label":"Add configuration","href":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/add-configuration"},{"label":"Build the UI","href":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-ui"}]},{"label":"Build fulfillment constraints","href":"/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints"},{"label":"Build local pickup options","href":"/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options"}]},{"label":"Fulfillment services","children":[{"label":"About fulfillment services","href":"/docs/apps/build/orders-fulfillment/fulfillment-service-apps"},{"label":"Build for fulfillment services","href":"/docs/apps/build/orders-fulfillment/fulfillment-service-apps/build-for-fulfillment-services"}]},{"label":"Returns","children":[{"label":"Apps in returns","href":"/docs/apps/build/orders-fulfillment/returns-apps"},{"label":"Build for return management","href":"/docs/apps/build/orders-fulfillment/returns-apps/build-return-management"},{"label":"Manage exchanges","href":"/docs/apps/build/orders-fulfillment/returns-apps/manage-exchanges"},{"label":"View and refund duties","href":"/docs/apps/build/orders-fulfillment/returns-apps/view-and-refund-duties"},{"label":"Manage reverse fulfillment orders","href":"/docs/apps/build/orders-fulfillment/returns-apps/manage-reverse-fulfillment-orders"},{"label":"Manage reverse deliveries","href":"/docs/apps/build/orders-fulfillment/returns-apps/manage-reverse-deliveries"}]},{"label":"Migrate to fulfillment orders","href":"/docs/apps/build/orders-fulfillment/migrate-to-fulfillment-orders"}]},{"label":"Payments","children":[{"label":"Payments extensions","href":"/docs/apps/build/payments"},{"label":"Requirements for payments extensions","href":"/docs/apps/build/payments/requirements"},{"label":"Get approved for payments","href":"/docs/apps/build/payments/payments-extension-review"},{"label":"Build a payments extension","children":[{"label":"About payment processing","href":"/docs/apps/build/payments/processing"},{"label":"Build an offsite payments extension","children":[{"label":"Use Shopify CLI","href":"/docs/apps/build/payments/offsite/use-the-cli"}]},{"label":"Build a credit card payments extension","children":[{"label":"Use Shopify CLI","href":"/docs/apps/build/payments/credit-card/use-the-cli"},{"label":"Manage encryption certificates","href":"/docs/apps/build/payments/credit-card/manage-encryption-certificates"},{"label":"Configure test certificate","href":"/docs/apps/build/payments/credit-card/test-certificate"},{"label":"Build with UI extensibility","href":"/docs/apps/build/payments/credit-card/with-extensibility"},{"label":"Build a Shopify custom credit card payments extension","href":"/docs/apps/build/payments/credit-card/custom/use-the-cli"}]},{"label":"Build an alternative payments extension","href":"/docs/apps/build/payments/alternative/build-an-alternative-payment-extension"},{"label":"Build a redeemables payments extension","href":"/docs/apps/build/payments/redeemables/build-a-redeemables-payment-extension"},{"label":"Implementation considerations","href":"/docs/apps/build/payments/considerations"},{"label":"Request reference","href":"/docs/apps/build/payments/request-reference"}]},{"label":"Onboard merchants to your extension","href":"/docs/apps/build/payments/onboard-a-merchant-payments-extension"},{"label":"Migrate extensions to Shopify CLI","href":"/docs/apps/build/payments/migrate-extensions-to-shopify-cli"}]},{"label":"Sales channels","children":[{"label":"Apps as sales channels","href":"/docs/apps/build/sales-channels"},{"label":"Start building a sales channel","href":"/docs/apps/build/sales-channels/start-building"},{"label":"Product sync","href":"/docs/apps/build/sales-channels/product-sync"},{"label":"Contextual Product Feeds","href":"/docs/apps/build/sales-channels/contextual-product-feeds"},{"label":"About scheduled publishing","href":"/docs/apps/build/sales-channels/scheduled-product-publishing"},{"label":"Enable scheduled publishing","href":"/docs/apps/build/sales-channels/enable-scheduled-publishing"}]},{"label":"B2B","children":[{"label":"Apps and B2B","href":"/docs/apps/build/b2b"},{"label":"Start building for B2B","href":"/docs/apps/build/b2b/start-building"},{"label":"Manage client company locations","href":"/docs/apps/build/b2b/manage-client-company-locations"},{"label":"Manage B2B catalogs","href":"/docs/apps/build/b2b/manage-catalogs"},{"label":"Use draft orders","href":"/docs/apps/build/b2b/draft-orders"},{"label":"Create B2B checkout UI","href":"/docs/apps/build/b2b/create-checkout-ui"}]},{"label":"Blockchain","children":[{"label":"Apps in blockchain","href":"/docs/apps/build/blockchain"},{"label":"NFT distribution","children":[{"label":"About NFT distribution","href":"/docs/apps/build/blockchain/nft-distribution"},{"label":"Check NFT sales eligibility","href":"/docs/apps/build/blockchain/nft-distribution/check-nft-sales-eligibility"},{"label":"Check merchant eligibility","href":"/docs/apps/build/blockchain/nft-distribution/check-merchant-eligibility"},{"label":"UX for NFT distribution","href":"/docs/apps/build/blockchain/nft-distribution/ux-for-nft-distribution"}]},{"label":"Tokengating","children":[{"label":"About tokengating","href":"/docs/apps/build/blockchain/tokengating"},{"label":"Build a tokengating app","children":[{"label":"Apps for tokengating","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app"},{"label":"Create gates","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gates-admin"},{"label":"Show gates","href":"/docs/apps/selling-strategies/blockchain/tokengating/build-a-tokengating-app/show-gates-storefront"},{"label":"Create the gated discount function","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gated-discount-function"}]},{"label":"Build a tokengated storefront","children":[{"label":"About tokengated storefronts","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront"},{"label":"Start building a tokengated storefront","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/start-building"},{"label":"Save a connected wallet to session storage","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/save-wallet-to-session"},{"label":"Read and evaluate gates","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/read-and-evaluate-gates"},{"label":"Write gate context to cart attributes","href":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/write-gate-context-to-cart-attributes"}]},{"label":"UX for tokengating","href":"/docs/apps/build/blockchain/tokengating/ux-for-tokengating"}]}]}]},{"label":"Best practices","isGroup":true,"children":[{"label":"Performance","children":[{"label":"About performance optimization","href":"/docs/apps/build/performance"},{"label":"General app performance","href":"/docs/apps/build/performance/general-best-practices"},{"label":"Admin, installation, and OAuth performance","href":"/docs/apps/build/performance/admin-installation-oauth"},{"label":"Storefront performance","href":"/docs/apps/build/performance/storefront"},{"label":"Checkout performance","href":"/docs/apps/build/performance/checkout"}]},{"label":"Accessibility","href":"/docs/apps/build/accessibility"},{"label":"Localize your app","href":"/docs/apps/build/localize-your-app"},{"label":"Integrating with Shopify","href":"/docs/apps/build/integrating-with-shopify"},{"label":"Mobile support","href":"/docs/apps/build/mobile-support"},{"label":"Non-deceptive code","href":"/docs/apps/build/non-deceptive-code"},{"label":"Privacy law compliance","href":"/docs/apps/build/privacy-law-compliance"},{"label":"Security","children":[{"label":"Protect against common vulnerabilities","href":"/docs/apps/build/security/protect-against-common-vulnerabilities"},{"label":"Encrypt with TLS","href":"/docs/apps/build/security/encrypt-with-tls"},{"label":"Set up iframe protection","href":"/docs/apps/build/security/set-up-iframe-protection"},{"label":"Secure your network service ports","href":"/docs/apps/build/security/secure-network-service-ports"},{"label":"Generate secure tokens","href":"/docs/apps/build/security/generate-secure-tokens"},{"label":"Shorten URLs with care","href":"/docs/apps/build/security/shorten-urls-with-care"}]}]},{"label":"Building blocks","isGroup":true,"children":[{"label":"GraphQL","children":[{"label":"About GraphQL","href":"/docs/apps/build/graphql"},{"label":"GraphQL basics","children":[{"label":"Queries","href":"/docs/apps/build/graphql/basics/queries"},{"label":"Mutations","href":"/docs/apps/build/graphql/basics/mutations"},{"label":"Variables","href":"/docs/apps/build/graphql/basics/variables"},{"label":"Advanced concepts","href":"/docs/apps/build/graphql/basics/advanced"}]},{"label":"Migrate to GraphQL from REST","children":[{"label":"About REST to GraphQL migration","href":"/docs/apps/build/graphql/migrate"},{"label":"Learn how to migrate","href":"/docs/apps/build/graphql/migrate/learn-how"},{"label":"Update API calls in your app","href":"/docs/apps/build/graphql/migrate/libraries"},{"label":"New product model","children":[{"label":"About the new product model","href":"/docs/apps/build/graphql/migrate/new-product-model"},{"label":"API updates","href":"/docs/apps/build/graphql/migrate/new-product-model/api-updates"},{"label":"Product model and components","href":"/docs/apps/build/graphql/migrate/new-product-model/product-model-components"},{"label":"Migrate and test high-variants","href":"/docs/apps/build/graphql/migrate/new-product-model/migrate-and-test"},{"label":"Retrieve product data","href":"/docs/apps/build/graphql/migrate/new-product-model/retrieve-data"},{"label":"Add product data","href":"/docs/apps/build/graphql/migrate/new-product-model/add-data"},{"label":"Edit product data","href":"/docs/apps/build/graphql/migrate/new-product-model/edit-data"},{"label":"Sync product data","href":"/docs/apps/build/graphql/migrate/new-product-model/sync-data"},{"label":"Linking metafields to options","href":"/docs/apps/build/graphql/migrate/new-product-model/metafield-linked"}]}]}]},{"label":"Extensions","children":[{"label":"About extensions","href":"/docs/apps/build/app-extensions"},{"label":"List of app extensions","href":"/docs/apps/build/app-extensions/list-of-app-extensions"},{"label":"Build an extension-only app","href":"/docs/apps/build/app-extensions/build-extension-only-app"},{"label":"Configure app extensions","href":"/docs/apps/build/app-extensions/configure-app-extensions"},{"label":"Remove an extension","href":"/docs/apps/build/app-extensions/remove-app-extension"}]},{"label":"Shopify Functions","children":[{"label":"About Shopify Functions","href":"/docs/apps/build/functions"},{"label":"Input and output","children":[{"label":"About input and output","href":"/docs/apps/build/functions/input-output"},{"label":"Metafields for input queries","href":"/docs/apps/build/functions/input-output/metafields-for-input-queries"},{"label":"Use variables in input queries","href":"/docs/apps/build/functions/input-output/use-variables-input-queries"},{"label":"Network access","children":[{"label":"About network access","href":"/docs/apps/build/functions/input-output/network-access"},{"label":"Use network access","href":"/docs/apps/build/functions/input-output/network-access/use-network-access"},{"label":"About performance and resilience","href":"/docs/apps/build/functions/input-output/network-access/performance-and-resilience"},{"label":"GraphQL reference","href":"/docs/apps/build/functions/input-output/network-access/graphql"}]}]},{"label":"Programming languages","children":[{"label":"Language considerations","href":"/docs/apps/build/functions/programming-languages"},{"label":"Rust for Functions","href":"/docs/apps/build/functions/programming-languages/rust-for-functions"},{"label":"JavaScript for Functions","href":"/docs/apps/build/functions/programming-languages/javascript-for-functions"},{"label":"WebAssembly","href":"/docs/apps/build/functions/programming-languages/webassembly-for-functions"}]},{"label":"Test and debug Shopify Functions","href":"/docs/apps/build/functions/test-debug-functions"},{"label":"Monitoring and handling errors in production","href":"/docs/apps/build/functions/monitoring-and-errors"},{"label":"Localization practices for Shopify Functions","href":"/docs/apps/build/functions/localization-practices-shopify-functions"}]},{"label":"Webhooks","children":[{"label":"About webhooks","href":"/docs/apps/build/webhooks"},{"label":"Subscribe","children":[{"label":"About subscriptions","href":"/docs/apps/build/webhooks/subscribe"},{"label":"Create a subscription","href":"/docs/apps/build/webhooks/subscribe/get-started"},{"label":"Subscribe using Admin API","href":"/docs/apps/build/webhooks/subscribe/subscribe-using-api"},{"label":"Deliver through HTTPS","href":"/docs/apps/build/webhooks/subscribe/https"},{"label":"Use a newer API version","href":"/docs/apps/build/webhooks/subscribe/use-newer-api-version"}]},{"label":"Customize","children":[{"label":"About customizing your webhooks","href":"/docs/apps/build/webhooks/customize"},{"label":"Filter events","href":"/docs/apps/build/webhooks/customize/filters"},{"label":"Modify payloads","href":"/docs/apps/build/webhooks/customize/modify_payloads"},{"label":"About sub-topics","href":"/docs/apps/build/webhooks/customize/sub-topics"}]},{"label":"Ignore duplicates","href":"/docs/apps/build/webhooks/ignore-duplicates"},{"label":"Troubleshoot","href":"/docs/apps/build/webhooks/troubleshooting-webhooks"},{"label":"Best practices","href":"/docs/apps/build/webhooks/best-practices"}]},{"label":"Custom data","children":[{"label":"About metafields and metaobjects","href":"/docs/apps/build/custom-data"},{"label":"About reserved prefixes","href":"/docs/apps/build/custom-data/reserved-prefixes"},{"label":"Metafields","children":[{"label":"List of data types","href":"/docs/apps/build/custom-data/metafields/list-of-data-types"},{"label":"Manage metafields","href":"/docs/apps/build/custom-data/metafields/manage-metafields"},{"label":"Definitions","children":[{"label":"About metafield definitions","href":"/docs/apps/build/custom-data/metafields/definitions"},{"label":"Use access controls for metafield","href":"/docs/apps/build/custom-data/metafields/definitions/use-access-controls-metafields"},{"label":"Conditional metafield definitions","href":"/docs/apps/build/custom-data/metafields/definitions/conditional-metafield-definitions"},{"label":"List of standard definitions","href":"/docs/apps/build/custom-data/metafields/definitions/list-of-standard-definitions"},{"label":"Manage metafield definitions","href":"/docs/apps/build/custom-data/metafields/definitions/manage-metafield-definitions"},{"label":"List of validation options","href":"/docs/apps/build/custom-data/metafields/definitions/list-of-validation-options"},{"label":"Set validation rules","href":"/docs/apps/build/custom-data/metafields/definitions/set-validation-rules"}]},{"label":"Use app-data metafields","href":"/docs/apps/build/custom-data/metafields/use-app-data-metafields"},{"label":"Manage private metafields","href":"/docs/apps/build/custom-data/metafields/manage-private-metafields"},{"label":"Migrate private metafields","href":"/docs/apps/build/custom-data/metafields/migrate-private-metafields"},{"label":"Use metafield capabilities","href":"/docs/apps/build/custom-data/metafields/use-metafield-capabilities"},{"label":"Migrate metafields","href":"/docs/apps/build/custom-data/metafields/migrate-metafields"},{"label":"Query by metafield value","href":"/docs/apps/build/custom-data/metafields/query-by-metafield-value"}]},{"label":"Metaobjects","children":[{"label":"Work with metaobjects","href":"/docs/apps/build/custom-data/metaobjects/work-with-metaobjects"},{"label":"Use access controls for metaobjects","href":"/docs/apps/build/custom-data/metaobjects/use-access-controls-metaobjects"},{"label":"Use metaobject capabilities","href":"/docs/apps/build/custom-data/metaobjects/use-metaobject-capabilities"},{"label":"List of standard definitions","href":"/docs/apps/build/custom-data/metaobjects/list-of-standard-definitions"},{"label":"Metaobject limits","href":"/docs/apps/build/custom-data/metaobjects/metaobject-limits"}]}]},{"label":"Authentication","children":[{"label":"Authentication and authorization","href":"/docs/apps/build/authentication-authorization"},{"label":"App installation","children":[{"label":"Enable Shopify-managed installations","href":"/docs/apps/build/authentication-authorization/app-installation"},{"label":"Uninstall an app with an API request","href":"/docs/apps/build/authentication-authorization/app-installation/uninstall-app-api-request"}]},{"label":"Session tokens","children":[{"label":"About session tokens","href":"/docs/apps/build/authentication-authorization/session-tokens"},{"label":"Set up session tokens","href":"/docs/apps/build/authentication-authorization/session-tokens/set-up-session-tokens"}]},{"label":"Access tokens","children":[{"label":"About token acquisition","href":"/docs/apps/build/authentication-authorization/access-tokens/"},{"label":"Token exchange","href":"/docs/apps/build/authentication-authorization/access-tokens/token-exchange"},{"label":"Authorization code grant","href":"/docs/apps/build/authentication-authorization/access-tokens/authorization-code-grant"},{"label":"Access tokens for custom apps","href":"/docs/apps/build/authentication-authorization/access-tokens/generate-app-access-tokens-admin"},{"label":"Online access tokens","href":"/docs/apps/build/authentication-authorization/access-tokens/online-access-tokens"},{"label":"Offline access tokens","href":"/docs/apps/build/authentication-authorization/access-tokens/offline-access-tokens"},{"label":"Delegate access tokens","href":"/docs/apps/build/authentication-authorization/access-tokens/use-delegate-tokens"}]},{"label":"Client secret / API key","children":[{"label":"About client secrets","href":"/docs/apps/build/authentication-authorization/client-secrets"},{"label":"Rotate or revoke client credentials","href":"/docs/apps/build/authentication-authorization/client-secrets/rotate-revoke-client-credentials"}]},{"label":"Set up embedded app authorization","href":"/docs/apps/build/authentication-authorization/set-embedded-app-authorization"}]}]}]},"page":{"gid":"14f74083-711f-4442-9951-3320c94b34d6","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>