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>Input settings</title> <meta name="description" content="About input setting types."> <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="Input settings" /> <meta property="og:description" content="About input setting types." /> <meta property="og:image" content="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/social-share-24de3afa0326f705b84a0a98714acc192611e5a21ade3b7c8f2bd12ba7d1457f.jpg" /> <meta property="og:url" content="https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings" /> <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="Input settings" /> <meta property="twitter:description" content="About input setting types." /> <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="hOrmf2N2cMfOdxAbhjb8Oo69D4slyaRsnVRvFNmkqwB3rJ2mQ7qJrO9bv5y-oaT6c6Mc55Gfra1ia22E56GZPQ" /> </head> <body class="page--storefronts-markdown shopify-sans-supported-lang"> <div id="GlobalIconSymbols"> <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="modules-caret-down"> <svg xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" viewBox="0 0 10.289 6.563"> <path d="M5.212 6.563L0 1.423 1.404 0l3.788 3.735L8.865.01l1.424 1.404"></path> </svg> </symbol> <symbol id="modules-checked"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.7 40"> <path d="M16.7 30l-7.4-7.9c-.8-.8-.6-2 .4-2.6 1-.6 2.4-.5 3.1.3l3.7 4 11.3-13c.7-.8 2.1-1 3.1-.4s1.2 1.8.5 2.6L16.7 30z"></path> </svg> </symbol> <symbol id="modules-mobile-hamburger"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M19 11H1a1 1 0 110-2h18a1 1 0 110 2zm0-7H1a1 1 0 110-2h18a1 1 0 110 2zm0 14H1a1 1 0 110-2h18a1 1 0 110 2z"></path> </svg> </symbol> <symbol id="chevron-down"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"> <path d="M8.586 0H1.414C.524 0 .077 1.077.707 1.707l3.586 3.586a1 1 0 001.414 0l3.586-3.586C9.923 1.077 9.477 0 8.586 0z"></path> </svg> </symbol> <symbol id="modules-cancel"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M11.414 10l6.293-6.293a1 1 0 00-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 001.414 1.414L10 11.414l6.293 6.293a.996.996 0 001.414 0 1 1 0 000-1.414L11.414 10z"></path> </svg> </symbol> </svg> </div> <div id="PageContainer" class="page-container"> <div id="ReactAppContainer" class="react-app-container"></div> <div style="display: none" id="MarkdownContentForReact"> <main> <div class="grid grid--equal-height grid--main"> <div class="grid__item hide--desktop"> <div id='TOCAccordion' class='toc-accordion'> <div class='toc-accordion__item accordion-item'> <button class='toc-accordion__link accordion-link'> On this page <svg class="icon toc-accordion__caret" aria-hidden="true" focusable="false"> <use xlink:href="#modules-caret-down" /> </svg> </button> <div class="toc-accordion__content accordion-content toc"> <ul> <li><a href="#standard-attributes">Standard attributes</a></li><li><a href="#basic-input-settings">Basic input settings</a></li><li><a href="#checkbox">checkbox</a></li><li><a href="#number">number</a></li><li><a href="#radio">radio</a></li><li><a href="#range">range</a></li><li><a href="#select">select</a></li><li><a href="#text">text</a></li><li><a href="#textarea">textarea</a></li><li><a href="#specialized-input-settings">Specialized input settings</a></li><li><a href="#article">article</a></li><li><a href="#blog">blog</a></li><li><a href="#collection">collection</a></li><li><a href="#collection_list">collection_list</a></li><li><a href="#color">color</a></li><li><a href="#color_background">color_background</a></li><li><a href="#color_scheme">color_scheme</a></li><li><a href="#color_scheme_group">color_scheme_group</a></li><li><a href="#font_picker">font_picker</a></li><li><a href="#html">html</a></li><li><a href="#image_picker">image_picker</a></li><li><a href="#inline_richtext">inline_richtext</a></li><li><a href="#link_list">link_list</a></li><li><a href="#liquid">liquid</a></li><li><a href="#metaobject">metaobject</a></li><li><a href="#metaobject_list">metaobject_list</a></li><li><a href="#page">page</a></li><li><a href="#product">product</a></li><li><a href="#product_list">product_list</a></li><li><a href="#richtext">richtext</a></li><li><a href="#text_alignment">text_alignment</a></li><li><a href="#url">url</a></li><li><a href="#video">video</a></li><li><a href="#video_url">video_url</a></li><li><a href="#create-links">Create links</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"> Input settings </h1> </div> <p>Input settings can hold a value and are configurable by merchants.</p> <p>Input settings are generally composed of <a href="#standard-attributes">standard attributes</a>, and there are two categories:</p> <ul> <li><a href="#basic-input-settings">Basic input settings</a></li> <li><a href="#specialized-input-settings">Specialized input settings</a></li> </ul> <p>To learn how to access the values of these settings for use in your theme, refer to the <a href="/docs/storefronts/themes/architecture/settings#access-settings">settings overview</a>.</p> <aside class="note tip"> <h4>Tip</h4> <p> If you want to add informational elements to your settings display, like a heading, then refer to <a href="/docs/storefronts/themes/architecture/settings/sidebar-settings">Sidebar settings</a>.</p> </aside><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="standard-attributes">Standard attributes</h2><a class="article-anchor-link" href="#standard-attributes"><span class="visuallyhidden">Anchor link to section titled "Standard attributes"</span></a></div> <p>The following are standard attributes across input settings. However, depending on the input type, there might be extra attributes or some might not apply:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td> <code>type</code> </td> <td> The setting type, which can be any of the <a href="#basic-input-settings">basic</a> or <a href="#specialized-input-settings">specialized</a> input setting types. </td> <td> Yes </td> </tr> <tr> <td> <code>id</code> </td> <td> The setting ID, which is used to access the setting value. </td> <td> Yes </td> </tr> <tr> <td> <code>label</code> </td> <td> The setting label, which will show in the theme editor. </td> <td> Yes </td> </tr> <tr> <td> <code>default</code> </td> <td> The default value for the setting. </td> <td> No </td> </tr> <tr> <td> <code>info</code> </td> <td> An option for informational text about the setting. </td> <td> No </td> </tr> </tbody> </table> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="basic-input-settings">Basic input settings</h2><a class="article-anchor-link" href="#basic-input-settings"><span class="visuallyhidden">Anchor link to section titled "Basic input settings"</span></a></div> <p>The following are the basic input setting types:</p> <ul> <li><a href="#checkbox">checkbox</a></li> <li><a href="#number">number</a></li> <li><a href="#radio">radio</a></li> <li><a href="#range">range</a></li> <li><a href="#select">select</a></li> <li><a href="#text">text</a></li> <li><a href="#textarea">textarea</a></li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="checkbox">checkbox</h2><a class="article-anchor-link" href="#checkbox"><span class="visuallyhidden">Anchor link to section titled "checkbox"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">checkbox</code> outputs a checkbox field. This setting type can be used for toggling features on and off, such as whether to show an announcement bar.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "checkbox", "id": "show_announcement", "label": "Show announcement", "default": true } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/checkbox.png">checkbox setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">checkbox</code> type setting, data is returned as a <a href="/docs/api/liquid/basics/types#boolean">boolean</a>.</p> <aside class="note"> <h4>Note</h4> <p> If <code class="text-highlight text-highlight--grey">default</code> is unspecified, then the value is <code class="text-highlight text-highlight--grey">false</code> by default.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="number">number</h2><a class="article-anchor-link" href="#number"><span class="visuallyhidden">Anchor link to section titled "number"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">number</code> outputs a single number field. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">number</code> type settings have the following attribute:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>placeholder</code></td> <td> <p>A placeholder value for the input.</p> <p>These values only appear for settings defined in <code>settings_schema.json</code>. They don't appear for settings defined in a section's schema.</p> </td> <td>No</td> </tr> </tbody> </table> <p>You can use this setting type to capture a varying numerical value, such as the number of products to show per page on a collection page.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "number", "id": "products_per_page", "label": "Products per page", "default": 20 } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/number.png">number setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">number</code> type setting, data is returned in one of the following formats:</p> <ul> <li><a href="/docs/api/liquid/basics/types#number">A number</a>.</li> <li><a href="/docs/api/liquid/basics/types#nil">nil</a>, if nothing has been entered.</li> </ul> <aside class="note caution"> <h4>Caution</h4> <p> The <code class="text-highlight text-highlight--grey">default</code> attribute is optional. However, the value must be a number and not a string. Failing to adhere results in an error.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="radio">radio</h2><a class="article-anchor-link" href="#radio"><span class="visuallyhidden">Anchor link to section titled "radio"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">radio</code> outputs a radio option field. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">radio</code> type settings have a required <code class="text-highlight text-highlight--grey">options</code> attribute that accepts an array of <code class="text-highlight text-highlight--grey">value</code> and <code class="text-highlight text-highlight--grey">label</code> definitions.</p> <p>You can use this setting type to capture a multi-option selection, such as the alignment of a header logo.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-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="Setting"></script> <script type="text/plain" data-language="json"> { "type": "radio", "id": "logo_aligment", "label": "Logo alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "centered", "label": "Centered" } ], "default": "left" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/radio.png">radio setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">radio</code> type setting, data is returned as a <a href="/docs/api/liquid/basics/types#string">string</a>.</p> <aside class="note"> <h4>Note</h4> <p> If <code class="text-highlight text-highlight--grey">default</code> is unspecified, then the first option is selected by default.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="range">range</h2><a class="article-anchor-link" href="#range"><span class="visuallyhidden">Anchor link to section titled "range"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">range</code> outputs a range slider field with an input field. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">range</code> type settings have the following attributes:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>min</code></td> <td>The minimum value of the input</td> <td>Yes</td> </tr> <tr> <td><code>max</code></td> <td>The maximum value of the input</td> <td>Yes</td> </tr> <tr> <td><code>step</code></td> <td>The increment size between steps of the slider. Defaults to <code>1</code> when omitted.</td> <td>No</td> </tr> <tr> <td><code>unit</code></td> <td>The unit for the input. For example, you can set <code>px</code> for a font-size slider.</td> <td>No</td> </tr> </tbody> </table> <p>You can use this setting type to capture a varying numerical value, such as font size.</p> <p>You can update the <code class="text-highlight text-highlight--grey">range</code> value using the provided slider, or by typing a value into the input field:</p> <ul> <li>If you enter a value that doesn't respect the <code class="text-highlight text-highlight--grey">step</code> definition, then the value rounds to the closest step.</li> <li>If you enter a value outside of the given <code class="text-highlight text-highlight--grey">min</code> and <code class="text-highlight text-highlight--grey">max</code>, then the value reverts to the <code class="text-highlight text-highlight--grey">min</code> or <code class="text-highlight text-highlight--grey">max</code> value accordingly.</li> </ul> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-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="Setting"></script> <script type="text/plain" data-language="json"> { "type": "range", "id": "font_size", "min": 12, "max": 24, "step": 1, "unit": "px", "label": "Font size", "default": 16 } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/range.png">range setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">range</code> type setting, data is returned as a <a href="/docs/api/liquid/basics/types#number">number</a>.</p> <aside class="note caution"> <h4>Caution</h4> <p> The <code class="text-highlight text-highlight--grey">default</code> attribute is required. The <code class="text-highlight text-highlight--grey">min</code>, <code class="text-highlight text-highlight--grey">max</code>, <code class="text-highlight text-highlight--grey">step</code>, and <code class="text-highlight text-highlight--grey">default</code> attributes can't be string values. Failing to adhere results in an error.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="select">select</h2><a class="article-anchor-link" href="#select"><span class="visuallyhidden">Anchor link to section titled "select"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">select</code> outputs <a href="#selector-fields">different selector fields</a>, depending on certain criteria. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">select</code> type settings have the following attributes:</p> <table> <caption>The additional attributes that the select type settings supports</caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> <th scope="col">Required</th> </tr> </thead> <tbody> <tr scope="row"> <td><code>options</code></td> <td>Takes an array of <code>value</code>/<code>label</code> definitions for each option in the drop-down.</td> <td>Yes</td> </tr> <tr scope="row"> <td><code>group</code></td> <td>An optional attribute that you can add to each option to create option groups in the drop-down.</td> <td>No</td> </tr> </tbody> </table> <div class="heading-wrapper heading-wrapper-3"><h3 id="selector-fields">Selector fields</h3><a class="article-anchor-link" href="#selector-fields"><span class="visuallyhidden">Anchor link to section titled "Selector fields"</span></a></div> <p>The following criteria render selector fields as either a <code class="text-highlight text-highlight--grey">DropDown</code> or a <code class="text-highlight text-highlight--grey">SegmentedControl</code>:</p> <table> <caption>The rendering criteria for selector fields</caption> <thead> <tr> <th scope="col">Field</th> <th scope="col">Rendering criteria</th> <th scope="col">Output</th> </tr> </thead> <tbody> <tr scope="row"> <td><code>Dropdown</code></td> <td><ul><li>The optional <code>group</code> attribute is used.</li><li>More than five options are provided.</li><li>The options are too long and might overflow their container.</li></ul></td> <td><img src="/assets/themes/settings/basic/DropDown.png" alt="Selector fields rendered as a field of type DropDown" /></td> </tr> <tr scope="row"> <td><code>SegmentedControl</code></td> <td><ul><li>The optional <code>group</code> attribute isn't used.</li><li>Two to five options are provided.</li><li>All options fit within their container and don't overflow.</li></ul></td> <td><img src="/assets/themes/settings/basic/SegmentedControl.png" alt="Selector fields rendered as a SegmentedControl field" /></td> </tr> </tbody> </table> <p>You can use this setting type to capture a multi-option selection, such as the vertical alignment of slideshow text.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-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="Setting"></script> <script type="text/plain" data-language="json"> { "type": "select", "id": "vertical_alignment", "label": "Vertical alignment", "options": [ { "value": "top", "label": "Top" }, { "value": "middle", "label": "Middle" }, { "value": "bottom", "label": "Bottom" } ], "default": "middle" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/select-segmentedcontrol.png">select setting</script> </div> </p> <p>However, if your setting matches the criteria for a drop-down field (<code class="text-highlight text-highlight--grey">DropDown</code>) because it has more than five options, then the following output is generated:</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="Setting"></script> <script type="text/plain" data-language="json"> { "type": "select", "id": "sizes", "label": "Sizes", "options": [ { "value": "xs", "label": "X-small" }, { "value": "s", "label": "Small" }, { "value": "m", "label": "Medium" }, { "value": "l", "label": "Large" }, { "value": "xl", "label": "X-large" }, { "value": "xxl", "label": "XX-large" } ], "default": "m" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/select-dropdown.png">select setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">select</code> type setting, data is returned as a <a href="/docs/api/liquid/basics/types#string">string</a>.</p> <aside class="note"> <h4>Note</h4> <p> If <code class="text-highlight text-highlight--grey">default</code> is unspecified, then the first option is selected by default.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="text">text</h2><a class="article-anchor-link" href="#text"><span class="visuallyhidden">Anchor link to section titled "text"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">text</code> outputs a single-line text field. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">text</code> type settings have the following attribute:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>placeholder</code></td> <td> <p>A placeholder value for the input.</p> <p>These values only appear for settings defined in <code>settings_schema.json</code>. They don't appear for settings defined in a section's schema.</p> </td> <td>No</td> </tr> </tbody> </table> <p>You can use this setting type to capture short strings, such as titles.</p> <p>For example, the following setting generates the following output</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "text", "id": "footer_linklist_title", "label": "Heading", "default": "Quick links" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/text.png">text setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">text</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a>.</li> <li>An <a href="/docs/api/liquid/basics/types#emptydrop"><code class="text-highlight text-highlight--grey">empty</code> object</a>, if nothing has been entered.</li> </ul> <aside class="note tip"> <h4>Tip</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">text</code> are not updated when switching presets.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="textarea">textarea</h2><a class="article-anchor-link" href="#textarea"><span class="visuallyhidden">Anchor link to section titled "textarea"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">textarea</code> outputs a multi-line text field. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">textarea</code> type settings have the following attribute:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>placeholder</code></td> <td> <p>A placeholder value for the input.</p> <p>These values only appear for settings defined in <code>settings_schema.json</code>. They don't appear for settings defined in a section's schema.</p> </td> <td>No</td> </tr> </tbody> </table> <p>You can use this setting type to capture larger blocks of text, such as messages.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "textarea", "id": "home_welcome_message", "label": "Welcome message", "default": "Welcome to my shop!" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/basic/textarea.png">textarea setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">textarea</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a>.</li> <li>An <a href="/docs/api/liquid/basics/types#emptydrop"><code class="text-highlight text-highlight--grey">empty</code> object</a>, if nothing has been entered.</li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="specialized-input-settings">Specialized input settings</h2><a class="article-anchor-link" href="#specialized-input-settings"><span class="visuallyhidden">Anchor link to section titled "Specialized input settings"</span></a></div> <p>The following are the specialized input setting types:</p> <ul> <li><a href="#article">article</a></li> <li><a href="#blog">blog</a></li> <li><a href="#collection">collection</a></li> <li><a href="#collection_list">collection_list</a></li> <li><a href="#color">color</a></li> <li><a href="#color_background">color_background</a></li> <li><a href="#color_scheme">color_scheme</a></li> <li><a href="#color_scheme_group">color_scheme_group</a></li> <li><a href="#font_picker">font_picker</a></li> <li><a href="#html">html</a></li> <li><a href="#image_picker">image_picker</a></li> <li><a href="#inline_richtext">inline_richtext</a></li> <li><a href="#link_list">link_list</a></li> <li><a href="#liquid">liquid</a></li> <li><a href="#metaobject">metaobject</a></li> <li><a href="#metaobject_list">metaobject_list</a></li> <li><a href="#page">page</a></li> <li><a href="#product">product</a></li> <li><a href="#product_list">product_list</a></li> <li><a href="#richtext">richtext</a></li> <li><a href="#text_alignment">text_alignment</a></li> <li><a href="#url">url</a></li> <li><a href="#video">video</a></li> <li><a href="#video_url">video_url</a></li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="article">article</h2><a class="article-anchor-link" href="#article"><span class="visuallyhidden">Anchor link to section titled "article"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">article</code> outputs an article picker field that's automatically populated with the available articles for the store. You can use this setting type to capture an article selection, such as the article to feature on the homepage.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "article", "id": "article", "label": "Article" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/article.png">article setting</script> </div> </p> <p>When accessing the value of an <code class="text-highlight text-highlight--grey">article</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>An <a href="/docs/api/liquid/objects/article"><code class="text-highlight text-highlight--grey">article</code> object</a>.</p> <p>To ensure backwards compatibility with <a href="/docs/storefronts/themes/architecture/settings#legacy-resource-based-settings">legacy resource-based settings</a>, outputting the setting directly will return the object's handle.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code> if no selection has been made, the selection isn't visible, or the selection no longer exists</p></li> </ul> <aside class="note"> <h4>Note</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">article</code> are not updated when switching presets. <code class="text-highlight text-highlight--grey">article</code> settings also don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="blog">blog</h2><a class="article-anchor-link" href="#blog"><span class="visuallyhidden">Anchor link to section titled "blog"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">blog</code> outputs a blog picker field that's automatically populated with the available blogs for the store. You can use this setting type to capture a blog selection, such as the blog to feature in the sidebar.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "blog", "id": "blog", "label": "Blog" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/blog.png">blog setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">blog</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>A <a href="/docs/api/liquid/objects/blog"><code class="text-highlight text-highlight--grey">blog</code> object</a>.</p> <p>To ensure backwards compatibility with <a href="/docs/storefronts/themes/architecture/settings#legacy-resource-based-settings">legacy resource-based settings</a>, outputting the setting directly will return the object's handle.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code>, if either no selection has been made or the selection no longer exists.</p></li> </ul> <aside class="note"> <h4>Note</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">blog</code> are not updated when switching presets. <code class="text-highlight text-highlight--grey">blog</code> settings also don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="collection">collection</h2><a class="article-anchor-link" href="#collection"><span class="visuallyhidden">Anchor link to section titled "collection"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">collection</code> outputs a collection picker field that's automatically populated with the available collections for the store. You can use this setting type to capture a collection selection, such as a collection for featuring products on the homepage.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "collection", "id": "collection", "label": "Collection" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/collection.png">collection setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">collection</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>A <a href="/docs/api/liquid/objects/collection"><code class="text-highlight text-highlight--grey">collection</code> object</a>.</p> <p>To ensure backwards compatibility with <a href="/docs/storefronts/themes/architecture/settings#legacy-resource-based-settings">legacy resource-based settings</a>, outputting the setting directly will return the object's handle.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code>, if no selection has been made, the selection isn't visible, or the selection no longer exists.</p></li> </ul> <aside class="note"> <h4>Note</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">collection</code> are not updated when switching presets. <code class="text-highlight text-highlight--grey">collection</code> settings also don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="collection_list">collection_list</h2><a class="article-anchor-link" href="#collection_list"><span class="visuallyhidden">Anchor link to section titled "collection_list"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">collection_list</code> outputs a collection picker field that's automatically populated with the available collections for the store. You can use this setting type to capture multiple collections, such as a group of collections to feature on the homepage.</p> <p>In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">collection_list</code> type settings have the following attributes:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>limit</code></td> <td>The maximum number of collections that the merchant can select. The default limit, and the maximum limit you can set, is 50.</td> <td>No</td> </tr> </tbody> </table> <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> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "collection_list", "id": "collection_list", "label": "Collections", "limit": 8 } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/collection_list.png">collection_list setting</script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/collection_list-detail.png">collection_list setting selector</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">collection_list</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>An array of <a href="/docs/api/liquid/objects/collection"><code class="text-highlight text-highlight--grey">collection</code> objects</a></p> <p>The array supports pagination using the <a href="/docs/api/liquid/tags/paginate#paginate-paginating-setting-arrays">paginate</a> tag. You can also append <code class="text-highlight text-highlight--grey">.count</code> to the <a href="/docs/storefronts/themes/architecture/settings#access-settings">setting key</a> to return the number of collections in the array.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code> if no selection has been made, the selection isn't visible, or the selection no longer exists</p></li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="color">color</h2><a class="article-anchor-link" href="#color"><span class="visuallyhidden">Anchor link to section titled "color"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">color</code> outputs a color picker field. You can use this setting type to capture a color selection for various theme elements, such as the body text color.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "color", "id": "body_text", "label": "Body text", "default": "#000000" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/color-picker.png">color setting picker</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">color</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/objects/color"><code class="text-highlight text-highlight--grey">color</code> object</a>.</li> <li><code class="text-highlight text-highlight--grey">blank</code>, if no selection has been made.</li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="color_background">color_background</h2><a class="article-anchor-link" href="#color_background"><span class="visuallyhidden">Anchor link to section titled "color_background"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">color_background</code> outputs a text field for entering <a rel="external noreferrer noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">CSS background</a> properties. You can use this setting type to capture background settings for various theme elements, such as the store background.</p> <aside class="note caution"> <h4>Caution</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">color_background</code> do not support image related background properties.</p> </aside> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "color_background", "id": "background", "label": "Background", "default": "linear-gradient(#ffffff, #000000)" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/color-background-input.png">color_background setting input</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">color_background</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a>.</li> <li>An empty string, if nothing has been entered.</li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="color_scheme">color_scheme</h2><a class="article-anchor-link" href="#color_scheme"><span class="visuallyhidden">Anchor link to section titled "color_scheme"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">color_scheme</code> outputs a picker with all of the available theme color schemes, and a preview of the selected color scheme. Theme color schemes in the picker are defined using the <a href="#color_scheme_group"><code class="text-highlight text-highlight--grey">color_scheme_group</code></a> setting. You can apply a color scheme to sections, blocks and general theme settings. Color scheme settings aren't supported in app blocks.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "color_scheme", "id": "color_scheme", "default": "scheme_1", "label": "Color Scheme" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/color-scheme-picker.png">color scheme setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">color_scheme</code> type setting, Shopify returns the selected <code class="text-highlight text-highlight--grey">color_scheme</code> object from <code class="text-highlight text-highlight--grey">color_scheme_group</code>.</p> <p>If no value was entered, or the value was invalid, then the default value from <code class="text-highlight text-highlight--grey">color_scheme</code> is returned. If the default value is also invalid, then the first <code class="text-highlight text-highlight--grey">color_scheme</code> from <code class="text-highlight text-highlight--grey">color_scheme_group</code> is returned.</p> <p>If the theme doesn't have <code class="text-highlight text-highlight--grey">color_scheme_group</code> data in <code class="text-highlight text-highlight--grey">settings_data.json</code>, then <a href="/docs/api/liquid/basics/types#nil">nil</a> is returned.</p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="color_scheme_group">color_scheme_group</h2><a class="article-anchor-link" href="#color_scheme_group"><span class="visuallyhidden">Anchor link to section titled "color_scheme_group"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">color_scheme_group</code> outputs a color scheme which is composed of the following input setting types:</p> <ul> <li><code class="text-highlight text-highlight--grey">header</code></li> <li><code class="text-highlight text-highlight--grey">color</code></li> <li><code class="text-highlight text-highlight--grey">color_background</code></li> </ul> <p>Color schemes can be added only in <code class="text-highlight text-highlight--grey">settings_schema.json</code>.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-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="Setting"></script> <script type="text/plain" data-language="json"> { "type": "color_scheme_group", "id": "color_schemes", "definition": [ { "type": "header", "content": "Typography" }, { "type": "color", "id": "text", "label": "Text", "default": "#121212" }, { "type": "header", "content": "Background" }, { "type": "color", "id": "background", "label": "Background", "default": "#FFFFFF" }, { "type": "color_background", "id": "background_gradient", "label": "Gradient", "info": "Background gradient replaces background where possible." }, { "type": "header", "content": "Additional" }, { "type": "color", "id": "primary_button", "label": "Primary", "default": "#121212" }, { "type": "color", "id": "on_primary_button", "label": "On Primary Button", "default": "#FFFFFF" }, { "type": "color", "id": "primary_button_border", "label": "Primary Button Border", "default": "#121212" }, { "type": "color", "id": "secondary_button", "label": "Secondary Button" }, { "type": "color", "id": "on_secondary_button", "label": "On Secondary Button", "default": "#121212" }, { "type": "color", "id": "secondary_button_border", "label": "Secondary Button Border", "default": "#FFFFFF" }, { "type": "color", "id": "icons", "label": "Icons", "default": "#FFFFFF" }, { "type": "color", "id": "links", "label": "Links", "default": "#121212" } ], "role": { "background": { "solid": "background", "gradient": "background_gradient" }, "text": "text", "primary_button": "primary_button", "on_primary_button": "on_primary_button", "primary_button_border": "primary_button_border", "secondary_button": "secondary_button", "on_secondary_button": "on_secondary_button", "secondary_button_border": "secondary_button_border", "icons": "icons", "links": "links" } } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/color-schemes-picker.png">color_scheme_group setting input</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="role">role</h3><a class="article-anchor-link" href="#role"><span class="visuallyhidden">Anchor link to section titled "role"</span></a></div> <p>The <code class="text-highlight text-highlight--grey">role</code> field outputs a color scheme preview. The color scheme previews are visible to merchants anywhere in the editor where they might pick a color scheme. You can assign roles to your color scheme definitions to map the color scheme to the previews. For example you can assign <code class="text-highlight text-highlight--grey">role.background</code> to the <code class="text-highlight text-highlight--grey">Background</code> definition. Role uses the following standardized mapping of the <code class="text-highlight text-highlight--grey">color_scheme_group</code> definition to the color scheme preview:</p> <table> <tr> <th>Role</th> <th>Description</th> <th>Required?</th> <th>Gradient?</th> </tr> <tr> <td> <code>role.background</code> </td> <td>Renders the background color of the preview</td> <td>Yes</td> <td>Optional</td> </tr> <tr> <td> <code>role.text</code> </td> <td>Renders the text color of the preview</td> <td>Yes</td> <td>No</td> </tr> <tr> <td> <code>role.primary_button</code> <code>role.secondary_button</code> </td> <td>Render the 1st and 2nd pills in the preview</td> <td>Yes</td> <td>Optional</td> </tr> <tr> <td> <code>role.primary_button_border</code> <code>role.secondary_button_border</code> </td> <td>Render the 1st and 2nd pills' border in the preview</td> <td>Yes</td> <td>No</td> </tr> <tr> <td> <code>role.on_primary_button</code> <code>role.on_secondary_button</code> </td> <td>Aren't used in the preview</td> <td>Yes</td> <td>No</td> </tr> <tr> <td> <code>role.links</code> <code>role.icons</code> </td> <td>Aren't used in the preview</td> <td>Yes</td> <td>No</td> </tr> </table> <p><img alt="color scheme mapping" src="/assets/themes/settings/specialized/color-scheme-mapping-792b4bfd1f60e6a04874a32faca6780c03759ad3cab979103615045dd5f5f25c.png" /></p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="font_picker">font_picker</h2><a class="article-anchor-link" href="#font_picker"><span class="visuallyhidden">Anchor link to section titled "font_picker"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">font_picker</code> outputs a font picker field that's automatically populated with fonts from the <a href="/docs/storefronts/themes/architecture/settings/fonts#shopify-font-library">Shopify font library</a>. This library includes web-safe fonts, a selection of Google Fonts, and fonts licensed by Monotype.</p> <p>You can use this setting type to capture a font selection for various theme elements, such as the base heading font.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "helvetica_n4" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/font.png">font setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">font_picker</code> type setting, data is returned as a <a href="/docs/api/liquid/objects/font"><code class="text-highlight text-highlight--grey">font</code> object</a>.</p> <aside class="note caution"> <h4>Caution</h4> <p> The <code class="text-highlight text-highlight--grey">default</code> attribute is required. Failing to include it will result in an error. You can find the possible values through the <a href="/docs/storefronts/themes/architecture/settings/fonts#available-fonts">available fonts</a> in the Shopify font library.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="html">html</h2><a class="article-anchor-link" href="#html"><span class="visuallyhidden">Anchor link to section titled "html"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">html</code> outputs a multi-line text field that accepts HTML markup. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">html</code> type settings have the following attribute:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>placeholder</code></td> <td>A placeholder value for the input</td> <td>No</td> </tr> </tbody> </table> <p>You can use this setting type to capture custom blocks of HTML content, such as a video embed.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "html", "id": "video_embed", "label": "Video embed" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/html.png">html setting</script> </div> </p> <p>The following HTML tags will be automatically removed:</p> <ul> <li><code class="text-highlight text-highlight--grey"><html></code></li> <li><code class="text-highlight text-highlight--grey"><head></code></li> <li><code class="text-highlight text-highlight--grey"><body></code></li> </ul> <p>When accessing the value of an <code class="text-highlight text-highlight--grey">html</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a> that contains the entered content.</li> <li>An <a href="/docs/api/liquid/basics/types#emptydrop"><code class="text-highlight text-highlight--grey">empty</code> object</a>, if nothing has been entered.</li> </ul> <aside class="note"> <h4>Note</h4> <p> Unclosed HTML tags are automatically closed when the setting is saved. This may not line up with your intended formatting, so be sure to verify your input.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="image_picker">image_picker</h2><a class="article-anchor-link" href="#image_picker"><span class="visuallyhidden">Anchor link to section titled "image_picker"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">image_picker</code> outputs an image picker field that's automatically populated with the available images from the <a rel="external noreferrer noopener" target="_blank" href="https://help.shopify.com/manual/shopify-admin/productivity-tools/file-uploads">Files</a> section of Shopify admin, and has the option to upload new images. Merchants also have an opportunity to enter alt text and select a <a href="#image-focal-points">focal point</a> for their image.</p> <p>You can use this setting type to capture an image selection, such as logos, favicons, and slideshow images.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "image_picker", "id": "image_with_text_image", "label": "Image" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/image_picker.png">image setting</script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script data-option="title" data-value="Output (Preview and edit modal)"></script> <script type="text/plain" data-image="/assets/themes/settings/specialized/image_editor.png">image setting</script> </div> </p> <p>When accessing the value of an <code class="text-highlight text-highlight--grey">image_picker</code> type setting, data is returned in one of the following formats:</p> <ul> <li>An <a href="/docs/api/liquid/objects/image"><code class="text-highlight text-highlight--grey">image</code> object</a>.</li> <li><a href="/docs/api/liquid/basics/types#nil">nil</a>, if either no selection has been made or the selection no longer exists.</li> </ul> <aside class="note"> <h4>Note</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">image_picker</code> are not updated when switching presets. <code class="text-highlight text-highlight--grey">image_picker</code> settings also don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside><div class="heading-wrapper heading-wrapper-3"><h3 id="image-focal-points">Image focal points</h3><a class="article-anchor-link" href="#image-focal-points"><span class="visuallyhidden">Anchor link to section titled "Image focal points"</span></a></div> <p>Images selected using an <code class="text-highlight text-highlight--grey">image_picker</code> setting support focal points. A focal point is a position in an image that the merchant wants to remain in view as the image is cropped and adjusted by the theme. Focal points can be set in the theme editor <code class="text-highlight text-highlight--grey">image_picker</code> setting, or from the <strong>Files</strong> page.</p> <p>To make sure that your theme respects the focal point of the image, do the following:</p> <ul> <li>Render your images using the <a href="/docs/api/liquid/filters/image_tag"><code class="text-highlight text-highlight--grey">image_tag</code></a> filter.</li> <li>Consider positioning images within containers using <code class="text-highlight text-highlight--grey">object-fit: cover</code>.</li> </ul> <p>Using <code class="text-highlight text-highlight--grey">image_tag</code>, if a focal point was provided, then an <code class="text-highlight text-highlight--grey">object-position</code> style is added to the image tag, with the value set to the focal point.</p> <p> <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked"> <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="Input"></script> <script type="text/plain" data-language="liquid"> {{ section.settings.image_with_text_image | image_url: width: 1500 | image_tag }} </script> </div> </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> </div> <script data-option="filename" data-value="Output"></script> <script type="text/plain" data-language="html"> <img src="octopus-tentacle.jpg?v=1&width=1500" alt="My alt text" srcset="octopus-tentacle.jpg?v=1&width=352 352w, octopus-tentacle.jpg?v=1&width=832 832w, octopus-tentacle.jpg?v=1&width=1200 1200w" width="1500" height="1875" style="object-position:25% 10%;"> </script> </div> </p> <p></div> </p></p> <p>If you need override the <code class="text-highlight text-highlight--grey">object-position</code> style for a specific use case, then pass a <code class="text-highlight text-highlight--grey">style: object-position: inherit;</code> property to the <code class="text-highlight text-highlight--grey">image_tag</code> filter.</p> <aside class="note tip"> <h4>Tip</h4> <p></p> <p>You can also access the focal point data using <a href="/docs/api/liquid/objects/image_presentation#image_presentation-focal_point"><code class="text-highlight text-highlight--grey">image.presentation.focal_point</code></a>.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="inline_richtext">inline_richtext</h2><a class="article-anchor-link" href="#inline_richtext"><span class="visuallyhidden">Anchor link to section titled "inline_richtext"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">inline_richtext</code> outputs HTML markup that isn't wrapped in paragraph tags (<code class="text-highlight text-highlight--grey"><p></code>). The setting includes the following basic formatting options:</p> <ul> <li>Bold</li> <li>Italic</li> <li>Link</li> </ul> <aside class="note"> <h4>Note</h4> <p> The <code class="text-highlight text-highlight--grey">inline_richtext</code> setting doesn't support the following features:</p> <ul> <li>Line breaks (<code class="text-highlight text-highlight--grey"><br></code>)</li> <li>An underline option in the rich text editor. Merchants can underline text using the <code class="text-highlight text-highlight--grey">CMD</code>+<code class="text-highlight text-highlight--grey">U</code> or <code class="text-highlight text-highlight--grey">CTRL</code>+<code class="text-highlight text-highlight--grey">U</code> keyboard shortcut.</li> </ul> </aside> <p>You can use this setting type to capture formatted text content, such as introductory brand content on the homepage.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "inline_richtext", "id": "inline", "default": "my <i>inline</i> <b>text</b>", "label": "Inline rich text" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/inline-richtext.png">inline_richtext setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">inline_richtext</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a> that contains the entered content.</li> <li>An <a href="/docs/api/liquid/basics/types#emptydrop"><code class="text-highlight text-highlight--grey">empty</code> object</a>, if nothing has been entered.</li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="link_list">link_list</h2><a class="article-anchor-link" href="#link_list"><span class="visuallyhidden">Anchor link to section titled "link_list"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">link_list</code> outputs a menu picker field that's automatically populated with the available menus for the store. You can use this setting type to capture a menu selection, such as the menu to use for footer links.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "link_list", "id": "menu", "label": "Menu" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/link_list.png">link_list setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">link_list</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/objects/linklist"><code class="text-highlight text-highlight--grey">linklist</code> object</a>.</li> <li><code class="text-highlight text-highlight--grey">blank</code>, if either no selection has been made or the selection no longer exists.</li> </ul> <aside class="note"> <h4>Note</h4> <p> Accepted values for the <code class="text-highlight text-highlight--grey">default</code> attribute are <code class="text-highlight text-highlight--grey">main-menu</code> and <code class="text-highlight text-highlight--grey">footer</code>.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="liquid">liquid</h2><a class="article-anchor-link" href="#liquid"><span class="visuallyhidden">Anchor link to section titled "liquid"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">liquid</code> outputs a multi-line text field that accepts HTML and <a href="#limitations">limited</a> Liquid markup. You can use this setting type to capture custom blocks of HTML and Liquid content, such as a product-specific message. Merchants can also use a liquid setting to add the code needed to integrate certain types of <a href="/docs/apps/build/online-store">apps</a> into your theme.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "liquid", "id": "battery_message", "label": "Battery message", "default": "{% if product.tags contains 'battery' %}This product can only be shipped by ground.{% else %}This product can be shipped by ground or air.{% endif %}" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/liquid.png">liquid setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">liquid</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a> that contains the entered content.</li> <li>An <a href="/docs/api/liquid/basics/types#emptydrop"><code class="text-highlight text-highlight--grey">empty</code> object</a>, if nothing has been entered.</li> </ul> <aside class="note"> <h4>Note</h4> <p> The <code class="text-highlight text-highlight--grey">default</code> attribute is optional. However, if you use it, then its value can't be an empty string. Additionally, unclosed HTML tags are automatically closed when the setting is saved. This might not line up with your intended formatting, so be sure to verify your input.</p> </aside><div class="heading-wrapper heading-wrapper-3"><h3 id="limitations">Limitations</h3><a class="article-anchor-link" href="#limitations"><span class="visuallyhidden">Anchor link to section titled "Limitations"</span></a></div> <p>Settings of type <code class="text-highlight text-highlight--grey">liquid</code> don't have access to the following liquid objects/tags:</p> <ul> <li><a href="/docs/api/liquid/tags/layout">layout</a></li> <li><a href="/docs/api/liquid/objects/content_for_header">content_for_header</a></li> <li><a href="/docs/api/liquid/objects/content_for_layout">content_for_layout</a></li> <li><a href="/docs/api/liquid/objects/content_for_index">content_for_index</a></li> <li><a href="/docs/api/liquid/tags/section">section</a></li> <li><a href="/docs/storefronts/themes/architecture/sections/section-assets#javascript">javascript</a></li> <li><a href="/docs/storefronts/themes/architecture/sections/section-assets#stylesheet">stylesheet</a></li> <li><a href="/docs/storefronts/themes/architecture/sections/section-schema">schema</a></li> <li><a href="/docs/api/liquid/objects/settings">settings</a></li> </ul> <p>However, <code class="text-highlight text-highlight--grey">liquid</code> settings can access the following:</p> <ul> <li><a href="/docs/api/liquid/objects">Global Liquid objects</a></li> <li>Template specific objects like <code class="text-highlight text-highlight--grey">collection</code>, <code class="text-highlight text-highlight--grey">product</code>, etc. (within their respective templates)</li> <li>Standard Liquid <a href="/docs/api/liquid/tags">tags</a> and <a href="/docs/api/liquid/filters">filters</a></li> </ul> <p>If your content includes non-existent, or empty, Liquid tags, then they will be rendered as empty strings. For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "liquid", "id": "message", "label": "Message", "default": "Hello {{ not_a_real_tag }}, welcome to our shop." } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="text"> Hello , welcome to our shop. </script> </div> </p> <aside class="note caution"> <h4>Caution</h4> <p> Content entered in these settings can't exceed 50kb. Saving content that either exceeds this limit or includes invalid Liquid will result in an error.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="metaobject">metaobject</h2><a class="article-anchor-link" href="#metaobject"><span class="visuallyhidden">Anchor link to section titled "metaobject"</span></a></div> <p>A <code class="text-highlight text-highlight--grey">metaobject</code> setting allows merchants to select metaobject entries of a designated type through a picker interface. This setting supports both standard and custom metaobject definitions:</p> <ol> <li>Standard metaobject definitions: These are readily available in the theme editor and do not need to be pre-enabled on a shop. An example of a standard metaobject is the <code class="text-highlight text-highlight--grey">product_review</code> metaobject. <a href="/docs/apps/build/custom-data/metaobjects/list-of-standard-definitions">Learn more</a> about current standard metaobject definitions.</li> <li>Custom metaobject definitions: These are designed for custom themes and require the metaobject definition to already exist. Note that custom metaobject definitions are not allowed in themes listed on the Theme Store. An example of a custom metaobject would be an <code class="text-highlight text-highlight--grey">author</code> metaobject.</li> </ol> <p>Additionally, apps can utilize <code class="text-highlight text-highlight--grey">metaobject</code> settings with their own app-owned metaobject definitions and entries.</p> <p><code class="text-highlight text-highlight--grey">metaobject</code> type settings have the following attributes, in addition to the <a href="#standard-attributes">standard attributes</a> of an input setting:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>metaobject_type</code></td> <td>The metaobject type allowed by the picker.</td> <td>Yes</td> </tr> </tbody> </table> <p>A <code class="text-highlight text-highlight--grey">metaobject</code> setting value can be either of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/objects/metaobject"><code class="text-highlight text-highlight--grey">metaobject</code> object</a></li> <li><code class="text-highlight text-highlight--grey">blank</code> if no selection has been made, the selection isn't visible, or the selection no longer exists</li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="standard-metaobject-example">Standard metaobject example</h3><a class="article-anchor-link" href="#standard-metaobject-example"><span class="visuallyhidden">Anchor link to section titled "Standard metaobject example"</span></a></div> <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> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "metaobject", "id": "my_material_setting", "label": "Material", "metaobject_type": "shopify--material" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/metaobject.png">metaobject setting</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="custom-metaobject-example">Custom metaobject example</h3><a class="article-anchor-link" href="#custom-metaobject-example"><span class="visuallyhidden">Anchor link to section titled "Custom metaobject example"</span></a></div> <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> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "metaobject", "id": "my_artist", "label": "Artist", "metaobject_type": "artist" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/metaobject-custom.png">metaobject setting</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="limitations">Limitations</h3><a class="article-anchor-link" href="#limitations"><span class="visuallyhidden">Anchor link to section titled "Limitations"</span></a></div> <ul> <li>Only a single <code class="text-highlight text-highlight--grey">metaobject_type</code> is supported at a time, as defined in the setting's schema.</li> <li>In order for themes to meet <a href="/docs/storefronts/themes/store/requirements#13-settings">publishing guidelines</a> for the Shopify Theme Store, only standard definitions can be used. Custom or app owned definitions cannot be used.</li> <li>When referencing a <strong>custom</strong> or <strong>app created</strong> <code class="text-highlight text-highlight--grey">metaobject_type</code>, the definition must exist on the shop and be available to the storefront. If either condition isn't met, the setting will show an error in the theme editor.<br><img alt="metaobject-missing-definition" src="/assets/themes/settings/specialized/metaobject-missing-definition-09e36981d66790e922f42a3a446937bbe3ee71e25ba958529495a69628d57bfd.png" /></li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="usage-in-apps">Usage in apps</h3><a class="article-anchor-link" href="#usage-in-apps"><span class="visuallyhidden">Anchor link to section titled "Usage in apps"</span></a></div> <p>Apps can leverage <code class="text-highlight text-highlight--grey">metaobject</code> settings in their app blocks or embeds to enhance theme functionality. By creating metaobject definitions under <a href="/docs/apps/build/custom-data/reserved-prefixes#create-a-metaobject-definition-under-a-reserved-type">reserved namespaces</a>, apps can offer advanced configuration options for merchants while maintaining a simple user experience.</p> <p>Consider an app designed to improve brand storytelling through customer testimonials. Here's a potential implementation:</p> <ol> <li>Create a custom metaobject definition named <code class="text-highlight text-highlight--grey">Customer Testimonial</code></li> <li>Use app blocks to collect customer data on a post-purchase page</li> <li>Write this data as <code class="text-highlight text-highlight--grey">Customer Testimonial</code> metaobject entries</li> <li>Provide a <code class="text-highlight text-highlight--grey">Testimonial</code> app block with a <code class="text-highlight text-highlight--grey">metaobject</code> setting that uses the <code class="text-highlight text-highlight--grey">Customer Testimonial</code> metaobject type</li> <li>Access the <code class="text-highlight text-highlight--grey">metaobject</code> setting value in Liquid to display the selected testimonials</li> </ol> <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> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "metaobject", "id": "my_testimonial", "label": "Testimonial", "metaobject_type": "app--<appid>-testimonial" } </script> </div> </p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="metaobject_list">metaobject_list</h2><a class="article-anchor-link" href="#metaobject_list"><span class="visuallyhidden">Anchor link to section titled "metaobject_list"</span></a></div> <p>A <code class="text-highlight text-highlight--grey">metaobject_list</code> setting allows merchants to select multiple metaobject entries of a designated type through a picker interface. This setting supports both standard and custom metaobject definitions:</p> <ol> <li>Standard metaobject definitions: These are readily available in the theme editor and do not need to be pre-enabled on a shop. An example of a standard metaobject is the <code class="text-highlight text-highlight--grey">product_review</code> metaobject. <a href="/docs/apps/build/custom-data/metaobjects/list-of-standard-definitions">Learn more</a> about current standard metaobject definitions.</li> <li>Custom metaobject definitions: These are designed for custom themes and require the metaobject definition to already exist. Note that custom metaobject definitions are not allowed in themes listed on the Theme Store. An example of a custom metaobject would be an <code class="text-highlight text-highlight--grey">author</code> metaobject.</li> </ol> <p>Additionally, apps can utilize <code class="text-highlight text-highlight--grey">metaobject_list</code> settings with their own app-owned metaobject definitions and entries.</p> <p><code class="text-highlight text-highlight--grey">metaobject_list</code> type settings have the following attributes, in addition to the <a href="#standard-attributes">standard attributes</a> of an input setting:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>limit</code></td> <td>The maximum number of products that the merchant can select. The default limit, and the maximum limit you can set, is 50.</td> <td>No</td> </tr> <tr> <td><code>metaobject_type</code></td> <td>The metaobject type allowed by the picker.</td> <td>Yes</td> </tr> </tbody> </table> <p>A <code class="text-highlight text-highlight--grey">metaobject_list</code> setting value can be either of the following formats:</p> <ul> <li><p>An array of <a href="/docs/api/liquid/objects/metaobject"><code class="text-highlight text-highlight--grey">metaobject</code> objects</a></p> <p>The array supports pagination using the <a href="/docs/api/liquid/tags/paginate#paginate-paginating-setting-arrays">paginate</a> tag. You can also append <code class="text-highlight text-highlight--grey">.count</code> to the <a href="/docs/storefronts/themes/architecture/settings#access-settings">setting key</a> to return the number of metaobject entries in the array.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code> if no selection has been made, the selection isn't visible, or the selection no longer exists</p></li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="standard-metaobject-list-example">Standard metaobject list example</h3><a class="article-anchor-link" href="#standard-metaobject-list-example"><span class="visuallyhidden">Anchor link to section titled "Standard metaobject list example"</span></a></div> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "metaobject_list", "id": "my_material_list_setting", "label": "Materials", "metaobject_type": "shopify--material", "limit": 12 } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/metaobject-list.png">metaobject_list setting</script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/metaobject-list-detail.png">metaobject_list setting selector</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="custom-metaobject-list-example">Custom metaobject list example</h3><a class="article-anchor-link" href="#custom-metaobject-list-example"><span class="visuallyhidden">Anchor link to section titled "Custom metaobject list example"</span></a></div> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "metaobject_list", "id": "my_artist_list", "label": "Artists", "metaobject_type": "artist", "limit": 12 } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/metaobject-list-custom.png">metaobject_list setting</script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/metaobject-list-detail-custom.png">metaobject_list setting selector</script> </div> </p> <div class="heading-wrapper heading-wrapper-3"><h3 id="limitations">Limitations</h3><a class="article-anchor-link" href="#limitations"><span class="visuallyhidden">Anchor link to section titled "Limitations"</span></a></div> <ul> <li>Only a single <code class="text-highlight text-highlight--grey">metaobject_type</code> is supported at a time, as defined in the setting's schema.</li> <li>In order for themes to meet <a href="/docs/storefronts/themes/store/requirements#13-settings">publishing guidelines</a> for the Shopify Theme Store, custom or app owned definitions cannot be used.</li> <li>When referencing a <strong>custom</strong> or <strong>app created</strong> <code class="text-highlight text-highlight--grey">metaobject_type</code>, the definition must exist on the shop and be available to the storefront. If either condition isn't met, the setting will show an error in the theme editor.<br><img alt="metaobject-list-missing-definition" src="/assets/themes/settings/specialized/metaobject-list-missing-definition-5e3e82f8a90e3400d202a2a579dc35c346534c1a092504a10be418f71210f871.png" /></li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="usage-in-apps">Usage in apps</h3><a class="article-anchor-link" href="#usage-in-apps"><span class="visuallyhidden">Anchor link to section titled "Usage in apps"</span></a></div> <p>Apps can leverage <code class="text-highlight text-highlight--grey">metaobject_list</code> settings in their app blocks or embeds to enhance theme functionality. By creating metaobject definitions under <a href="/docs/apps/build/custom-data/reserved-prefixes#create-a-metaobject-definition-under-a-reserved-type">reserved namespaces</a>, apps can offer advanced configuration options for merchants while maintaining a simple user experience. Using the same <a href="#metaobject">example</a> as above, a <code class="text-highlight text-highlight--grey">Testimonials</code> app-block could allow merchants to select multiple testimonial entries. The <code class="text-highlight text-highlight--grey">metaobject_list</code> setting would make this implementation possible.</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "metaobject_list", "id": "my_testimonial_list", "label": "Testimonials list", "metaobject_type": "app--<appid>-testimonial", "limit": 12 } </script> </div> </p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="page">page</h2><a class="article-anchor-link" href="#page"><span class="visuallyhidden">Anchor link to section titled "page"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">page</code> outputs a page picker field that's automatically populated with the available pages for the store. You can use this setting type to capture a page selection, such as the page to feature content for in a size-chart display.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "page", "id": "page", "label": "Page" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/page.png">page setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">page</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>A <a href="/docs/api/liquid/objects/page"><code class="text-highlight text-highlight--grey">page</code> object</a>.</p> <p>To ensure backwards compatibility with <a href="/docs/storefronts/themes/architecture/settings#legacy-resource-based-settings">legacy resource-based settings</a>, outputting the setting directly will return the object's handle.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code>, if no selection has been made, the selection isn't visible, or the selection no longer exists.</p></li> </ul> <aside class="note"> <h4>Note</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">page</code> are not updated when switching presets. <code class="text-highlight text-highlight--grey">page</code> settings also don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="product">product</h2><a class="article-anchor-link" href="#product"><span class="visuallyhidden">Anchor link to section titled "product"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">product</code> outputs a product picker field that's automatically populated with the available products for the store. You can use this setting type to capture a product selection, such as the product to feature on the homepage.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "product", "id": "product", "label": "Product" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/product.png">product setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">product</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>A <a href="/docs/api/liquid/objects/product"><code class="text-highlight text-highlight--grey">product</code> object</a>.</p> <p>To ensure backwards compatibility with <a href="/docs/storefronts/themes/architecture/settings#legacy-resource-based-settings">legacy resource-based settings</a>, outputting the setting directly will return the object's handle.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code> if no selection has been made, the selection isn't visible, or the selection no longer exists</p></li> </ul> <aside class="note"> <h4>Note</h4> <p> Settings of type <code class="text-highlight text-highlight--grey">product</code> are not updated when switching presets. <code class="text-highlight text-highlight--grey">product</code> settings also don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="product_list">product_list</h2><a class="article-anchor-link" href="#product_list"><span class="visuallyhidden">Anchor link to section titled "product_list"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">product_list</code> outputs a product picker field that's automatically populated with the available products for the store. You can use this setting type to capture multiple products, such as a group of products to feature on the homepage.</p> <aside class="note"> <h4>Note</h4> <p> You can only choose from products that are published to the online store and have an <code class="text-highlight text-highlight--grey">active</code> status.</p> </aside> <p>In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">product_list</code> type settings have the following attributes:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>limit</code></td> <td>The maximum number of products that the merchant can select. The default limit, and the maximum limit you can set, is 50.</td> <td>No</td> </tr> </tbody> </table> <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> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "product_list", "id": "product_list", "label": "Products", "limit": 12 } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/product-list.png">product_list setting</script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/product-list-detail.png">product_list setting selector</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">product_list</code> type setting, data is returned in one of the following formats:</p> <ul> <li><p>An array of <a href="/docs/api/liquid/objects/product"><code class="text-highlight text-highlight--grey">product</code> objects</a></p> <p>The array supports pagination using the <a href="/docs/api/liquid/tags/paginate#paginate-paginating-setting-arrays">paginate</a> tag. You can also append <code class="text-highlight text-highlight--grey">.count</code> to the <a href="/docs/storefronts/themes/architecture/settings#access-settings">setting key</a> to return the number of products in the array.</p></li> <li><p><code class="text-highlight text-highlight--grey">blank</code> if no selection has been made, the selection isn't visible, or the selection no longer exists</p></li> </ul> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="richtext">richtext</h2><a class="article-anchor-link" href="#richtext"><span class="visuallyhidden">Anchor link to section titled "richtext"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">richtext</code> outputs a multi-line text field with the following basic formatting options:</p> <ul> <li>Bold</li> <li>Italic</li> <li>Underline</li> <li>Link</li> <li>Paragraph</li> <li>Unordered list</li> </ul> <aside class="note"> <h4>Note</h4> <p> No underline option appears in the rich text component. Merchants can underline text using the <code class="text-highlight text-highlight--grey">CMD</code>+<code class="text-highlight text-highlight--grey">U</code> or <code class="text-highlight text-highlight--grey">CTRL</code>+<code class="text-highlight text-highlight--grey">U</code> keyboard shortcut.</p> </aside> <p>You can use this setting type to capture formatted text content, such as introductory brand content on the homepage.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "richtext", "id": "paragraph", "label": "Paragraph" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/richtext.png">richtext setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">richtext</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a> that contains the entered content.</li> <li>An <a href="/docs/api/liquid/basics/types#emptydrop"><code class="text-highlight text-highlight--grey">empty</code> object</a>, if nothing has been entered.</li> </ul> <div class="heading-wrapper heading-wrapper-3"><h3 id="default">default</h3><a class="article-anchor-link" href="#default"><span class="visuallyhidden">Anchor link to section titled "default"</span></a></div> <p>The <code class="text-highlight text-highlight--grey">default</code> attribute isn't required. However, if it's used, then only <code class="text-highlight text-highlight--grey"><p></code> or <code class="text-highlight text-highlight--grey"><ul></code> tags are supported as top-level elements.</p> <p>The following HTML tags are also supported inside the parent <code class="text-highlight text-highlight--grey"><p></code> tag:</p> <ul> <li><code class="text-highlight text-highlight--grey"><p></code></li> <li><code class="text-highlight text-highlight--grey"><br></code></li> <li><code class="text-highlight text-highlight--grey"><strong></code></li> <li><code class="text-highlight text-highlight--grey"><b></code></li> <li><code class="text-highlight text-highlight--grey"><em></code></li> <li><code class="text-highlight text-highlight--grey"><i></code></li> <li><code class="text-highlight text-highlight--grey"><u></code></li> <li><code class="text-highlight text-highlight--grey"><span></code></li> <li><code class="text-highlight text-highlight--grey"><a></code></li> </ul> <aside class="note caution"> <h4>Caution</h4> <p> Failing to wrap the <code class="text-highlight text-highlight--grey">default</code> content in <code class="text-highlight text-highlight--grey"><p></code> or <code class="text-highlight text-highlight--grey"><ul></code> tags will result in an error.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="text_alignment">text_alignment</h2><a class="article-anchor-link" href="#text_alignment"><span class="visuallyhidden">Anchor link to section titled "text_alignment"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">text_alignment</code> outputs a <code class="text-highlight text-highlight--grey">SegmentedControl</code> field with icons. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">text_alignment</code> type settings support the following attribute:</p> <table> <caption>The additional attributes that the text_alignment type settings supports</caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> <th scope="col">Required</th> </tr> </thead> <tbody> <tr scope="row"> <td>Default</td> <td>The initially selected value. Can be one of <code>left</code>, <code>right</code>, <code>center</code>. The default value is <code>left</code>.</td> <td>No</td> </tr> </tbody> </table> <p>The following default values can't be changed to a different value:</p> <table> <thead> <tr> <th scope="col">Value</th> <th scope="col">Icon presentation</th> </tr> </thead> <tbody> <tr scope="row"> <td>Left</td> <td><img src="/assets/themes/settings/specialized/text-alignment-left.png" /></td> </tr> <tr scope="row"> <td>Right</td> <td><img src="/assets/themes/settings/specialized/text-alignment-right.png" /></td> </tr> <tr scope="row"> <td>Center</td> <td><img src="/assets/themes/settings/specialized/text-alignment-center.png" /></td> </tr> </tbody> </table> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "text_alignment", "id": "alignment", "label": "Text alignment", "default": "center" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/text-alignment.png">text_alignment setting</script> </div> </p> <p>When you access the value of a <code class="text-highlight text-highlight--grey">text_alignment</code> type setting, data is returned as a <a href="/docs/api/liquid/basics/types#string">string</a>.</p> <aside class="note"> <h4>Note</h4> <p> If you don't specify the default attribute, then the <code class="text-highlight text-highlight--grey">left</code> option is selected by default.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="url">url</h2><a class="article-anchor-link" href="#url"><span class="visuallyhidden">Anchor link to section titled "url"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">url</code> outputs a URL entry field where you can manually enter external URLs and relative paths. It also has a picker that's automatically populated with the following available resources for the shop:</p> <ul> <li>Articles</li> <li>Blogs</li> <li>Collections</li> <li>Pages</li> <li>Products</li> </ul> <p>You can use this setting type to capture a URL selection, such as the URL to use for a slideshow button link.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "url", "id": "button_link", "label": "Button link" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/url.png">url setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">url</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a> that contains the selected URL.</li> <li><a href="/docs/api/liquid/basics/types#nil">nil</a>, if nothing has been entered.</li> </ul> <aside class="note"> <h4>Note</h4> <p> Accepted values for the <code class="text-highlight text-highlight--grey">default</code> attribute are <code class="text-highlight text-highlight--grey">/collections</code> and <code class="text-highlight text-highlight--grey">/collections/all</code>.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="video">video</h2><a class="article-anchor-link" href="#video"><span class="visuallyhidden">Anchor link to section titled "video"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">video</code> outputs a video picker that's automatically populated with the available videos from the <a rel="external noreferrer noopener" target="_blank" href="https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads">Files</a> section of the Shopify admin. The merchant also has the option to upload new videos.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="json"> { "type": "video", "id": "video", "label": "A Shopify-hosted video" } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/video.png">video setting</script> </div> </p> <p>The <code class="text-highlight text-highlight--grey">video</code> type setting also accepts metafields of type <code class="text-highlight text-highlight--grey">file_reference</code> as a <a href="/docs/storefronts/themes/architecture/settings/dynamic-sources">dynamic source</a>.</p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">video</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/objects#video"><code class="text-highlight text-highlight--grey">video</code> object</a>.</li> <li><a href="/docs/api/liquid/basics/types#nil">nil</a>, if: <ul> <li>no selection has been made,</li> <li>the selection no longer exists, or</li> <li>the selection is a <code class="text-highlight text-highlight--grey">file_reference</code> metafield that points to a non-video file.</li> </ul></li> </ul> <aside class="note"> <h4>Note</h4> <p> <code class="text-highlight text-highlight--grey">video</code> settings don't support the <code class="text-highlight text-highlight--grey">default</code> attribute.</p> </aside></section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="video_url">video_url</h2><a class="article-anchor-link" href="#video_url"><span class="visuallyhidden">Anchor link to section titled "video_url"</span></a></div> <p>A setting of type <code class="text-highlight text-highlight--grey">video_url</code> outputs a URL entry field. In addition to the <a href="#standard-attributes">standard attributes</a> of an input setting, <code class="text-highlight text-highlight--grey">video_url</code> type settings have the following attributes:</p> <table> <thead> <tr> <th>Attribute</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td><code>accept</code></td> <td>Takes an array of accepted video providers. Valid values are <code>youtube</code>, <code>vimeo</code>, or both.</td> <td>Yes</td> </tr> <tr> <td><code>placeholder</code></td> <td>A placeholder value for the input.</td> <td>No</td> </tr> </tbody> </table> <p>this setting type can be used to capture a video URL from YouTube and/or Vimeo, such as the URL for a static video to show in the product description.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-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="Setting"></script> <script type="text/plain" data-language="json"> { "type": "video_url", "id": "product_description_video", "label": "Product description video", "accept": [ "youtube", "vimeo" ] } </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/settings/specialized/video_url.png">video_url setting</script> </div> </p> <p>When accessing the value of a <code class="text-highlight text-highlight--grey">video_url</code> type setting, data is returned in one of the following formats:</p> <ul> <li>A <a href="/docs/api/liquid/basics/types#string">string</a> that contains the entered URL.</li> <li><a href="/docs/api/liquid/basics/types#nil">nil</a>, if nothing has been entered.</li> </ul> <p>Additionally, there's access to the <code class="text-highlight text-highlight--grey">id</code> and <code class="text-highlight text-highlight--grey">type</code> (YouTube or Vimeo) of the video.</p> <p>For example, assuming you're using <a rel="external noreferrer noopener" target="_blank" href="https://www.youtube.com/watch?v=_9VUPq3SxOc">this video</a> with the above setting, the following Liquid generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Setting"></script> <script type="text/plain" data-language="liquid"> ID: {{ settings.product_description_video.id }} Type: {{ settings.product_description_video.type }} </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="none"> ID: _9VUPq3SxOc Type: youtube </script> </div> </p> </section><section class="feedback-section"><div class="heading-wrapper heading-wrapper-2"><h2 id="create-links">Create links</h2><a class="article-anchor-link" href="#create-links"><span class="visuallyhidden">Anchor link to section titled "Create links"</span></a></div> <p>You can <a rel="external noreferrer noopener" target="_blank" href="https://www.markdownguide.org/basic-syntax/#links">add links</a> to the <code class="text-highlight text-highlight--grey">info</code> settings attribute by enclosing the link text in brackets and then following it immediately with the URL in parentheses.</p> <p>For example, the following setting generates the following output:</p> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Settings"></script> <script type="text/plain" data-language="json"> { "type": "checkbox", "id": "enable_payment_button", "label": "Show dynamic checkout button", "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/online-store/dynamic-checkout)", "default": true }, </script> </div> </p> <p> <div class="react-code-block" data-preset="output"> <div class="react-code-block-preload "> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> </div> </div> <script type="text/plain" data-image="/assets/themes/setting-link.png">link setting</script> </div> </p> </section> <div id="FeedbackFloatingAnchor" class="feedback-floating-anchor"></div> </article> <div class="hide--mobile hide--tablet"> <div id="FeedbackLauncherModal"></div> </div> <div class="hide--desktop"> <div id="FeedbackLauncherPage"></div> </div> </div> <div class="grid__item grid__item--desktop-up-third grid__item--wide-up-quarter grid__item--toc"> <div class='toc-container'> <h3 class='toc__heading'>On this page</h3> <div class="toc"> <ul class="toc__list"> <li><a href="#standard-attributes">Standard attributes</a></li><li><a href="#basic-input-settings">Basic input settings</a></li><li><a href="#checkbox">checkbox</a></li><li><a href="#number">number</a></li><li><a href="#radio">radio</a></li><li><a href="#range">range</a></li><li><a href="#select">select</a></li><li><a href="#text">text</a></li><li><a href="#textarea">textarea</a></li><li><a href="#specialized-input-settings">Specialized input settings</a></li><li><a href="#article">article</a></li><li><a href="#blog">blog</a></li><li><a href="#collection">collection</a></li><li><a href="#collection_list">collection_list</a></li><li><a href="#color">color</a></li><li><a href="#color_background">color_background</a></li><li><a href="#color_scheme">color_scheme</a></li><li><a href="#color_scheme_group">color_scheme_group</a></li><li><a href="#font_picker">font_picker</a></li><li><a href="#html">html</a></li><li><a href="#image_picker">image_picker</a></li><li><a href="#inline_richtext">inline_richtext</a></li><li><a href="#link_list">link_list</a></li><li><a href="#liquid">liquid</a></li><li><a href="#metaobject">metaobject</a></li><li><a href="#metaobject_list">metaobject_list</a></li><li><a href="#page">page</a></li><li><a href="#product">product</a></li><li><a href="#product_list">product_list</a></li><li><a href="#richtext">richtext</a></li><li><a href="#text_alignment">text_alignment</a></li><li><a href="#url">url</a></li><li><a href="#video">video</a></li><li><a href="#video_url">video_url</a></li><li><a href="#create-links">Create links</a></li> </ul> </div> </div> </div></div> </main> </div> </div> <script> //<![CDATA[ window.I18n = window.I18n || {}; window.I18n.data = {"modal":{"home":"Home","close":"Close"},"signup":{"header":"Start your free %{trial_length}-day trial of Shopify","custom_header":"%{custom_signup_header}","create_now":"Create your store","labels":{"email":"Email address","password":"Password","storename":"Store name","shop_name":"Your store name","promotional_program_promo_code":"Discount code","subdomain":"Store URL"},"subtitles":{"shop_name":"This can be changed later.","promotional_program_promo_code":"Enter the promo code that was provided to you.","subdomain":"This will be the default domain for your store, but you can add different domains later. You'll also use your Store URL to log in."},"placeholders":{"password":"Minimum 5 characters"},"success_messages":{"email":"Got it","password":"Looks great","shop_name":"That name is available!","subdomain":"You‘ll use this to log in to your store"},"store_address_suffix":".myshopify.com","hint_messages":{"email_typo_html":"Did you mean \u003cbutton type=\"button\" data-bind-event-click=\"%{on_click}\"\u003e%{suggestion}\u003c/button\u003e?"},"partners_input_label":"Email address","partners_input_placeholder":"Enter your email","submit":"Sign up","signup_html":"Sign up as a Shopify Partner to get a free API\u0026nbsp;key."},"forms":{"errors":{"throttled":"Too many requests from this IP, try again later.","global":{"invalid":"Please enter a valid email address","required":"This field is required.","generic":"Sorry, something went wrong. Please try again later.","throttled":"Too many requests from this IP, try again later."},"shop_name":{"empty":"Please enter a store name","minlength":"Your store name must be at least 4 characters","maxlength":"Your store name can’t be longer than 60 characters","existingAdmin":"A store with that name already exists. If you are the owner you can \u003ca href=\"https://%{err}/admin\"\u003elog in here\u003c/a\u003e","message":"%{err}","matchesPassword":"Your store name can’t be the same as your password","disallowed":"Your store name can’t contain the word \u003cstrong\u003e%{err}\u003c/strong\u003e. Try another."},"email":{"empty":"Please enter an email address","invalid":"Please enter a valid email address","member_exists":"You are already subscribed to this list","generic":"Sorry, something went wrong. Please try again later."},"password":{"empty":"Please enter a password","minlength":"Password must be at least 5 characters","spaces":"Password cannot start or end with a space"},"subdomain":{"empty":"Please enter a subdomain","minlength":"Your subdomain must be at least 4 characters","multiple":"Multiple subdomains are associated with this email","suggest":"Did you mean %{err}?","invalid":"Please enter a valid subdomain","existingAdmin":"A store with that subdomain already exists. If you are the owner you can \u003ca href=\"https://%{err}/admin\"\u003elog in here\u003c/a\u003e","disallowed":"Your subdomain can’t contain the word \u003cstrong\u003e%{err}\u003c/strong\u003e. Try another.","message":"%{err}"},"promotional_program_promo_code":{"message":"%{err}"}}},"search":{"title":"Search","placeholder":"Search","label":"Search the documentation","suggestions_available":"Suggestions are available. Use up and down arrows to select a suggestion and enter key to use it.","no_suggestions_available":"No suggestions are available for this search term. Try a different search term.","instructions":"As you start typing, we might suggest common search terms. Use up and down arrow keys to select a search term.","submit":"Search Submit button","up_down_navigation_html":"%{up_icon}%{down_icon} arrows to navigate","up":"Up","down":"Down","enter_to_select":"Enter to select","escape_to_close":"Escape to close","instructions_html":"Press %{up_icon}%{down_icon} to navigate, %{enter} to select, %{esc} to dismiss","enter":"enter","esc":"esc","no_results":"No results","try_another_search_term":"Try another search term","could_not_be_completed":"Your search couldn’t be completed","try_again_later":"Please try again later"},"feedback":{"meta":{"title":"Share Feedback","description":"Share Feedback"},"cta":"share your feedback with us.","question":"How helpful was this page?","submit-message":"Thanks for helping us improve this page!","submit-button":"Submit feedback","ratings":{"0":"Very unhelpful","1":"Somewhat unhelpful","2":"Neither helpful nor unhelpful","3":"Somewhat helpful","4":"Very helpful"},"details":{"like":"What did you like about this page? (optional)","dislike":"What can we do to improve this page? (optional)"},"feedback_form":{"positive":"Yes","negative":"No","question":"Is this page helpful?","default_label":"How could we improve this page?","option_0":{"option":"This isn't what I was looking for.","placeholder":"What were you looking for?"},"option_1":{"option":"There aren't enough examples.","placeholder":"What examples were you looking for?"},"option_2":{"option":"The information is hard to understand.","placeholder":"What was difficult to understand?"},"option_3":{"option":"The information doesn't solve my issue.","placeholder":"What issue were you trying to solve?"},"option_4":{"option":"Other","placeholder":"What can we do to improve this page?"},"thank_you":{"positive":"Thank you for your feedback!","negative":"Thank you for your feedback! Let us know why this wasn't helpful.","submitted":"Thank you for your comments!"}}},"docs":{"markdown":{"meta_description":"Consult complete reference documentation for developing on Shopify. Includes representative code snippets and examples for a variety of client libraries."},"article":{"api_version_selector":{"api_version_name_html":"API version: %{version_handle} %{version_label}","post_unite_api_version_name_html":"%{version_handle} %{version_label}","choose_api_version":"Choose API version","newer_versions_available":{"one":"%{count} newer API version available","other":"%{count} newer API versions available"},"not_supported":"Not supported in this API version."}}},"a11y":{"pause_animations":"Pause animations","aria_label_anchor":"Anchor link","aria_label_dark_mode":"View dark mode","aria_label_light_mode":"View light mode","aria_label_tabs":"%{tab_names} tabs"},"sidebar":{"collapse":"Collapse sidebar","expand":"Expand sidebar","aria_label":"Sidebar","toggle":"Toggle","badges":{"shopify_plus":"Plus","shopify_plus_description":"(Shopify Plus)","beta":"Beta","beta_description":"(Feature beta)","object":"Object","input_object":"Input","mutation":"Mutation","query":"Query","enum":"Enum","interface":"Interface","union":"Union"},"graphql_types":{"overview":"overview","object":"Objects","input_object":"Inputs","mutation":"Mutations","query":"Queries","enum":"Enums","interface":"Interfaces","union":"Unions"},"markdown":{"title":"Docs","links":{"fortest":{"label":"This is needed for testing do not remove","url":"#"}}},"apps_build":{"heading":"Build","getting_started_group":{"group_description":"Getting started","links":{"apps":{"label":"Shopify app platform","url":"/docs/apps/build"},"domains_surfaces":{"label":"App surfaces","url":"/docs/apps/build/app-surfaces"},"scaffold_app":{"label":"Scaffold an app","url":"/docs/apps/build/scaffold-app"},"build_app":{"label":"Build an app","url":"/docs/apps/build/build"},"cli_apps":{"label":"Shopify CLI for apps","children":{"overview":{"label":"About Shopify CLI for apps","url":"/docs/apps/build/cli-for-apps"},"app_structure":{"label":"About app structure","url":"/docs/apps/build/cli-for-apps/app-structure"},"app_configuration":{"label":"About app configuration","url":"/docs/apps/build/cli-for-apps/app-configuration"},"manage_config_files":{"label":"Manage app config files","url":"/docs/apps/build/cli-for-apps/manage-app-config-files"},"ngrok":{"label":"Use ngrok for tunneling during app development","url":"/docs/apps/build/cli-for-apps/use-ngrok-tunneling"},"from_dashboard":{"label":"Migrate a Dashboard-managed app to Shopify CLI","url":"/docs/apps/build/cli-for-apps/migrate-from-dashboard"},"migrate":{"label":"Migrate to the latest Shopify CLI","url":"/docs/apps/build/cli-for-apps/migrate-to-latest-cli"}}}}},"extending_group":{"group_description":"Extending Shopify","links":{"admin":{"label":"Admin","children":{"overview":{"label":"Apps in admin","url":"/docs/apps/build/admin"},"admin_actions_blocks":{"label":"Admin UI extensions","children":{"overview":{"label":"About admin extensions","url":"/docs/apps/build/admin/actions-blocks"},"build_admin_action":{"label":"Build an admin action","url":"/docs/apps/build/admin/actions-blocks/build-admin-action"},"build_admin_block":{"label":"Build an admin block","url":"/docs/apps/build/admin/actions-blocks/build-admin-block"},"connect_extensions":{"label":"Connect admin extensions","url":"/docs/apps/build/admin/actions-blocks/connect-admin-extensions"},"connect_app_backend":{"label":"Connect to your app's backend","url":"/docs/apps/build/admin/actions-blocks/connect-app-backend"},"print_admin_action":{"label":"Build an admin print action","url":"/docs/apps/build/admin/actions-blocks/build-admin-print-action"}}},"link-extensions":{"label":"Admin links (legacy)","children":{"overview":{"label":"About admin links (legacy)","url":"/docs/apps/build/admin/admin-links"},"add_links":{"label":"Add admin links (legacy)","url":"/docs/apps/build/admin/admin-links/add-admin-links"}}}}},"checkout":{"label":"Checkout","children":{"overview":{"label":"Apps in checkout","url":"/docs/apps/build/checkout"},"technologies":{"label":"Technologies for customizing checkout","url":"/docs/apps/build/checkout/technologies"},"start_building":{"label":"Start building for checkout","url":"/docs/apps/build/checkout/start-building"},"custom_data":{"label":"Display custom data","url":"/docs/apps/build/checkout/display-custom-data"},"validation":{"label":"Validation","children":{"overview":{"label":"About cart and checkout validation","url":"/docs/apps/build/checkout/cart-checkout-validation"},"create_client_side_validation":{"label":"Create client-side validation","url":"/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation"},"create_server_side_validation":{"label":"Create server-side validation","url":"/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation"},"create_the_admin_ui":{"label":"Create admin UI validation","url":"/docs/apps/build/checkout/cart-checkout-validation/create-admin-ui-validation"}}},"create_permalinks":{"label":"Create cart permalinks","url":"/docs/apps/build/checkout/create-cart-permalinks"},"styling":{"label":"Styling","children":{"overview":{"label":"About checkout styling","url":"/docs/apps/build/checkout/styling"},"custom_typography":{"label":"Customize typography","url":"/docs/apps/build/checkout/styling/customize-typography"},"favicon":{"label":"Add the favicon","url":"/docs/apps/build/checkout/styling/add-favicon"},"page_elements":{"label":"Customize form controls","url":"/docs/apps/build/checkout/styling/customize-form-controls"},"color":{"label":"Update color settings","url":"/docs/apps/build/checkout/styling/update-color-settings"},"section":{"label":"Customize sections","url":"/docs/apps/build/checkout/styling/customize-sections"}}},"customize-header":{"label":"Customize the header","url":"/docs/apps/build/checkout/customize-header"},"customize-footer":{"label":"Customize the footer","url":"/docs/apps/build/checkout/customize-footer"},"banners_fields":{"label":"Banners and fields","children":{"overview":{"label":"About custom banners and fields","url":"/docs/apps/build/checkout/fields-banners"},"add_banner":{"label":"Add a banner","url":"/docs/apps/build/checkout/fields-banners/add-banner"},"add":{"label":"Add a field","url":"/docs/apps/build/checkout/fields-banners/add-field"},"ux_for_fields":{"label":"UX for fields","url":"/docs/apps/build/checkout/fields-banners/ux-for-fields"}}},"delivery_shipping":{"label":"Delivery and shipping","children":{"overview":{"label":"About delivery and shipping","url":"/docs/apps/build/checkout/delivery-shipping"},"additional_address_fields":{"label":"Convert additional address fields","url":"/docs/apps/build/checkout/delivery-shipping/additional-address-fields"},"delivery_options":{"label":"Rename delivery options","children":{"build_delivery_options":{"label":"Build the delivery options function","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function"},"config":{"label":"Add the configuration","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/add-configuration"},"delivery_ui":{"label":"Build the UI","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/build-ui"},"ux_for_delivery_options":{"label":"UX for delivery options","url":"/docs/apps/build/checkout/delivery-shipping/delivery-options/ux-for-delivery-options"}}},"delivery_methods":{"label":"Customize delivery methods","children":{"date_picker":{"label":"Build a date picker","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/date-picker"},"local_pickup_charges":{"label":"Create local pickup charges","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/create-local-pickup-charges"},"generate_pick_up_points":{"label":"Generate pickup points","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points"},"ux_for_pickup_points":{"label":"UX for pickup points","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-pickup-points"},"ux_for_delivery_methods":{"label":"UX for delivery methods","url":"/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-delivery-methods"}}},"address-autocomplete":{"label":"Customize address autocomplete","children":{"suggest":{"label":"Build a custom address autocomplete extension","url":"/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete"},"format":{"label":"Format suggested addresses","url":"/docs/apps/build/checkout/delivery-shipping/address-autocomplete/format-suggestion"}}}}},"product_offers":{"label":"Product offers","children":{"overview":{"label":"About product offers","url":"/docs/apps/build/checkout/product-offers"},"build_pre_purchase":{"label":"Build a pre-purchase offer","url":"/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer"},"ux_for_pre_purchase":{"label":"UX for pre-purchase offers","url":"/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers"},"build_post_purchase":{"label":"Build a post-purchase offer","url":"/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer"},"subscriptions":{"label":"Create a post-purchase subscription","url":"/docs/apps/build/checkout/product-offers/create-a-post-purchase-subscription"},"ux_for_post_purchase":{"label":"UX for post-purchase offers","url":"/docs/apps/build/checkout/product-offers/ux-for-post-purchase-product-offers"},"subscription":{"label":"UX for post-purchase subscriptions","url":"/docs/apps/build/checkout/product-offers/ux-for-post-purchase-subscriptions"}}},"payments":{"label":"Payments","children":{"overview":{"label":"About payments customizations","url":"/docs/apps/build/checkout/payments"},"getting_started":{"label":"Create the payments function","url":"/docs/apps/build/checkout/payments/create-payments-function"},"config":{"label":"Add the configuration","url":"/docs/apps/build/checkout/payments/add-configuration"},"payments_ui":{"label":"Build the UI","url":"/docs/apps/build/checkout/payments/build-ui"},"ux_for_payments":{"label":"UX for payments","url":"/docs/apps/build/checkout/payments/ux-for-payments"}}},"thank_you_order_status":{"label":"Thank you and Order status","children":{"overview":{"label":"About Thank you and Order status page customizations","url":"/docs/apps/build/checkout/thank-you-order-status"},"add_survey":{"label":"Add a survey","url":"/docs/apps/build/checkout/thank-you-order-status/add-survey"},"ux_for_ty_osp":{"label":"UX for Thank you and Order status pages","url":"/docs/apps/build/checkout/thank-you-order-status/ux-for-thank-you-order-status"}}},"localization":{"label":"Localized UI extensions","children":{"overview":{"label":"About checkout UI extension localization","url":"/docs/apps/build/checkout/localized-checkout-ui-extensions"},"localize_extension":{"label":"Localize a checkout UI extension","url":"/docs/apps/build/checkout/localized-checkout-ui-extensions/localize"}}},"testing":{"label":"Test UI extensions","url":"/docs/apps/build/checkout/test-checkout-ui-extensions"},"multi_page":{"label":"Create multi-page extensions","url":"/docs/apps/build/checkout/create-multi-page-extensions"},"ux_for_checkout":{"label":"UX for checkout","url":"/docs/apps/build/checkout/ux-for-checkout"}}},"customer_accounts":{"label":"Customer accounts","children":{"overview":{"label":"Apps in customer accounts","url":"/docs/apps/build/customer-accounts"},"start_building":{"label":"Start building for customer accounts","url":"/docs/apps/build/customer-accounts/start-building"},"extension_placement":{"label":"Decide on extension placement","url":"/docs/apps/build/customer-accounts/extension-placement"},"ux_for_customer_accounts":{"label":"UX for customer accounts","url":"/docs/apps/build/customer-accounts/ux"},"order_status_page":{"label":"About the Order status page","url":"/docs/apps/build/customer-accounts/order-status-page"},"inline_extensions":{"label":"Inline extensions","children":{"overview":{"label":"About inline extensions","url":"/docs/apps/build/customer-accounts/inline-extensions"},"order_status":{"label":"Build Order status","url":"/docs/apps/build/customer-accounts/inline-extensions/build-order-status"},"profile":{"label":"Build profile","url":"/docs/apps/build/customer-accounts/inline-extensions/build-profile"}}},"pre_auth_order_status_page_extensions":{"label":"Pre-auth Order status page extensions","children":{"overview":{"label":"About pre-auth Order status page extensions","url":"/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions"},"pre_auth_order_status_page_extensions":{"label":"Build pre-auth Order status page extensions","url":"/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions/build-pre-auth-order-status-page-extensions"}}},"order_action_extensions":{"label":"Order action extensions","children":{"overview":{"label":"About order action menus","url":"/docs/apps/build/customer-accounts/order-action-extensions"},"build_order_action_menu_extensions":{"label":"Build for order action menus","url":"/docs/apps/build/customer-accounts/order-action-extensions/build-for-order-action-menus"},"ux_order_actions":{"label":"UX for order actions","url":"/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions"}}},"full_page_extensions":{"label":"Full-page extensions","children":{"overview":{"label":"Add pages to customer accounts","url":"/docs/apps/build/customer-accounts/full-page-extensions"},"build_new_pages":{"label":"Build new pages","url":"/docs/apps/build/customer-accounts/full-page-extensions/build-new-pages"},"ux_for_full_pages":{"label":"UX for full pages","url":"/docs/apps/build/customer-accounts/full-page-extensions/ux-for-full-pages"}}},"metafields":{"label":"Build metafield writes into extensions","url":"/docs/apps/build/customer-accounts/metafields"},"editor_extension_collections":{"feature_flag_enabled":"editor_extension_collections_docs","label":"Editor extension collections","children":{"overview":{"label":"About editor extension collections","url":"/docs/apps/build/customer-accounts/editor-extension-collections"},"getting_started":{"label":"Build an editor extension collection","url":"/docs/apps/build/customer-accounts/editor-extension-collections/build-editor-extension-collection"},"ux_for_editor_collections":{"label":"UX for editor extension collections","url":"/docs/apps/build/customer-accounts/editor-extension-collections/editor-extension-collections-ux-guidelines"}}},"localization":{"label":"Localization","children":{"overview":{"label":"About localizing customer account extensions","url":"/docs/apps/build/customer-accounts/localization"},"localize_extension":{"label":"Localize a customer account extension","url":"/docs/apps/build/customer-accounts/localization/localize"}}},"testing_ui_extensions":{"label":"Test customer account extensions","url":"/docs/apps/build/customer-accounts/test"}}},"flow":{"label":"Flow","children":{"overview":{"label":"About Flow","url":"/docs/apps/build/flow"},"development":{"label":"About Flow development","url":"/docs/apps/build/flow/development"},"triggers":{"label":"Triggers","children":{"overview":{"label":"About triggers","url":"/docs/apps/build/flow/triggers"},"create":{"label":"Create a trigger","url":"/docs/apps/build/flow/triggers/create"},"reference":{"label":"Trigger reference","url":"/docs/apps/build/flow/triggers/reference"}}},"actions":{"label":"Actions","children":{"overview":{"label":"About actions","url":"/docs/apps/build/flow/actions"},"create":{"label":"Create an action","url":"/docs/apps/build/flow/actions/create"},"reference":{"label":"Action reference","url":"/docs/apps/build/flow/actions/reference"},"endpoints":{"label":"Create action endpoints","url":"/docs/apps/build/flow/actions/endpoints"},"build_config_ui":{"label":"Build the configuration UI","url":"/docs/apps/build/flow/actions/build-config-ui"}}},"templates":{"label":"Templates","children":{"overview":{"label":"About templates","url":"/docs/apps/build/flow/templates"},"create":{"label":"Create a template","url":"/docs/apps/build/flow/templates/create-a-template"},"reference":{"label":"Template reference","url":"/docs/apps/build/flow/templates/reference"}}},"track_lifecycle_events":{"label":"Track Flow lifecycle events","url":"/docs/apps/build/flow/track-lifecycle-events"},"migrate_legacy_extensions":{"label":"Migrate legacy Flow extensions","url":"/docs/apps/build/flow/migrate-legacy-extensions"},"configure_complex_types":{"label":"Configure complex data types","url":"/docs/apps/build/flow/configure-complex-data-types"}}},"online_store":{"label":"Online store","children":{"about":{"label":"Apps in the online store","url":"/docs/apps/build/online-store"},"dynamic_data":{"label":"Display dynamic data","url":"/docs/apps/build/online-store/display-dynamic-data"},"theme_app_extensions":{"label":"Theme app extensions","children":{"overview":{"label":"About theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions"},"build_theme_app_extensions":{"label":"Build theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions/build"},"extensions_framework":{"label":"Theme app extension configuration","url":"/docs/apps/build/online-store/theme-app-extensions/configuration"},"ux_for_theme_app_extensions":{"label":"UX for theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions/ux"},"migrate":{"label":"Migrate to theme app extensions","url":"/docs/apps/build/online-store/theme-app-extensions/migrate"}}},"version":{"label":"Verify theme support","url":"/docs/apps/build/online-store/verify-support"},"products":{"label":"Manage media for products","url":"/docs/apps/build/online-store/product-media"},"variants":{"label":"Manage media for product variants","url":"/docs/apps/build/online-store/product-variant-media"},"other_integrations":{"label":"ScriptTag resource (legacy)","url":"/docs/apps/build/online-store/script-tag-legacy"},"asset_api":{"label":"Asset resource (legacy)","url":"/docs/apps/build/online-store/asset-legacy"}}},"point_of_sale":{"label":"Point of Sale","children":{"overview":{"label":"Apps in POS","url":"/docs/apps/build/pos"},"embed_app":{"label":"Embed your app in POS","url":"/docs/apps/build/pos/embed-app-in-pos"},"ui_extensions":{"label":"UI extensions","children":{"overview":{"label":"About POS UI extensions","url":"/docs/api/pos-ui-extensions","stepIn":true},"start_building":{"label":"Start building POS UI extensions","url":"/docs/api/pos-ui-extensions/getting-started","stepIn":true},"build_discount":{"label":"Build a POS discount","url":"/docs/api/pos-ui-extensions/example-discount-extension","stepIn":true},"build_print":{"label":"Build a print extension","url":"/docs/api/pos-ui-extensions/example-print-extension","stepIn":true},"debug":{"label":"Debug POS UI extensions","url":"/docs/api/pos-ui-extensions/debugging","stepIn":true},"communicate_server":{"label":"Communicate with a server","url":"/docs/api/pos-ui-extensions/server-communication","stepIn":true},"troubleshoot":{"label":"Troubleshoot UI extensions","url":"/docs/api/pos-ui-extensions/troubleshooting","stepIn":true}}},"legacy_extensions":{"label":"Legacy extensions","children":{"links":{"label":"POS links (legacy)","url":"/docs/apps/build/pos/links-legacy"},"cart":{"label":"POS cart app extensions (legacy)","url":"/docs/apps/build/pos/cart-legacy"},"recommendations":{"label":"POS product recommendations extension (legacy)","url":"/docs/apps/build/pos/recommendations-legacy"}}}}}}},"use_cases_group":{"group_description":"Use cases","links":{"marketing":{"label":"Marketing and analytics","children":{"overview":{"label":"Apps for marketing and analytics","url":"/docs/apps/build/marketing-analytics"},"pixels":{"label":"About web pixels","url":"/docs/apps/build/marketing-analytics/pixels"},"build-web-pixels":{"label":"Build web pixels","url":"/docs/apps/build/marketing-analytics/build-web-pixels"},"customer_segments":{"label":"Customer segments","children":{"overview":{"label":"About customer segments","url":"/docs/apps/build/marketing-analytics/customer-segments"},"build_template_extension":{"label":"Build a template extension","url":"/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension"},"build_action_extension":{"label":"Build an action extension","url":"/docs/apps/build/marketing-analytics/customer-segments/build-an-action-extension"},"manage_customer_segments":{"label":"Manage customer segments","url":"/docs/apps/build/marketing-analytics/customer-segments/manage"},"saved_searches":{"label":"Migrate saved searches","url":"/docs/apps/build/marketing-analytics/customer-segments/migrate-saved-searches"},"async_queries":{"label":"Migrate to async queries","url":"/docs/apps/build/marketing-analytics/customer-segments/migrate-to-async-queries"}}},"marketing":{"label":"Marketing activities","children":{"overview":{"label":"About marketing activities","url":"/docs/apps/build/marketing-analytics/marketing-activities"},"migrate":{"label":"Migrate marketing activity extensions","url":"/docs/apps/build/marketing-analytics/marketing-activities/migrate-extensions"}}},"automations":{"label":"Marketing automations","children":{"overview":{"label":"About marketing automations","url":"/docs/apps/build/marketing-analytics/automations"},"create_actions":{"label":"Create marketing automation actions","url":"/docs/apps/build/marketing-analytics/automations/create-marketing-automation-actions"},"endpoints":{"label":"List of action endpoints","url":"/docs/apps/build/marketing-analytics/automations/action-endpoints"},"custom-configuration":{"label":"Build a configuration page","url":"/docs/apps/build/marketing-analytics/automations/build-custom-configuration-page"}}},"optimize_seo":{"label":"Optimize SEO","url":"/docs/apps/build/marketing-analytics/optimize-storefront-seo"}}},"discounts":{"label":"Discounts","children":{"overview":{"label":"About discounts","url":"/docs/apps/build/discounts"},"build_discount_function":{"label":"Build a discount function","url":"/docs/apps/build/discounts/build-discount-function"},"experience_ui":{"feature_flag_enabled":"extensions_only_discounts_app","label":"Build a discounts UI with UI extensions","url":"/docs/apps/build/discounts/build-ui-extension"},"experience_remix":{"label":"Build a discounts UI with Remix","url":"/docs/apps/build/discounts/build-ui-with-remix"},"discounts-allocator":{"label":"Build a discounts allocator","url":"/docs/apps/build/discounts/build-discounts-allocator"},"ux_for_discounts":{"label":"UX for discounts","url":"/docs/apps/build/discounts/ux-for-discounts"}}},"product_merchandising":{"label":"Product merchandising","children":{"bundles":{"label":"Product bundles","children":{"overview":{"label":"About product bundles","url":"/docs/apps/build/product-merchandising/bundles"},"start_building":{"label":"Start building bundles","url":"/docs/apps/build/product-merchandising/bundles/start-building"},"add_fixed_bundle":{"label":"Add a fixed bundle","children":{"about-fixed-bundles":{"label":"About fixed bundles","url":"/docs/apps/build/product-merchandising/bundles/add-fixed-bundle"},"add-a-product-fixed-bundle":{"label":"Add a product fixed bundle","url":"/docs/apps/build/product-merchandising/bundles/add-product-fixed-bundle"},"add-a-variant-fixed-bundle":{"label":"Add a variant fixed bundle","url":"/docs/apps/build/product-merchandising/bundles/add-variant-fixed-bundle"}}},"add_customized_bundle":{"label":"Add a customized bundle","url":"/docs/apps/build/product-merchandising/bundles/add-customized-bundle"},"add_merchant_ui":{"label":"Add UI for merchant customization","url":"/docs/apps/build/product-merchandising/bundles/add-merchant-config-ui"},"create":{"label":"Create a bundle app","url":"/docs/apps/build/product-merchandising/bundles/create-bundle-app"},"turn_on_publishing":{"label":"Turn on publishing","url":"/docs/apps/build/product-merchandising/bundles/turn-on-publishing"}}},"combined_listings":{"label":"Combined listings","children":{"overview":{"label":"About combined listings","url":"/docs/apps/build/product-merchandising/combined-listings"},"build_combined_listings":{"label":"Build for combined listings","url":"/docs/apps/build/product-merchandising/combined-listings/build-for-combined-listings"}}}}},"purchase_options":{"label":"Purchase options","children":{"overview":{"label":"About custom purchase options","url":"/docs/apps/build/purchase-options"},"subscriptions":{"label":"Subscriptions","children":{"overview":{"label":"About subscriptions","url":"/docs/apps/build/purchase-options/subscriptions"},"model_subscriptions_solution":{"label":"Model a subscriptions solution","url":"/docs/apps/build/purchase-options/subscriptions/model-subscriptions-solution"},"selling_plans":{"label":"Selling plans","children":{"about_selling_plans":{"label":"About selling plans","url":"/docs/apps/build/purchase-options/subscriptions/selling-plans"},"build_selling_plan":{"label":"Build a selling plan","url":"/docs/apps/build/purchase-options/subscriptions/selling-plans/build-a-selling-plan"}}},"subscription_contracts":{"label":"Subscription contracts","children":{"about_subscription_contracts":{"label":"About subscription contracts","url":"/docs/apps/build/purchase-options/subscriptions/contracts"},"create_contract":{"label":"Build a subscription contract","url":"/docs/apps/build/purchase-options/subscriptions/contracts/build-a-subscription-contract"},"update_contract":{"label":"Update a subscription contract","url":"/docs/apps/build/purchase-options/subscriptions/contracts/update-a-subscription-contract"},"combine":{"label":"Combine subscription contracts","url":"/docs/apps/build/purchase-options/subscriptions/contracts/combine-subscription-contracts"},"subscription_link_extensions":{"feature_flag_enabled":"cli_managed_subscription_link_creation_and_migration","label":"Subscription link extensions","children":{"overview":{"label":"Build a subscription link extension","url":"/docs/apps/build/purchase-options/subscriptions/contracts/subscription-link-extensions/start-building"},"migrate-extension-to-shopify-cli":{"label":"Migrate existing extensions to Shopify CLI","url":"/docs/apps/build/purchase-options/subscriptions/contracts/subscription-link-extensions/migrate-to-cli"}}}}},"billing_cycles":{"label":"Billing cycles","children":{"about_billing_cycles":{"label":"About subscription billing cycles","url":"/docs/apps/build/purchase-options/subscriptions/billing-cycles"},"manage":{"label":"Manage billing cycle contracts","url":"/docs/apps/build/purchase-options/subscriptions/billing-cycles/manage-billing-cycle-contracts"},"bulk":{"label":"Manage billing cycles in bulk","url":"/docs/apps/build/purchase-options/subscriptions/billing-cycles/bulk-billing-cycles"}}},"fulfillments":{"label":"Fulfillments","children":{"about_fulfillments":{"label":"About fulfillment for subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/fulfillments"},"orders":{"label":"Sync orders and subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/fulfillments/sync-orders-subscriptions"},"advanced":{"label":"Manage fulfillments for prepaid subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/fulfillments/manage-subscription-fulfillments"}}},"migrate":{"label":"Migrate to the Subscriptions API","children":{"overview":{"label":"Subscriptions API migration guide","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api"},"customers":{"label":"Migrate customer information","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/migrate-customer-information"},"migrate":{"label":"Migrate existing subscriptions","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/migrate-subscription-contracts"},"ux":{"label":"UX for migration","url":"/docs/apps/build/purchase-options/subscriptions/migrate-to-subscriptions-api/ux-for-migration"}}}}},"pre-orders-tbyb":{"label":"Pre-orders and Try Before You Buy","children":{"overview":{"label":"About pre-orders and Try Before You Buy","url":"/docs/apps/build/purchase-options/deferred"},"modeling":{"label":"Model pre-orders and Try Before You Buy","url":"/docs/apps/build/purchase-options/deferred/model-deferred-purchase-solutions"},"manage_deferred":{"label":"Build a pre-order and Try Before You Buy solution","url":"/docs/apps/build/purchase-options/deferred/build-deferment-solution"},"delivery_and_deferment":{"label":"Delivery and deferment","children":{"overview":{"label":"About delivery for pre-order and Try Before You Buy","url":"/docs/apps/build/purchase-options/deferred/delivery-and-deferment"},"build_delivery_profiles":{"label":"Build delivery profiles","url":"/docs/apps/build/purchase-options/deferred/delivery-and-deferment/build-delivery-profiles"}}},"build_app":{"label":"Building your app","children":{"start_building":{"label":"Start building a pre-order and Try Before You Buy (TBYB) app","url":"/docs/apps/build/purchase-options/deferred/create-deferred-purchase-app/start-building"},"create_ui":{"label":"Create the UI","url":"/docs/apps/build/purchase-options/deferred/create-deferred-purchase-app/create-ui"}}}}},"extensions":{"label":"Product subscription app extensions","children":{"overview":{"label":"About product subscription app extensions","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions"},"start_building":{"label":"Start building product subscription app extensions","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/start-building"},"extension_points":{"label":"Extension points","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/extension-points"},"auth":{"label":"Authenticate app extension requests","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/authenticate-extension-requests"},"create_manage":{"label":"Create and manage app extensions","url":"/docs/apps/build/purchase-options/product-subscription-app-extensions/create-and-manage"}}},"admin_extensions":{"feature_flag_enabled":"purchase_options_extensions","label":"Purchase options extensions","children":{"overview":{"label":"About purchase options extensions","url":"/docs/apps/build/purchase-options/purchase-options-extensions"},"start_building":{"label":"Start building purchase options extensions","url":"/docs/apps/build/purchase-options/purchase-options-extensions/start-building"}}},"portals":{"label":"Build a customer-facing purchase-option portal","children":{"overview":{"label":"About customer-facing portals","url":"/docs/apps/build/purchase-options/customer-portal"},"create_portals":{"label":"Create customer-facing portals","url":"/docs/apps/build/purchase-options/customer-portal/create-customer-portal"}}}}},"markets":{"label":"Global markets","children":{"overview":{"label":"About Shopify Markets","url":"/docs/apps/build/markets"},"catalogs":{"label":"About catalogs for different markets","url":"/docs/apps/build/markets/catalogs-different-markets"},"build_catalog":{"label":"Build a catalog","url":"/docs/apps/build/markets/build-catalog"},"migrate":{"label":"Migrate to catalogs","url":"/docs/apps/build/markets/migrate-to-catalogs"},"translations":{"label":"Manage translated content","url":"/docs/apps/build/markets/manage-translated-content"},"locally_required_order_data":{"label":"Add locally required order data","url":"/docs/apps/build/markets/add-locally-required-order-data"}}},"orders_fulfillment":{"label":"Orders and fulfillment","children":{"overview":{"label":"Apps in orders and fulfillment","url":"/docs/apps/build/orders-fulfillment"},"inventory":{"label":"Inventory management","children":{"overview":{"label":"Apps in inventory management","url":"/docs/apps/build/orders-fulfillment/inventory-management-apps"},"manage_inventory":{"label":"Manage inventory","url":"/docs/apps/build/orders-fulfillment/inventory-management-apps/manage-quantities-states"}}},"orders":{"label":"Order management","children":{"overview":{"label":"Apps in order management","url":"/docs/apps/build/orders-fulfillment/order-management-apps"},"edit_orders":{"label":"Edit existing orders","url":"/docs/apps/build/orders-fulfillment/order-management-apps/edit-orders"},"build_fulfillment_solutions":{"label":"Build fulfillment solutions","url":"/docs/apps/build/orders-fulfillment/order-management-apps/build-fulfillment-solutions"},"track_orders":{"label":"Track orders on other platforms","url":"/docs/apps/build/orders-fulfillment/order-management-apps/track-orders-other-platforms"}}},"order_routing":{"label":"Order routing and fulfillment","children":{"overview":{"label":"Apps in order routing","url":"/docs/apps/build/orders-fulfillment/order-routing-apps"},"location-rules":{"label":"Location rules","children":{"overview":{"label":"About location rules","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules"},"build_function":{"label":"Build a location rule function","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function"},"add_configuration":{"label":"Add configuration","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/add-configuration"},"build_ui":{"label":"Build the UI","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-ui"}}},"fulfillment-constraints":{"label":"Build fulfillment constraints","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints"},"build_local_pickup_options":{"label":"Build local pickup options","url":"/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options"}}},"service":{"label":"Fulfillment services","children":{"overview":{"label":"About fulfillment services","url":"/docs/apps/build/orders-fulfillment/fulfillment-service-apps"},"build_fulfillment_services":{"label":"Build for fulfillment services","url":"/docs/apps/build/orders-fulfillment/fulfillment-service-apps/build-for-fulfillment-services"}}},"returns":{"label":"Returns","children":{"overview":{"label":"Apps in returns","url":"/docs/apps/build/orders-fulfillment/returns-apps"},"build_return_management":{"label":"Build for return management","url":"/docs/apps/build/orders-fulfillment/returns-apps/build-return-management"},"manage_exchanges":{"label":"Manage exchanges","url":"/docs/apps/build/orders-fulfillment/returns-apps/manage-exchanges"},"view_refund_duties":{"label":"View and refund duties","url":"/docs/apps/build/orders-fulfillment/returns-apps/view-and-refund-duties"},"manage_reverse_fulfillment":{"label":"Manage reverse fulfillment orders","url":"/docs/apps/build/orders-fulfillment/returns-apps/manage-reverse-fulfillment-orders"},"manage_reverse_deliveries":{"label":"Manage reverse deliveries","url":"/docs/apps/build/orders-fulfillment/returns-apps/manage-reverse-deliveries"}}},"migrate":{"label":"Migrate to fulfillment orders","url":"/docs/apps/build/orders-fulfillment/migrate-to-fulfillment-orders"}}},"payments":{"label":"Payments","children":{"overview":{"label":"Payments extensions","url":"/docs/apps/build/payments"},"requirements":{"label":"Requirements for payments extensions","url":"/docs/apps/build/payments/requirements"},"approval":{"label":"Get approved for payments","url":"/docs/apps/build/payments/payments-extension-review"},"build":{"label":"Build a payments extension","children":{"processing-overview":{"label":"About payment processing","url":"/docs/apps/build/payments/processing"},"build-offsite":{"label":"Build an offsite payments extension","children":{"tutorial":{"label":"Use Shopify CLI","url":"/docs/apps/build/payments/offsite/use-the-cli"}}},"credit-card":{"label":"Build a credit card payments extension","children":{"tutorial":{"label":"Use Shopify CLI","url":"/docs/apps/build/payments/credit-card/use-the-cli"},"manage-encryption-certificates":{"label":"Manage encryption certificates","url":"/docs/apps/build/payments/credit-card/manage-encryption-certificates"},"test-certificate":{"label":"Configure test certificate","url":"/docs/apps/build/payments/credit-card/test-certificate"},"extensibility-tutorial":{"label":"Build with UI extensibility","url":"/docs/apps/build/payments/credit-card/with-extensibility"},"custom-credit-card":{"label":"Build a Shopify custom credit card payments extension","url":"/docs/apps/build/payments/credit-card/custom/use-the-cli"}}},"alternative":{"label":"Build an alternative payments extension","url":"/docs/apps/build/payments/alternative/build-an-alternative-payment-extension"},"redeemable":{"label":"Build a redeemables payments extension","url":"/docs/apps/build/payments/redeemables/build-a-redeemables-payment-extension"},"implementation":{"label":"Implementation considerations","url":"/docs/apps/build/payments/considerations"},"request-reference":{"label":"Request reference","url":"/docs/apps/build/payments/request-reference"}}},"onboard":{"label":"Onboard merchants to your extension","url":"/docs/apps/build/payments/onboard-a-merchant-payments-extension"},"migrate-extensions-to-shopify-cli":{"label":"Migrate extensions to Shopify CLI","url":"/docs/apps/build/payments/migrate-extensions-to-shopify-cli"}}},"sales_channels":{"label":"Sales channels","children":{"overview":{"label":"Apps as sales channels","url":"/docs/apps/build/sales-channels"},"start_building":{"label":"Start building a sales channel","url":"/docs/apps/build/sales-channels/start-building"},"product_sync":{"label":"Product sync","url":"/docs/apps/build/sales-channels/product-sync"},"contextual_product_feeds":{"label":"Contextual Product Feeds","url":"/docs/apps/build/sales-channels/contextual-product-feeds"},"scheduled_publishing":{"label":"About scheduled publishing","url":"/docs/apps/build/sales-channels/scheduled-product-publishing"},"enable":{"label":"Enable scheduled publishing","url":"/docs/apps/build/sales-channels/enable-scheduled-publishing"}}},"b2b":{"label":"B2B","children":{"overview":{"label":"Apps and B2B","url":"/docs/apps/build/b2b"},"start_building":{"label":"Start building for B2B","url":"/docs/apps/build/b2b/start-building"},"manage_client_companies":{"label":"Manage client company locations","url":"/docs/apps/build/b2b/manage-client-company-locations"},"manage_catalogs":{"label":"Manage B2B catalogs","url":"/docs/apps/build/b2b/manage-catalogs"},"draft_orders":{"label":"Use draft orders","url":"/docs/apps/build/b2b/draft-orders"},"b2b_checkout_ui":{"label":"Create B2B checkout UI","url":"/docs/apps/build/b2b/create-checkout-ui"}}},"blockchain":{"label":"Blockchain","children":{"overview":{"label":"Apps in blockchain","url":"/docs/apps/build/blockchain"},"nft_distribution":{"label":"NFT distribution","children":{"overview":{"label":"About NFT distribution","url":"/docs/apps/build/blockchain/nft-distribution"},"nft_eligibility":{"label":"Check NFT sales eligibility","url":"/docs/apps/build/blockchain/nft-distribution/check-nft-sales-eligibility"},"merchant_eligibility":{"label":"Check merchant eligibility","url":"/docs/apps/build/blockchain/nft-distribution/check-merchant-eligibility"},"nft_distribution_ux_guidelines":{"label":"UX for NFT distribution","url":"/docs/apps/build/blockchain/nft-distribution/ux-for-nft-distribution"}}},"tokengating":{"label":"Tokengating","children":{"overview":{"label":"About tokengating","url":"/docs/apps/build/blockchain/tokengating"},"build-a-tokengating-app":{"label":"Build a tokengating app","children":{"overview":{"label":"Apps for tokengating","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app"},"creates_gates_admin":{"label":"Create gates","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gates-admin"},"show_gates_storefront":{"label":"Show gates","url":"/docs/apps/selling-strategies/blockchain/tokengating/build-a-tokengating-app/show-gates-storefront"},"shopify_function_gate_reaction":{"label":"Create the gated discount function","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gated-discount-function"}}},"build_a_tokengated_storefront":{"label":"Build a tokengated storefront","children":{"overview":{"label":"About tokengated storefronts","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront"},"start_building":{"label":"Start building a tokengated storefront","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/start-building"},"save_wallet_to_session":{"label":"Save a connected wallet to session storage","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/save-wallet-to-session"},"read_and_evaluate_gates":{"label":"Read and evaluate gates","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/read-and-evaluate-gates"},"write_gate_context_to_cart_attributes":{"label":"Write gate context to cart attributes","url":"/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/write-gate-context-to-cart-attributes"}}},"ux_for_tokengating":{"label":"UX for tokengating","url":"/docs/apps/build/blockchain/tokengating/ux-for-tokengating"}}}}}}},"best_practices_group":{"group_description":"Best practices","links":{"performance":{"label":"Performance","children":{"overview":{"label":"About performance optimization","url":"/docs/apps/build/performance"},"general":{"label":"General app performance","url":"/docs/apps/build/performance/general-best-practices"},"admin":{"label":"Admin, installation, and OAuth performance","url":"/docs/apps/build/performance/admin-installation-oauth"},"storefront":{"label":"Storefront performance","url":"/docs/apps/build/performance/storefront"},"checkout":{"label":"Checkout performance","url":"/docs/apps/build/performance/checkout"}}},"accessibility":{"label":"Accessibility","url":"/docs/apps/build/accessibility"},"internationalization":{"label":"Localize your app","url":"/docs/apps/build/localize-your-app"},"embedding":{"label":"Integrating with Shopify","url":"/docs/apps/build/integrating-with-shopify"},"mobile":{"label":"Mobile support","url":"/docs/apps/build/mobile-support"},"deceptive_code":{"label":"Non-deceptive code","url":"/docs/apps/build/non-deceptive-code"},"privacy_law_compliance":{"label":"Privacy law compliance","url":"/docs/apps/build/privacy-law-compliance"},"security":{"label":"Security","children":{"common_vulnerabilities":{"label":"Protect against common vulnerabilities","url":"/docs/apps/build/security/protect-against-common-vulnerabilities"},"tls_certificates":{"label":"Encrypt with TLS","url":"/docs/apps/build/security/encrypt-with-tls"},"iframe_protection":{"label":"Set up iframe protection","url":"/docs/apps/build/security/set-up-iframe-protection"},"network_services":{"label":"Secure your network service ports","url":"/docs/apps/build/security/secure-network-service-ports"},"secure_tokens":{"label":"Generate secure tokens","url":"/docs/apps/build/security/generate-secure-tokens"},"short_links":{"label":"Shorten URLs with care","url":"/docs/apps/build/security/shorten-urls-with-care"}}}}},"building_blocks_group":{"group_description":"Building blocks","links":{"graphql":{"label":"GraphQL","children":{"overview":{"label":"About GraphQL","url":"/docs/apps/build/graphql"},"graphql-basics":{"label":"GraphQL basics","children":{"queries":{"label":"Queries","url":"/docs/apps/build/graphql/basics/queries"},"mutations":{"label":"Mutations","url":"/docs/apps/build/graphql/basics/mutations"},"variables":{"label":"Variables","url":"/docs/apps/build/graphql/basics/variables"},"advanced":{"label":"Advanced concepts","url":"/docs/apps/build/graphql/basics/advanced"}}},"migrating":{"label":"Migrate to GraphQL from REST","children":{"overview":{"label":"About REST to GraphQL migration","url":"/docs/apps/build/graphql/migrate"},"learn-how":{"label":"Learn how to migrate","url":"/docs/apps/build/graphql/migrate/learn-how"},"libraries":{"label":"Update API calls in your app","url":"/docs/apps/build/graphql/migrate/libraries"},"new_product_model":{"label":"New product model","children":{"overview":{"label":"About the new product model","url":"/docs/apps/build/graphql/migrate/new-product-model"},"api_updates":{"label":"API updates","url":"/docs/apps/build/graphql/migrate/new-product-model/api-updates"},"product_model_resources":{"label":"Product model and components","url":"/docs/apps/build/graphql/migrate/new-product-model/product-model-components"},"migrate_and_test":{"label":"Migrate and test high-variants","url":"/docs/apps/build/graphql/migrate/new-product-model/migrate-and-test"},"retrieve_data":{"label":"Retrieve product data","url":"/docs/apps/build/graphql/migrate/new-product-model/retrieve-data"},"add_data":{"label":"Add product data","url":"/docs/apps/build/graphql/migrate/new-product-model/add-data"},"edit_data":{"label":"Edit product data","url":"/docs/apps/build/graphql/migrate/new-product-model/edit-data"},"sync_data":{"label":"Sync product data","url":"/docs/apps/build/graphql/migrate/new-product-model/sync-data"},"metafield_linked_options":{"label":"Linking metafields to options","url":"/docs/apps/build/graphql/migrate/new-product-model/metafield-linked"}}}}}}},"extensions":{"label":"Extensions","children":{"overview":{"label":"About extensions","url":"/docs/apps/build/app-extensions"},"list":{"label":"List of app extensions","url":"/docs/apps/build/app-extensions/list-of-app-extensions"},"build_app":{"label":"Build an extension-only app","url":"/docs/apps/build/app-extensions/build-extension-only-app"},"configure_extensions":{"label":"Configure app extensions","url":"/docs/apps/build/app-extensions/configure-app-extensions"},"remove_extension":{"label":"Remove an extension","url":"/docs/apps/build/app-extensions/remove-app-extension"}}},"functions":{"label":"Shopify Functions","children":{"overview":{"label":"About Shopify Functions","url":"/docs/apps/build/functions"},"input-output":{"label":"Input and output","children":{"overview":{"label":"About input and output","url":"/docs/apps/build/functions/input-output"},"input-queries":{"label":"Metafields for input queries","url":"/docs/apps/build/functions/input-output/metafields-for-input-queries"},"variables":{"label":"Use variables in input queries","url":"/docs/apps/build/functions/input-output/use-variables-input-queries"},"network-access":{"label":"Network access","children":{"overview":{"label":"About network access","url":"/docs/apps/build/functions/input-output/network-access"},"using-network-access":{"label":"Use network access","url":"/docs/apps/build/functions/input-output/network-access/use-network-access"},"performance":{"label":"About performance and resilience","url":"/docs/apps/build/functions/input-output/network-access/performance-and-resilience"},"graphql":{"label":"GraphQL reference","url":"/docs/apps/build/functions/input-output/network-access/graphql"}}}}},"language_support":{"label":"Programming languages","children":{"overview":{"label":"Language considerations","url":"/docs/apps/build/functions/programming-languages"},"rust":{"label":"Rust for Functions","url":"/docs/apps/build/functions/programming-languages/rust-for-functions"},"javascript":{"label":"JavaScript for Functions","url":"/docs/apps/build/functions/programming-languages/javascript-for-functions"},"webassembly":{"label":"WebAssembly","url":"/docs/apps/build/functions/programming-languages/webassembly-for-functions"}}},"test_debug":{"label":"Test and debug Shopify Functions","url":"/docs/apps/build/functions/test-debug-functions"},"monitoring_errors":{"label":"Monitoring and handling errors in production","url":"/docs/apps/build/functions/monitoring-and-errors"},"localization_practices":{"label":"Localization practices for Shopify Functions","url":"/docs/apps/build/functions/localization-practices-shopify-functions"}}},"webhooks":{"label":"Webhooks","children":{"overview":{"label":"About webhooks","url":"/docs/apps/build/webhooks"},"subscribe":{"label":"Subscribe","children":{"overview":{"label":"About subscriptions","url":"/docs/apps/build/webhooks/subscribe"},"get-started":{"label":"Create a subscription","url":"/docs/apps/build/webhooks/subscribe/get-started"},"using-api":{"label":"Subscribe using Admin API","url":"/docs/apps/build/webhooks/subscribe/subscribe-using-api"},"https":{"label":"Deliver through HTTPS","url":"/docs/apps/build/webhooks/subscribe/https"},"use_newer_version":{"label":"Use a newer API version","url":"/docs/apps/build/webhooks/subscribe/use-newer-api-version"}}},"customize":{"label":"Customize","children":{"overview":{"label":"About customizing your webhooks","url":"/docs/apps/build/webhooks/customize"},"filters":{"label":"Filter events","url":"/docs/apps/build/webhooks/customize/filters"},"modifications":{"label":"Modify payloads","url":"/docs/apps/build/webhooks/customize/modify_payloads"},"sub_topics":{"label":"About sub-topics","url":"/docs/apps/build/webhooks/customize/sub-topics"}}},"duplicates":{"label":"Ignore duplicates","url":"/docs/apps/build/webhooks/ignore-duplicates"},"delivery_metrics":{"label":"Troubleshoot","url":"/docs/apps/build/webhooks/troubleshooting-webhooks"},"best_practices":{"label":"Best practices","url":"/docs/apps/build/webhooks/best-practices"}}},"custom-data":{"label":"Custom data","children":{"overview":{"label":"About metafields and metaobjects","url":"/docs/apps/build/custom-data"},"ownership":{"label":"About reserved prefixes","url":"/docs/apps/build/custom-data/reserved-prefixes"},"metafields":{"label":"Metafields","children":{"types":{"label":"List of data types","url":"/docs/apps/build/custom-data/metafields/list-of-data-types"},"manage_metafields":{"label":"Manage metafields","url":"/docs/apps/build/custom-data/metafields/manage-metafields"},"definitions":{"label":"Definitions","children":{"overview":{"label":"About metafield definitions","url":"/docs/apps/build/custom-data/metafields/definitions"},"access_controls_metafields":{"label":"Use access controls for metafield","url":"/docs/apps/build/custom-data/metafields/definitions/use-access-controls-metafields"},"conditional_metafield_definitions":{"label":"Conditional metafield definitions","url":"/docs/apps/build/custom-data/metafields/definitions/conditional-metafield-definitions"},"standard_metafield_definitions_list":{"label":"List of standard definitions","url":"/docs/apps/build/custom-data/metafields/definitions/list-of-standard-definitions"},"manage_metafield_definitions":{"label":"Manage metafield definitions","url":"/docs/apps/build/custom-data/metafields/definitions/manage-metafield-definitions"},"validation_options_list":{"label":"List of validation options","url":"/docs/apps/build/custom-data/metafields/definitions/list-of-validation-options"},"set_validation_rules":{"label":"Set validation rules","url":"/docs/apps/build/custom-data/metafields/definitions/set-validation-rules"}}},"app_data_metafields":{"label":"Use app-data metafields","url":"/docs/apps/build/custom-data/metafields/use-app-data-metafields"},"private_metafields":{"label":"Manage private metafields","url":"/docs/apps/build/custom-data/metafields/manage-private-metafields"},"migrate_private_metafields":{"label":"Migrate private metafields","url":"/docs/apps/build/custom-data/metafields/migrate-private-metafields"},"capabilities":{"label":"Use metafield capabilities","url":"/docs/apps/build/custom-data/metafields/use-metafield-capabilities"},"migrate_metafields":{"label":"Migrate metafields","url":"/docs/apps/build/custom-data/metafields/migrate-metafields"},"query_by_metafield_value":{"label":"Query by metafield value","url":"/docs/apps/build/custom-data/metafields/query-by-metafield-value"}}},"metaobjects":{"label":"Metaobjects","children":{"work_with_metaobjects":{"label":"Work with metaobjects","url":"/docs/apps/build/custom-data/metaobjects/work-with-metaobjects"},"access_controls":{"label":"Use access controls for metaobjects","url":"/docs/apps/build/custom-data/metaobjects/use-access-controls-metaobjects"},"capabilities":{"label":"Use metaobject capabilities","url":"/docs/apps/build/custom-data/metaobjects/use-metaobject-capabilities"},"standard_metaobject_definitions_list":{"label":"List of standard definitions","url":"/docs/apps/build/custom-data/metaobjects/list-of-standard-definitions"},"limits":{"label":"Metaobject limits","url":"/docs/apps/build/custom-data/metaobjects/metaobject-limits"}}}}},"authentication":{"label":"Authentication","children":{"overview":{"label":"Authentication and authorization","url":"/docs/apps/build/authentication-authorization"},"installation":{"label":"App installation","children":{"overview":{"label":"Enable Shopify-managed installations","url":"/docs/apps/build/authentication-authorization/app-installation"},"manage-access-scopes":{"feature_flag_enabled":"optional_scopes","label":"Manage access scopes","url":"/docs/apps/build/authentication-authorization/app-installation/manage-access-scopes"},"uninstall-app":{"label":"Uninstall an app with an API request","url":"/docs/apps/build/authentication-authorization/app-installation/uninstall-app-api-request"}}},"session_tokens":{"label":"Session tokens","children":{"about_session_tokens":{"label":"About session tokens","url":"/docs/apps/build/authentication-authorization/session-tokens"},"set_up_session_tokens":{"label":"Set up session tokens","url":"/docs/apps/build/authentication-authorization/session-tokens/set-up-session-tokens"}}},"token_types":{"label":"Access tokens","children":{"about_token_acquisition":{"label":"About token acquisition","url":"/docs/apps/build/authentication-authorization/access-tokens/"},"token_exchange":{"label":"Token exchange","url":"/docs/apps/build/authentication-authorization/access-tokens/token-exchange"},"authorization_code_grant":{"label":"Authorization code grant","url":"/docs/apps/build/authentication-authorization/access-tokens/authorization-code-grant"},"admin_created_apps":{"label":"Access tokens for custom apps","url":"/docs/apps/build/authentication-authorization/access-tokens/generate-app-access-tokens-admin"},"online":{"label":"Online access tokens","url":"/docs/apps/build/authentication-authorization/access-tokens/online-access-tokens"},"offline":{"label":"Offline access tokens","url":"/docs/apps/build/authentication-authorization/access-tokens/offline-access-tokens"},"delegate_access_tokens":{"label":"Delegate access tokens","url":"/docs/apps/build/authentication-authorization/access-tokens/use-delegate-tokens"}}},"client_secret":{"label":"Client secret / API key","children":{"overview":{"label":"About client secrets","url":"/docs/apps/build/authentication-authorization/client-secrets"},"rotate":{"label":"Rotate or revoke client credentials","url":"/docs/apps/build/authentication-authorization/client-secrets/rotate-revoke-client-credentials"}}},"set_embedded_auth":{"label":"Set up embedded app authorization","url":"/docs/apps/build/authentication-authorization/set-embedded-app-authorization"}}}}}},"apps_design":{"heading":"Design","guidelines_group":{"group_description":"Guidelines","links":{"overview":{"label":"Overview","url":"/docs/apps/design"},"app_structure":{"label":"App structure","url":"/docs/apps/design/app-structure","always_show_links":true,"anchor_links":{"anatomy":{"label":"Anatomy","url":"/docs/apps/design/app-structure#anatomy"},"app_body":{"label":"App body","url":"/docs/apps/design/app-structure#app-body"},"max_modal":{"label":"Max modal","url":"/docs/apps/design/app-structure#max-modal"},"admin_ui_extensions":{"label":"Admin UI extensions","url":"/docs/apps/design/app-structure#admin-ui-extensions"}}},"layout":{"label":"Layout","url":"/docs/apps/design/layout","always_show_links":true,"anchor_links":{"responsive":{"label":"Responsive layout grid","url":"/docs/apps/design/layout#responsive-layout-grid"},"width":{"label":"App body width","url":"/docs/apps/design/layout#app-body-width"},"options":{"label":"Layout options","url":"/docs/apps/design/layout#layout-options"},"spacing":{"label":"Spacing","url":"/docs/apps/design/layout#spacing"},"information_density":{"label":"Information density","url":"/docs/apps/design/layout#information-density"},"containers":{"label":"Containers","url":"/docs/apps/design/layout#containers"}}},"visual_design":{"label":"Visual design","url":"/docs/apps/design/visual-design","always_show_links":true,"anchor_links":{"color":{"label":"Color","url":"/docs/apps/design/visual-design#color"},"app_icon":{"label":"App icon","url":"/docs/apps/design/visual-design#app-icon"},"typography":{"label":"Typography","url":"/docs/apps/design/visual-design#typography"},"icons":{"label":"Icons","url":"/docs/apps/design/visual-design#icons"},"illustrations":{"label":"Illustrations","url":"/docs/apps/design/visual-design#illustrations"}}},"content":{"label":"Content","url":"/docs/apps/design/content","always_show_links":true,"anchor_links":{"voice_and_tone":{"label":"Voice and tone","url":"/docs/apps/design/content#voice-tone"},"prod_content":{"label":"Product content","url":"/docs/apps/design/content#product-content"},"grammar_and_mechanics":{"label":"Grammar and mechanics","url":"/docs/apps/design/content#grammar"}}},"navigation":{"label":"Navigation","url":"/docs/apps/design/navigation","always_show_links":true,"anchor_links":{"info_architecture":{"label":"Information architecture","url":"/docs/apps/design/navigation#info-architecture"},"appnav":{"label":"App nav","url":"/docs/apps/design/navigation#app-nav"},"appheader":{"label":"App header","url":"/docs/apps/design/navigation#app-header"},"pageheader":{"label":"Page header","url":"/docs/apps/design/navigation#page-header"}}}}},"ux_group":{"group_description":"UX strategies","links":{"alerts":{"label":"Alerts","url":"/docs/apps/design/user-experience/alerts"},"app_home_page":{"label":"App home page","url":"/docs/apps/design/user-experience/app-home-page"},"onboarding":{"label":"Onboarding","url":"/docs/apps/design/user-experience/onboarding"},"marketing":{"label":"Marketing","url":"/docs/apps/design/user-experience/marketing"},"forms":{"label":"Forms","url":"/docs/apps/design/user-experience/forms"},"subscription_apps":{"label":"Subscription apps","url":"/docs/apps/design/user-experience/subscription-apps"}}}},"apps_launch":{"heading":"Launch","quality_assurance_group":{"group_description":"Quality assurance","links":{"apps":{"label":"Going live","url":"/docs/apps/launch"},"requirements_checklist":{"label":"Checklist of requirements","url":"/docs/apps/launch/app-requirements-checklist"},"built-for-shopify":{"label":"Built for Shopify status","children":{"overview":{"label":"About Built for Shopify","url":"/docs/apps/launch/built-for-shopify"},"criteria":{"label":"Achievement criteria","url":"/docs/apps/launch/built-for-shopify/achievement-criteria"},"criteria-categories":{"label":"Category-specific achievement criteria","url":"/docs/apps/launch/built-for-shopify/category-achievement-criteria"},"annual_review":{"label":"Annual reviews","url":"/docs/apps/launch/built-for-shopify/annual-reviews"},"regain_status":{"label":"Regain lost status","url":"/docs/apps/launch/built-for-shopify/regain-lost-status"}}},"privacy-requirements":{"label":"Privacy requirements","url":"/docs/apps/launch/privacy-requirements"},"data_protection":{"label":"Work with protected customer data","url":"/docs/apps/launch/protected-customer-data"}}},"pricing_strategy_group":{"group_description":"Pricing strategy","links":{"overview":{"label":"About billing for your app","url":"/docs/apps/launch/billing"},"managed_pricing":{"label":"Managed pricing","url":"/docs/apps/launch/billing/managed-pricing"},"trials":{"label":"Offer free trials","url":"/docs/apps/launch/billing/offer-free-trials"},"subscriptions":{"label":"Subscription billing","children":{"overview":{"label":"About subscription billing","url":"/docs/apps/launch/billing/subscription-billing"},"time_based_subscription":{"label":"Create time-based subscriptions","url":"/docs/apps/launch/billing/subscription-billing/create-time-based-subscriptions"},"usage_based_subscription":{"label":"Create usage-based subscriptions","url":"/docs/apps/launch/billing/subscription-billing/create-usage-based-subscriptions"},"combine_time_usage_subscription":{"label":"Combine time and usage","url":"/docs/apps/launch/billing/subscription-billing/combine-time-and-usage"},"complex_pricing_models":{"label":"Complex pricing models","url":"/docs/apps/launch/billing/subscription-billing/complex-pricing-models"},"update_max_charge":{"label":"Update the maximum charge","url":"/docs/apps/launch/billing/subscription-billing/update-max-charge"},"subscription_discounts":{"label":"Offer subscription discounts","url":"/docs/apps/launch/billing/subscription-billing/offer-subscription-discounts"}}},"one_time":{"label":"Support one-time purchases","url":"/docs/apps/launch/billing/support-one-time-purchases"},"award_app_credits":{"label":"Award app credits","url":"/docs/apps/launch/billing/award-app-credits"},"refund_app_charges":{"label":"Refund app charges","url":"/docs/apps/launch/billing/refund-app-charges"},"view_charges_earnings":{"label":"View charges and earnings","url":"/docs/apps/launch/billing/view-charges-earnings"}}},"deployment_group":{"group_description":"Deployment","links":{"overview":{"label":"About deployment","url":"/docs/apps/launch/deployment"},"deploy_web":{"label":"Deploy a web app","children":{"overview":{"label":"Deploy to a hosting service","url":"/docs/apps/launch/deployment/deploy-web-app/deploy-to-hosting-service"},"fly":{"label":"Deploy to Fly.io","url":"/docs/apps/launch/deployment/deploy-web-app/deploy-to-fly"},"heroku":{"label":"Deploy to Heroku","url":"/docs/apps/launch/deployment/deploy-web-app/deploy-to-heroku"}}},"app_versions":{"label":"About app versions","url":"/docs/apps/launch/deployment/app-versions"},"deploy_app_versions":{"label":"Deploy and release app versions","url":"/docs/apps/launch/deployment/deploy-app-versions"},"ci_cd":{"label":"Deploy app components in a CD pipeline","url":"/docs/apps/launch/deployment/deploy-in-ci-cd-pipeline"}}},"reaching_customers_group":{"group_description":"Reaching customers","links":{"overview":{"label":"About app distribution","url":"/docs/apps/launch/distribution"},"distribution_method":{"label":"Select a distribution method","url":"/docs/apps/launch/distribution/select-distribution-method"},"support_customers":{"label":"Support your customers","url":"/docs/apps/launch/distribution/support-your-customers"},"sunsetting":{"label":"Sunsetting your app","url":"/docs/apps/launch/distribution/sunsetting-your-app"},"go_to_market_success":{"label":"Go-to-market success","url":"/docs/apps/launch/distribution/go-to-market-success"},"track_app_usage":{"label":"Track app usage","url":"/docs/apps/launch/distribution/track-app-usage"},"app_listing_visibility":{"label":"App listing visibility","url":"/docs/apps/launch/distribution/visibility"},"revenue_share":{"label":"App revenue share","url":"/docs/apps/launch/distribution/revenue-share"}}},"app_store_review_group":{"group_description":"Shopify app store review","links":{"overview":{"label":"About the Shopify App Store","url":"/docs/apps/launch/app-store-review"},"review":{"label":"About the app review process","url":"/docs/apps/launch/app-store-review/review-process"},"submit":{"label":"Submit your app for review","url":"/docs/apps/launch/app-store-review/submit-app-for-review"},"pass_review":{"label":"Pass app review","url":"/docs/apps/launch/app-store-review/pass-app-review"},"app_listing_categories":{"label":"App listing categories","url":"/docs/apps/launch/app-store-review/app-listing-categories"},"policy_violations":{"label":"Policy violations","url":"/docs/apps/launch/app-store-review/policy-violations"},"app_audits":{"label":"About app audits","url":"/docs/apps/launch/app-store-review/app-audits"}}},"marketing_app_group":{"group_description":"Marketing your app","links":{"overview":{"label":"About marketing your app","url":"/docs/apps/launch/marketing"},"release":{"label":"Write a press release","url":"/docs/apps/launch/marketing/write-press-release"},"brand":{"label":"Shopify brand assets","url":"/docs/apps/launch/marketing/shopify-brand-assets"},"tracking_listing_traffic":{"label":"Track your listing traffic","url":"/docs/apps/launch/marketing/track-listing-traffic"},"manage_review":{"label":"Manage app reviews","url":"/docs/apps/launch/marketing/manage-app-reviews"},"advertising":{"label":"Advertise in the Shopify App Store","children":{"overview":{"label":"About Shopify App Store ads","url":"/docs/apps/launch/marketing/advertising"},"start_advertising":{"label":"Start advertising","url":"/docs/apps/launch/marketing/advertising/start-advertising"},"create_ads":{"label":"Create ads","url":"/docs/apps/launch/marketing/advertising/create-ads"},"manage_ads":{"label":"Manage ads","url":"/docs/apps/launch/marketing/advertising/manage-ads"},"check_ad_performance":{"label":"Check ad performance","url":"/docs/apps/launch/marketing/advertising/check-ad-performance"},"ad_billing":{"label":"About ad billing","url":"/docs/apps/launch/marketing/advertising/ad-billing"},"ad_permissions":{"label":"About ad permissions","url":"/docs/apps/launch/marketing/advertising/permissions"},"ads_faq":{"label":"Ads FAQ","url":"/docs/apps/launch/marketing/advertising/faq"}}}}}},"storefronts_themes":{"heading":"Themes","getting_started_group":{"group_description":"Getting started","links":{"themes":{"label":"Overview","url":"/docs/storefronts/themes"},"getting_started":{"label":"Getting started","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/getting-started"},"create":{"label":"Create a theme","url":"/docs/storefronts/themes/getting-started/create"},"customize":{"label":"Customize a theme","url":"/docs/storefronts/themes/getting-started/customize"}}},"architecture":{"label":"Architecture","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture"},"layouts":{"label":"Layouts","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/layouts"},"checkout_liquid":{"label":"checkout.liquid","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/layouts/checkout-liquid"},"customize_checkout":{"label":"Customize checkout.liquid","url":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/customize-checkout"},"checkout_css":{"label":"Checkout CSS","url":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/checkout-css"}}}}},"templates":{"label":"Templates","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/templates"},"json_templates":{"label":"JSON templates","url":"/docs/storefronts/themes/architecture/templates/json-templates"},"404":{"label":404,"url":"/docs/storefronts/themes/architecture/templates/404"},"article":{"label":"article","url":"/docs/storefronts/themes/architecture/templates/article"},"blog":{"label":"blog","url":"/docs/storefronts/themes/architecture/templates/blog"},"cart":{"label":"cart","url":"/docs/storefronts/themes/architecture/templates/cart"},"collection":{"label":"collection","url":"/docs/storefronts/themes/architecture/templates/collection"},"customers_account":{"label":"customers/account","url":"/docs/storefronts/themes/architecture/templates/customers-account"},"customers_activate_account":{"label":"customers/activate_account","url":"/docs/storefronts/themes/architecture/templates/customers-activate-account"},"customers_addresses":{"label":"customers/addresses","url":"/docs/storefronts/themes/architecture/templates/customers-addresses"},"customers_login":{"label":"customers/login","url":"/docs/storefronts/themes/architecture/templates/customers-login"},"customers_order":{"label":"customers/order","url":"/docs/storefronts/themes/architecture/templates/customers-order"},"customers_register":{"label":"customers/register","url":"/docs/storefronts/themes/architecture/templates/customers-register"},"customers_reset_password":{"label":"customers/reset_password","url":"/docs/storefronts/themes/architecture/templates/customers-reset-password"},"gift_card_liquid":{"label":"gift_card.liquid","url":"/docs/storefronts/themes/architecture/templates/gift-card-liquid"},"index":{"label":"index","url":"/docs/storefronts/themes/architecture/templates/index-template"},"list_collections":{"label":"list-collections","url":"/docs/storefronts/themes/architecture/templates/list-collections"},"metaobject":{"label":"metaobject","url":"/docs/storefronts/themes/architecture/templates/metaobject"},"page":{"label":"page","url":"/docs/storefronts/themes/architecture/templates/page"},"password":{"label":"password","url":"/docs/storefronts/themes/architecture/templates/password"},"product":{"label":"product","url":"/docs/storefronts/themes/architecture/templates/product"},"robots_txt_liquid":{"label":"robots.txt.liquid","url":"/docs/storefronts/themes/architecture/templates/robots-txt-liquid"},"search":{"label":"search","url":"/docs/storefronts/themes/architecture/templates/search"}}},"sections":{"label":"Sections","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/sections"},"section_schema":{"label":"Section schema","url":"/docs/storefronts/themes/architecture/sections/section-schema"},"section_assets":{"label":"Section assets","url":"/docs/storefronts/themes/architecture/sections/section-assets"},"integrate_sections_with_the_theme_editor":{"label":"Integrate with the theme editor","url":"/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-editor"}}},"blocks":{"label":"Blocks","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/blocks"},"section_blocks":{"label":"Section blocks","url":"/docs/storefronts/themes/architecture/blocks/section-blocks"},"theme_blocks":{"label":"Theme blocks","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks"},"schema":{"label":"Block schema","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/schema"},"static":{"label":"Static Blocks","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks"},"dynamic_sources":{"label":"Dynamic sources","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/dynamic-sources"},"developer_preview":{"feature_flag_disabled":"theme_blocks_ga","label":"Developer preview","url":"/docs/storefronts/themes/architecture/blocks/theme-blocks/developer-preview"}}},"app_blocks":{"label":"App blocks","url":"/docs/storefronts/themes/architecture/blocks/app-blocks"}}},"section_groups":{"label":"Section groups","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/section-groups"},"migrate":{"label":"Migrate","url":"/docs/storefronts/themes/architecture/section-groups/migrate"}}},"config":{"label":"Config","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/config"},"settings_schema_json":{"label":"settings_schema.json","url":"/docs/storefronts/themes/architecture/config/settings-schema-json"},"settings_data_json":{"label":"settings_data.json","url":"/docs/storefronts/themes/architecture/config/settings-data-json"}}},"locales":{"label":"Locales","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/locales"},"schema_locale_files":{"label":"Schema locale files","url":"/docs/storefronts/themes/architecture/locales/schema-locale-files"},"storefront_locale_files":{"label":"Storefront locale files","url":"/docs/storefronts/themes/architecture/locales/storefront-locale-files"}}},"settings":{"label":"Settings","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/architecture/settings"},"input_settings":{"label":"Input settings","url":"/docs/storefronts/themes/architecture/settings/input-settings"},"style_settings":{"label":"Style settings","url":"/docs/storefronts/themes/architecture/settings/style-settings"},"sidebar_settings":{"label":"Sidebar settings","url":"/docs/storefronts/themes/architecture/settings/sidebar-settings"},"dynamic_sources":{"label":"Dynamic sources","url":"/docs/storefronts/themes/architecture/settings/dynamic-sources"},"fonts":{"label":"Fonts","url":"/docs/storefronts/themes/architecture/settings/fonts"},"deprecated_settings":{"label":"Deprecated settings","url":"/docs/storefronts/themes/architecture/settings/deprecated-settings"}}}}},"tools":{"label":"Developer tools","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools"},"cli":{"label":"CLI","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/cli"},"ci_cd":{"label":"CI/CD","url":"/docs/storefronts/themes/tools/cli/ci-cd"},"commands":{"label":"Commands","url":"/docs/api/shopify-cli/theme","stepIn":true,"force_in_new_tab":true},"language_server":{"label":"Language Server","url":"/docs/storefronts/themes/tools/cli/language-server"},"environments":{"label":"Environments","url":"/docs/storefronts/themes/tools/cli/environments"},"migrate":{"label":"Migrate","url":"/docs/storefronts/themes/tools/cli/migrate"},"cli_2":{"label":"CLI 2.x","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/cli/cli-2"},"commands":{"label":"Commands","url":"/docs/storefronts/themes/tools/cli/cli-2/commands"},"upgrade-uninstall":{"label":"Install, upgrade, or uninstall","url":"/docs/storefronts/themes/tools/cli/cli-2/upgrade-uninstall"}}}}},"github_integration":{"label":"GitHub integration","url":"/docs/storefronts/themes/tools/github"},"vscode":{"label":"VS Code extension","url":"/docs/storefronts/themes/tools/shopify-liquid-vscode"},"prettier_plugin":{"label":"Prettier plugin","url":"/docs/storefronts/themes/tools/liquid-prettier-plugin"},"theme_check":{"label":"Theme Check","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/theme-check"},"commands":{"label":"Commands","url":"/docs/storefronts/themes/tools/theme-check/commands"},"configuration":{"label":"Configuration","url":"/docs/storefronts/themes/tools/theme-check/configuration"},"checks_reference":{"label":"Checks reference","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/theme-check/checks"},"app_block_valid_tags":{"label":"AppBlockValidTags","url":"/docs/storefronts/themes/tools/theme-check/checks/app-block-valid-tags"},"asset_preload":{"label":"AssetPreload","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-preload"},"asset_size_app_block_css":{"label":"AssetSizeAppBlockCSS","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-css"},"asset_size_app_block_javascript":{"label":"AssetSizeAppBlockJavascript","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-javascript"},"asset_size_css":{"label":"AssetSizeCSS","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-css"},"asset_size_javascript":{"label":"AssetSizeJavascript","url":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-javascript"},"block_id_usage":{"label":"BlockIdUsage","url":"/docs/storefronts/themes/tools/theme-check/checks/block-id-usage"},"capture_on_content_for_block":{"label":"CaptureOnContentForBlock","url":"/docs/storefronts/themes/tools/theme-check/checks/capture-on-content-for-block"},"cdn_preconnect":{"label":"CdnPreconnect","url":"/docs/storefronts/themes/tools/theme-check/checks/cdn-preconnect"},"content_for_header_modification":{"label":"ContentForHeaderModification","url":"/docs/storefronts/themes/tools/theme-check/checks/content-for-header-modification"},"deprecate_bgsizes":{"label":"DeprecateBgsizes","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes"},"deprecate_lazysizes":{"label":"DeprecateLazysizes","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-lazysizes"},"deprecated_filter":{"label":"DeprecatedFilter","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-filter"},"deprecated_tag":{"label":"DeprecatedTag","url":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-tag"},"img_width_and_height":{"label":"ImgWidthAndHeight","url":"/docs/storefronts/themes/tools/theme-check/checks/img-width-and-height"},"json_syntax_error":{"label":"JSONSyntaxError","url":"/docs/storefronts/themes/tools/theme-check/checks/json-syntax-error"},"liquid_html_syntax_error":{"label":"LiquidHTMLSyntaxError","url":"/docs/storefronts/themes/tools/theme-check/checks/liquid-html-syntax-error"},"matching_translations":{"label":"MatchingTranslations","url":"/docs/storefronts/themes/tools/theme-check/checks/matching-translations"},"matching_schema_translations":{"label":"MatchingSchemaTranslations","url":"/docs/storefronts/themes/tools/theme-check/checks/matching-schema-translations"},"missing_asset":{"label":"MissingAsset","url":"/docs/storefronts/themes/tools/theme-check/checks/missing-asset"},"missing_template":{"label":"MissingTemplate","url":"/docs/storefronts/themes/tools/theme-check/checks/missing-template"},"pagination_size":{"label":"PaginationSize","url":"/docs/storefronts/themes/tools/theme-check/checks/pagination-size"},"parser_blocking_javascript":{"label":"ParserBlockingJavaScript","url":"/docs/storefronts/themes/tools/theme-check/checks/parser-blocking-javascript"},"remote_asset":{"label":"RemoteAsset","url":"/docs/storefronts/themes/tools/theme-check/checks/remote-asset"},"required_layout_theme_object":{"label":"RequiredLayoutThemeObject","url":"/docs/storefronts/themes/tools/theme-check/checks/required-layout-theme-object"},"translation_key_exists":{"label":"TranslationKeyExists","url":"/docs/storefronts/themes/tools/theme-check/checks/translation-key-exists"},"unclosed_html_element":{"label":"UnclosedHTMLElement","url":"/docs/storefronts/themes/tools/theme-check/checks/unclosed-html-element"},"undefined_object":{"label":"UndefinedObject","url":"/docs/storefronts/themes/tools/theme-check/checks/undefined-object"},"unique_static_block_id":{"label":"UniqueStaticBlockId","url":"/docs/storefronts/themes/tools/theme-check/checks/unique-static-block-id"},"unknown_filter":{"label":"UnknownFilter","url":"/docs/storefronts/themes/tools/theme-check/checks/unknown-filter"},"unused_assign":{"label":"UnusedAssign","url":"/docs/storefronts/themes/tools/theme-check/checks/unused-assign"},"valid_block_target":{"label":"ValidBlockTarget","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-block-target"},"valid_content_for_arguments":{"label":"ValidContentForArguments","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-content-for-arguments"},"valid_html_translation":{"label":"ValidHTMLTranslation","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-html-translation"},"valid_local_blocks":{"label":"ValidLocalBlocks","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-local-blocks"},"valid_schema":{"label":"ValidSchema","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema"},"valid_schema-name":{"label":"ValidSchemaName","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema-name"},"valid_static_block_type":{"label":"ValidStaticBlockType","url":"/docs/storefronts/themes/tools/theme-check/checks/valid-static-block-type"},"variable_name":{"label":"VariableName","url":"/docs/storefronts/themes/tools/theme-check/checks/variable-name"}}},"migrate":{"label":"Migrate","url":"/docs/storefronts/themes/tools/theme-check/migrate"}}},"online_editor":{"label":"Theme editor","url":"/docs/storefronts/themes/tools/online-editor"},"code_editor":{"label":"Code editor","url":"/docs/storefronts/themes/tools/code-editor"},"theme_access":{"label":"Theme Access app","url":"/docs/storefronts/themes/tools/theme-access"},"development_stores":{"label":"Development stores","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/development-stores"},"test-data":{"label":"Test data","url":"/docs/storefronts/themes/tools/development-stores/generated-data"},"transfer":{"label":"Transfer a development store","url":"/docs/storefronts/themes/tools/development-stores/transfer-development-stores"}}},"collaborator_accounts":{"label":"Collaborator accounts","url":"/docs/storefronts/themes/tools/collaborator-accounts"},"theme_inspector":{"label":"Theme Inspector","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/tools/theme-inspector"},"using":{"label":"Optimizing themes using Theme Inspector","url":"/docs/storefronts/themes/tools/theme-inspector/using-the-theme-inspector"}}},"lighthouse_ci":{"label":"Lighthouse CI","url":"/docs/storefronts/themes/tools/lighthouse-ci"},"dawn":{"label":"Dawn","url":"/docs/storefronts/themes/tools/dawn"}}},"best_practices":{"label":"Best practices","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/best-practices"},"templates_sections_blocks":{"label":"Sections and blocks","url":"/docs/storefronts/themes/best-practices/templates-sections-blocks"},"performance":{"label":"Performance","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/best-practices/performance"},"cdn":{"label":"Platform","url":"/docs/storefronts/themes/best-practices/performance/platform"}}},"accessibility":{"label":"Accessibility","url":"/docs/storefronts/themes/best-practices/accessibility"},"theme_editor_preview_inspector":{"label":"Theme editor preview inspector","url":"/docs/storefronts/themes/best-practices/theme-editor-preview-inspector"},"design":{"label":"Design","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/best-practices/design"},"color_system":{"label":"Color system","url":"/docs/storefronts/themes/best-practices/design/color-system"}}},"merchant_stores":{"label":"Merchant stores","url":"/docs/storefronts/themes/best-practices/merchant-stores"},"version_control":{"label":"Version control","url":"/docs/storefronts/themes/best-practices/version-control"},"file_transformation":{"label":"File transformation","url":"/docs/storefronts/themes/best-practices/file-transformation"},"deceptive_code":{"label":"Deceptive code","url":"/docs/storefronts/themes/best-practices/deceptive-code"}}}}},"theme_features_group":{"group_description":"Theme features","links":{"app_extensions":{"label":"Integrating apps","url":"/docs/apps/online-store"},"product_merchandising":{"label":"Product merchandising","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising"},"variants":{"label":"Product variants","children":{"variants":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising/variants"},"support-high-variant-products":{"label":"Support high-variant products","url":"/docs/storefronts/themes/product-merchandising/variants/support-high-variant-products"}}},"recommendations":{"label":"Product recommendations","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising/recommendations"},"related":{"label":"Related products","url":"/docs/storefronts/themes/product-merchandising/recommendations/related-products"},"complementary":{"label":"Complementary products","url":"/docs/storefronts/themes/product-merchandising/recommendations/complementary-products"}}},"media":{"label":"Media and images","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/product-merchandising/media"},"support_media":{"label":"Support product media","url":"/docs/storefronts/themes/product-merchandising/media/support-media"},"media_ux":{"label":"Product media UX guidelines","url":"/docs/storefronts/themes/product-merchandising/media/media-ux"}}},"gift_cards":{"label":"Gift cards","url":"/docs/storefronts/themes/product-merchandising/gift-cards"}}},"pricing_payments":{"label":"Pricing and payments","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/pricing-payments"},"discounts":{"label":"Discounts","url":"/docs/storefronts/themes/pricing-payments/discounts"},"subscriptions":{"label":"Subscriptions","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/pricing-payments/subscriptions"},"support_subscriptions":{"label":"Add subscriptions to your theme","url":"/docs/storefronts/themes/pricing-payments/subscriptions/add-subscriptions-to-your-theme"},"subscriptions_ux":{"label":"Subscription UX guidelines","url":"/docs/storefronts/themes/pricing-payments/subscriptions/subscription-ux-guidelines"}}},"pre_orders_try_before_you_buy":{"label":"Pre-orders and Try Before You Buy","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/pricing-payments/preorder-tbyb"},"support_pre_orders_try_before_you_buy":{"label":"Add pre-orders and TBYB to your theme","url":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/add-preorder-tbyb-to-your-theme"},"deferred_purchase_options_ux":{"label":"Pre-orders and TBYB UX guidelines","url":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/preorder-tbyb-ux-guidelines"}}},"installments":{"label":"Shop Pay Installments","url":"/docs/storefronts/themes/pricing-payments/installments"},"accelerated_checkout":{"label":"Accelerated checkout","children":{"overview":{"label":"About accelerated checkout","url":"/docs/storefronts/themes/pricing-payments/accelerated-checkout"},"upgrade_accelerated_checkout":{"label":"Upgrade accelerated checkout","url":"/docs/storefronts/themes/pricing-payments/accelerated-checkout/upgrade-accelerated-checkout"}}},"b2b":{"label":"B2B","url":"/docs/storefronts/themes/pricing-payments/b2b"},"price_per_unit":{"label":"Unit pricing","url":"/docs/storefronts/themes/pricing-payments/unit-pricing"},"currency_formatting":{"label":"Explicit currency formatting","url":"/docs/storefronts/themes/pricing-payments/currency-formatting"}}},"delivery_fulfillment":{"label":"Delivery and fulfillment","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/delivery-fulfillment"},"pickup_availability":{"label":"Pickup availability","url":"/docs/storefronts/themes/delivery-fulfillment/pickup-availability"}}},"customer_engagement":{"label":"Customer engagement","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/customer-engagement"},"email_consent":{"label":"Email consent","url":"/docs/storefronts/themes/customer-engagement/email-consent"},"additional_customer_information":{"label":"Additional customer information","url":"/docs/storefronts/themes/customer-engagement/additional-customer-information"},"contact_form":{"label":"Add a contact form","url":"/docs/storefronts/themes/customer-engagement/add-contact-form"}}},"markets":{"label":"Markets","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/markets"},"multiple_currencies_languages":{"label":"Support multiple currencies and languages","url":"/docs/storefronts/themes/markets/multiple-currencies-languages"},"localization_discovery":{"label":"Detect and set a visitor’s optimal localization","url":"/docs/storefronts/themes/markets/localization-discovery"},"country_lang_selector_ux":{"label":"Country and language selector UX guidelines","url":"/docs/storefronts/themes/markets/country-language-ux"}}},"navigation_search":{"label":"Site navigation and search","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search"},"navigation":{"label":"Navigation","url":"/docs/storefronts/themes/navigation-search/navigation"},"search":{"label":"Storefront search","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search/search"},"predictive_search":{"label":"Predictive search","url":"/docs/storefronts/themes/navigation-search/search/predictive-search"},"predictive_search_ux":{"label":"Predictive search UX guidelines","url":"/docs/storefronts/themes/navigation-search/search/predictive-search-ux"}}},"filtering":{"label":"Filtering","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search/filtering"},"storefront_filtering":{"label":"Storefront filtering","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering"},"support_storefront_filtering":{"label":"Support storefront filtering","url":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering"},"storefront_filtering_ux":{"label":"Storefront filtering UX guidelines","url":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/storefront-filtering-ux"}}},"tag_filtering":{"label":"Tag filtering","url":"/docs/storefronts/themes/navigation-search/filtering/tag-filtering"}}}}},"seo":{"label":"SEO","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/seo"},"metadata":{"label":"Metadata","url":"/docs/storefronts/themes/seo/metadata"},"hreflang_tags":{"label":"hreflang tags","url":"/docs/storefronts/themes/seo/hreflang"},"robots_txt":{"label":"robots.txt","url":"/docs/storefronts/themes/seo/robots-txt"}}},"trust_security":{"label":"Trust and security","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/trust-security"},"security_badge":{"label":"Security badges","url":"/docs/storefronts/themes/trust-security/security-badges"},"captcha":{"label":"Captcha","url":"/docs/storefronts/themes/trust-security/captcha"}}},"migration":{"label":"Migrating to Online Store 2.0","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/os20"},"assessment":{"label":"Assessment","url":"/docs/storefronts/themes/os20/assessment"},"migration":{"label":"Migration guide","url":"/docs/storefronts/themes/os20/migration"}}},"troubleshooting":{"label":"Troubleshooting","url":"/docs/storefronts/themes/troubleshooting"}}},"sell_themes_group":{"group_description":"Sell themes","links":{"theme-store":{"label":"Theme Store","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/store"},"requirements":{"label":"Requirements","url":"/docs/storefronts/themes/store/requirements"},"testing":{"label":"Testing","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/store/test-theme"},"assets":{"label":"Testing assets","url":"/docs/storefronts/themes/store/test-theme/assets"},"checklist":{"label":"Testing checklist","url":"/docs/storefronts/themes/store/test-theme/checklist"}}},"review-process":{"label":"Review process","children":{"submit":{"label":"Submitting a theme","url":"/docs/storefronts/themes/store/review-process/submit-theme"},"listings":{"label":"Theme Store listings","url":"/docs/storefronts/themes/store/review-process/listings"},"rejections":{"label":"Common theme rejections","url":"/docs/storefronts/themes/store/review-process/common-theme-rejections"}}},"success":{"label":"Theme success","children":{"overview":{"label":"Overview","url":"/docs/storefronts/themes/store/success"},"prohibited":{"label":"Prohibited actions","url":"/docs/storefronts/themes/store/success/prohibited-actions"},"reviews":{"label":"Managing theme reviews","url":"/docs/storefronts/themes/store/success/managing-theme-reviews"},"assets":{"label":"Brand asset guidance","url":"/docs/storefronts/themes/store/success/brand-assets"},"updates":{"label":"Updating your theme","url":"/docs/storefronts/themes/store/success/updates"},"sunset":{"label":"Removing a theme","url":"/docs/storefronts/themes/store/success/remove-theme"}}},"revenue-share":{"label":"Theme revenue share","url":"/docs/storefronts/themes/store/revenue-share"}}}}}},"storefronts_headless":{"heading":"Headless","getting_started_group":{"group_description":"Getting started","links":{"custom_storefronts":{"label":"Overview","url":"/docs/storefronts/headless"},"getting_started":{"label":"Getting started","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/getting-started"},"build_options":{"label":"Build options","url":"/docs/storefronts/headless/getting-started/build-options"}}}}},"hydrogen_oxygen_group":{"group_description":"Hydrogen and Oxygen","links":{"getting_started":{"label":"Getting started","url":"/docs/storefronts/headless/hydrogen/getting-started"},"structure":{"label":"Fundamentals","url":"/docs/storefronts/headless/hydrogen/fundamentals"},"analytics":{"label":"Analytics","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/analytics"},"consent":{"label":"Consent management","url":"/docs/storefronts/headless/hydrogen/analytics/consent"},"consent_3p":{"label":"Third-party consent services","url":"/docs/storefronts/headless/hydrogen/analytics/consent-3p"},"tracking":{"label":"Event tracking","url":"/docs/storefronts/headless/hydrogen/analytics/tracking"},"validation":{"label":"Validation and troubleshooting","url":"/docs/storefronts/headless/hydrogen/analytics/validation"}}},"cart":{"label":"Cart","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/cart"},"setup":{"label":"Set up a cart handler","url":"/docs/storefronts/headless/hydrogen/cart/setup"},"read":{"label":"Read cart data","url":"/docs/storefronts/headless/hydrogen/cart/read"},"items":{"label":"Manage cart line items","url":"/docs/storefronts/headless/hydrogen/cart/manage"},"metafields":{"label":"Update metafields","url":"/docs/storefronts/headless/hydrogen/cart/metafields"},"buyer-identity":{"label":"Update buyer identity","url":"/docs/storefronts/headless/hydrogen/cart/buyer-identity"},"notes":{"label":"Update notes","url":"/docs/storefronts/headless/hydrogen/cart/notes"},"attributes":{"label":"Update attributes","url":"/docs/storefronts/headless/hydrogen/cart/attributes"},"discount-codes":{"label":"Update discount codes","url":"/docs/storefronts/headless/hydrogen/cart/discount-codes"},"selected-delivery-options":{"label":"Update selected delivery options","url":"/docs/storefronts/headless/hydrogen/cart/selected-delivery-options"},"customize-cart-handler":{"label":"Customize cart handler methods","url":"/docs/storefronts/headless/hydrogen/cart/customize-cart-handler"},"variants":{"label":"Variant selector form","url":"/docs/storefronts/headless/hydrogen/cart/variant-selector"},"render-client-side":{"label":"Client-rendering carts","url":"/docs/storefronts/headless/hydrogen/cart/render-client-side"}}},"csp":{"label":"Content security policy","url":"/docs/storefronts/headless/hydrogen/content-security-policy"},"data_fetching":{"label":"Data fetching","children":{"fetch_data":{"label":"Shopify API data","url":"/docs/storefronts/headless/hydrogen/data-fetching"},"fetch_data_3p":{"label":"Third-party API data","url":"/docs/storefronts/headless/hydrogen/data-fetching/third-party"},"pagination":{"label":"Pagination","url":"/docs/storefronts/headless/hydrogen/data-fetching/pagination"},"graphiql":{"label":"GraphiQL","url":"/docs/storefronts/headless/hydrogen/data-fetching/graphiql"}}},"caching":{"label":"Caching","children":{"first_party":{"label":"Shopify API data","url":"/docs/storefronts/headless/hydrogen/caching"},"third_party":{"label":"Third-party data","url":"/docs/storefronts/headless/hydrogen/caching/third-party"},"full_page_cache":{"label":"Full-page cache","url":"/docs/storefronts/headless/hydrogen/caching/full-page-cache"}}},"i18n_h2":{"label":"Markets","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/markets"},"defaults":{"label":"Default locale","url":"/docs/storefronts/headless/hydrogen/markets/default-locale"},"subpaths2":{"label":"Multiple languages with URL paths","url":"/docs/storefronts/headless/hydrogen/markets/multiple-languages-url-paths"},"domains":{"label":"Multiple languages with domains","url":"/docs/storefronts/headless/hydrogen/markets/multiple-languages-domains"},"country":{"label":"Country selector","url":"/docs/storefronts/headless/hydrogen/markets/country-selector"},"detect":{"label":"Locale detection","url":"/docs/storefronts/headless/hydrogen/markets/locale-detection"}}},"seo":{"label":"SEO","url":"/docs/storefronts/headless/hydrogen/seo"},"storefronts":{"label":"Storefronts","url":"/docs/storefronts/headless/hydrogen/storefronts"},"environments":{"label":"Environments","url":"/docs/storefronts/headless/hydrogen/environments"},"deployments":{"label":"Deployments","children":{"oxygen":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/deployments"},"github":{"label":"CI/CD with GitHub","url":"/docs/storefronts/headless/hydrogen/deployments/github"},"custom_ci_cd":{"label":"Custom CI/CD","url":"/docs/storefronts/headless/hydrogen/deployments/custom-ci-cd"},"runtime":{"label":"Oxygen runtime","url":"/docs/storefronts/headless/hydrogen/deployments/oxygen-runtime"},"self_hosting":{"label":"Self-hosting Hydrogen","url":"/docs/storefronts/headless/hydrogen/deployments/self-hosting"}}},"debugging":{"label":"Debugging and testing","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/hydrogen/debugging"},"error_console":{"label":"Error console","url":"/docs/storefronts/headless/hydrogen/debugging/error-console"},"server_code":{"label":"Attach a debugger","url":"/docs/storefronts/headless/hydrogen/debugging/server-code"},"bundle_size":{"label":"Inspect your bundle size","url":"/docs/storefronts/headless/hydrogen/debugging/bundle-size"},"cpu_startup":{"label":"Measure CPU startup time","url":"/docs/storefronts/headless/hydrogen/debugging/cpu-startup"},"subrequest_profiler":{"label":"Profile data requests","url":"/docs/storefronts/headless/hydrogen/debugging/subrequest-profiler"},"e2e_testing":{"label":"End-to-end testing","url":"/docs/storefronts/headless/hydrogen/debugging/end-to-end-testing"},"log_drains":{"label":"Log drains","url":"/docs/storefronts/headless/hydrogen/logging"}}},"performance":{"label":"Performance","children":{"data_loading":{"label":"Data loading","url":"/docs/storefronts/headless/hydrogen/performance/data-loading"},"on_page_optimizations":{"label":"On-page optimizations","url":"/docs/storefronts/headless/hydrogen/performance/on-page-optimizations"}}},"migrate_upgrade":{"label":"Migrate and upgrade","children":{"migrate":{"label":"Migrate from Online Store","url":"/docs/storefronts/headless/hydrogen/migrate"},"redirects":{"label":"Redirect traffic from Online Store","url":"/docs/storefronts/headless/hydrogen/migrate/redirect-traffic"},"upgrade":{"label":"Upgrade Hydrogen 1 to 2 with Remix","url":"https://shopify.github.io/hydrogen-v1/migrate","force_in_new_tab":true}}},"checklist":{"label":"Production checklist","url":"/docs/storefronts/headless/hydrogen/production-checklist"},"shopify-cli":{"label":"Hydrogen CLI commands","url":"/docs/api/shopify-cli/hydrogen","stepIn":true,"force_in_new_tab":true},"hydrogen_reference":{"label":"Hydrogen API reference","url":"/docs/api/hydrogen","stepIn":true,"force_in_new_tab":true}}},"mobile_commerce_group":{"group_description":"Mobile commerce","links":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/mobile-apps"},"android":{"label":"Android Buy SDK","url":"/docs/storefronts/headless/mobile-apps/buy-sdk-android"},"ios":{"label":"iOS Buy SDK","url":"/docs/storefronts/headless/mobile-apps/buy-sdk-ios"}}},"bring_your_own_stack_group":{"group_description":"Bring your own stack","links":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/bring-your-own-stack"},"b2b":{"label":"Headless with B2B","url":"/docs/storefronts/headless/bring-your-own-stack/b2b"}}},"headless_api_group":{"group_description":"Headless APIs","links":{"storefront_api":{"label":"Building with the Storefront API","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/"},"getting_started":{"label":"Getting started","url":"/docs/storefronts/headless/building-with-the-storefront-api/getting-started"},"manage_headless":{"label":"Managing Headless channels","url":"/docs/storefronts/headless/building-with-the-storefront-api/manage-headless-channels"},"api_exploration":{"label":"API exploration","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/api-exploration"},"graphiql":{"label":"GraphiQL Storefront API explorer","url":"/docs/storefronts/headless/building-with-the-storefront-api/api-exploration/graphiql-storefront-api"},"learning_kit":{"label":"Storefront API learning kit","url":"https://github.com/Shopify/storefront-api-learning-kit"}}},"products":{"label":"Products and collections","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/"},"getting-started":{"label":"Getting started","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/getting-started"},"filtering":{"label":"Product filtering","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/filter-products"},"metafields":{"label":"Metafields","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/metafields"},"local_pickup":{"label":"Local pickup","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/local-pickup"},"subscriptions":{"label":"Subscriptions","url":"/docs/storefronts/headless/building-with-the-storefront-api/products-collections/subscriptions"}}},"search":{"label":"Search and discovery","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/search-discovery"},"search_tracking":{"label":"Set up search tracking","url":"/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking"}}},"i18n":{"label":"Markets","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/markets/"},"international_pricing":{"label":"International pricing","url":"/docs/storefronts/headless/building-with-the-storefront-api/markets/international-pricing"},"multiple_languages":{"label":"Multiple languages","url":"/docs/storefronts/headless/building-with-the-storefront-api/markets/multiple-languages"}}},"cart":{"label":"Cart","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart"},"manage":{"label":"Create and update a cart","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart/manage"},"migrate":{"label":"Migrate to the Cart API","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart/migrate-to-cart-api"},"migrate_cart":{"label":"Migrate your app","url":"/docs/storefronts/headless/building-with-the-storefront-api/cart/migrate-to-cart-api/migrate-your-app"}}}}},"customer_accounts":{"label":"Customers","url":"/docs/storefronts/headless/building-with-the-storefront-api/customer-accounts"},"defer_directive":{"label":"Prioritizing data in your query","url":"/docs/storefronts/headless/building-with-the-storefront-api/defer"},"release_notes":{"label":"Release notes","url":"/docs/api/release-notes/latest#graphql-storefront-api-changes","force_in_new_tab":true},"api_reference":{"label":"Storefront API reference","url":"/docs/api/storefront","stepIn":true,"force_in_new_tab":true}}},"customer_account_api":{"label":"Building with the Customer Account API","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/building-with-the-customer-account-api/"},"getting_started":{"label":"Getting started","url":"/docs/storefronts/headless/building-with-the-customer-account-api/getting-started"},"using_customer_account_api_with_hydrogen":{"label":"Using Customer Account API with Hydrogen","url":"/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen"},"customers":{"label":"Customers","url":"/docs/storefronts/headless/building-with-the-customer-account-api/customer-accounts"},"api_reference":{"label":"Customer Account API reference","url":"/docs/api/customer","stepIn":true,"force_in_new_tab":true}}},"additional_kits":{"label":"Additional SDKs","children":{"overview":{"label":"Overview","url":"/docs/storefronts/headless/additional-sdks"},"web_sdks":{"label":"Web SDKs","children":{"storefront_api_client":{"label":"Storefront API Client","url":"https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client"},"buy_button_js":{"label":"Buy Button JS","url":"/docs/storefronts/headless/additional-sdks/buy-button"},"js_buy":{"label":"JS Buy SDK","url":"/docs/storefronts/headless/additional-sdks/js-buy"},"web_components":{"label":"Web Components","url":"/docs/storefronts/headless/additional-sdks/web-components"}}},"server_backend_sdks":{"label":"Backend SDKs","children":{"node":{"label":"Node.js client library","url":"https://github.com/Shopify/shopify-api-node"},"php":{"label":"PHP client library","url":"https://github.com/Shopify/shopify-api-php"},"ruby":{"label":"Ruby client library","url":"https://github.com/Shopify/shopify-api-ruby"}}}}}}}},"api":{"heading":"APIs and references","overview_tools_group":{"group_description":"Overview and tools","links":{"api":{"label":"APIs, libraries, and tools","url":"/docs/api"},"shopify_app_remix":{"label":"Remix app package","stepIn":true,"url":"/docs/api/shopify-app-remix"},"cli":{"label":"Shopify CLI","url":"/docs/api/shopify-cli","stepIn":true},"github_app":{"label":"Shopify GitHub app","url":"/docs/api/github-app"},"dev_stores":{"label":"Dev stores","children":{"overview":{"label":"About dev stores","url":"/docs/api/development-stores"},"test_data":{"label":"Generated test data","url":"/docs/api/development-stores/generated-test-data"}}},"usage":{"label":"Shopify APIs","children":{"overview":{"label":"About Shopify APIs","url":"/docs/api/usage"},"authentication":{"label":"Authentication","url":"/docs/api/usage/authentication"},"access_scopes":{"label":"Access scopes","url":"/docs/api/usage/access-scopes"},"api_exploration":{"label":"API exploration","children":{"admin-graphiql-explorer":{"label":"Admin GraphiQL Explorer","url":"/docs/api/usage/api-exploration/admin-graphiql-explorer"},"storefront-graphiql-explorer":{"label":"Storefront GraphiQL Explorer","url":"/docs/api/usage/api-exploration/storefront-graphiql-explorer"}}},"versioning":{"label":"Versioning","children":{"overview":{"label":"About versioning","url":"/docs/api/usage/versioning"},"updates":{"label":"Getting updates","url":"/docs/api/usage/versioning/updates"},"api-health-report":{"label":"API health report","url":"/docs/api/usage/versioning/api-health"}}},"gids":{"label":"Global IDs","url":"/docs/api/usage/gids"},"rate_limit":{"label":"Rate limits","url":"/docs/api/usage/rate-limits"},"search_syntax":{"label":"Search syntax","url":"/docs/api/usage/search-syntax"},"response_codes":{"label":"Response status codes","url":"/docs/api/usage/response-codes"},"idempotent_request":{"label":"Idempotent requests","url":"/docs/api/usage/idempotent-requests"},"bulk":{"label":"Bulk operations","children":{"query":{"label":"Exports and queries","url":"/docs/api/usage/bulk-operations/queries"},"mutation":{"label":"Imports and mutations","url":"/docs/api/usage/bulk-operations/imports"}}},"pagination":{"label":"About GraphQL pagination","url":"/docs/api/usage/pagination-graphql"}}},"release_notes":{"label":"API version release notes","children":{"overview":{"label":"About the release notes","url":"/docs/api/release-notes"},"developer_previews":{"label":"Developer previews","url":"/docs/api/release-notes/developer-previews"},"2025-01":{"label":"2025-01 (release candidate)","url":"/docs/api/release-notes/2025-01"},"2024-10":{"label":"2024-10","url":"/docs/api/release-notes/2024-10"},"2024-07":{"label":"2024-07","url":"/docs/api/release-notes/2024-07"},"2024-04":{"label":"2024-04","url":"/docs/api/release-notes/2024-04"},"2024-01":{"label":"2024-01","url":"/docs/api/release-notes/2024-01"},"previous_versions":{"label":"Previous versions","url":"/docs/api/release-notes/previous-versions"}}}}},"app_data_logic_group":{"group_description":"App data and logic","links":{"graphql_admin":{"label":"GraphQL Admin API","stepIn":true,"url":"/docs/api/admin-graphql"},"shopify_functions":{"label":"Shopify Functions","children":{"overview":{"label":"About Shopify Functions APIs","url":"/docs/api/functions"},"shopifyvm_apis":{"label":"API references","children":{"cart_checkout_validation":{"label":"Cart and Checkout Validation API","children":{"overview":{"label":"About the Cart and Checkout Validation API","url":"/docs/api/functions/reference/cart-checkout-validation"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/cart-checkout-validation/graphql"}}},"cart_transform":{"label":"Cart Transform API","children":{"overview":{"label":"About the Cart Transform API","url":"/docs/api/functions/reference/cart-transform"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/cart-transform/graphql"}}},"pickup_point_delivery_option_generator":{"label":"Pickup Point Delivery Option Generator API","children":{"overview":{"label":"About the Pickup Point Delivery Option Generator API","url":"/docs/api/functions/reference/pickup-point-delivery-option-generator"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/pickup-point-delivery-option-generator/graphql"}}},"delivery_customization":{"label":"Delivery Customization API","children":{"overview":{"label":"About the Delivery Customization API","url":"/docs/api/functions/reference/delivery-customization"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/delivery-customization/graphql"}}},"disc":{"label":"Discounts APIs","children":{"order_discounts":{"label":"Order Discount API","children":{"overview":{"label":"About the Order Discount API","url":"/docs/api/functions/reference/order-discounts"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/order-discounts/graphql"}}},"product_discounts":{"label":"Product Discount API","children":{"overview":{"label":"About the Product Discount API","url":"/docs/api/functions/reference/product-discounts"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/product-discounts/graphql"}}},"shipping_discounts":{"label":"Shipping Discount API","children":{"overview":{"label":"About the Shipping Discount Function","url":"/docs/api/functions/reference/shipping-discounts"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/shipping-discounts/graphql"}}},"discounts_allocator":{"label":"Discounts Allocator API","children":{"overview":{"label":"About the Discounts Allocator API","url":"/docs/api/functions/reference/discounts-allocator"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/discounts-allocator/graphql"}}}}},"fulfillment_constraints":{"label":"Fulfillment Constraints API","children":{"overview":{"label":"About the Fulfillment Constraints API","url":"/docs/api/functions/reference/fulfillment-constraints"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/fulfillment-constraints/graphql"}}},"local_pickup_delivery_option_generator":{"label":"Local Pickup Delivery Option Generator API","children":{"overview":{"label":"About the Local Pickup Delivery Option Generator API","url":"/docs/api/functions/reference/local-pickup-delivery-option-generator"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/local-pickup-delivery-option-generator/graphql"}}},"order_routing_location_rule":{"label":"Order Routing Location Rule API","children":{"overview":{"label":"About the Order Routing Location Rule API","url":"/docs/api/functions/reference/order-routing-location-rule"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/order-routing-location-rule/graphql"}}},"payment_customization":{"label":"Payment Customization API","children":{"overview":{"label":"About the Payment Customization API","url":"/docs/api/functions/reference/payment-customization"},"reference":{"label":"GraphQL reference","url":"/docs/api/functions/reference/payment-customization/graphql"}}}}},"configuration":{"label":"Configuration","url":"/docs/api/functions/configuration"}}},"partner":{"label":"Partner API","stepIn":true,"url":"/docs/api/partner"},"payments":{"label":"Payments Apps API","stepIn":true,"url":"/docs/api/payments-apps"},"webhooks":{"label":"Webhooks","stepIn":true,"url":"/docs/api/webhooks"},"rest_admin_legacy":{"label":"REST Admin API (legacy)","children":{"reference":{"label":"Reference","stepIn":true,"url":"/docs/api/admin-rest"},"api_usage":{"label":"API usage","children":{"access_scopes":{"label":"Access scopes","url":"/docs/api/admin-rest/usage/access-scopes"},"versioning":{"label":"Versioning","url":"/docs/api/admin-rest/usage/versioning"},"simple_ids":{"label":"Simple IDs","url":"/docs/api/admin-rest/usage/simple-ids"},"rate-limits":{"label":"Rate limits","url":"/docs/api/admin-rest/usage/rate-limits"},"idempotent_requests":{"label":"Idempotent requests","url":"/docs/api/admin-rest/usage/idempotent-requests"},"pagination":{"label":"Pagination","url":"/docs/api/admin-rest/usage/pagination"}}}}}}},"app_experience_group":{"group_description":"App experience","links":{"app-bridge":{"label":"App Bridge","children":{"overview":{"label":"About App Bridge","url":"/docs/api/app-bridge"},"reference":{"label":"Reference","url":"/docs/api/app-bridge-library"},"modals":{"label":"Using modals in your app","url":"/docs/api/app-bridge/using-modals-in-your-app"},"migrating":{"label":"Migration guide","url":"/docs/api/app-bridge/migration-guide"},"app_bridge_3":{"label":"Previous versions","children":{"getting_started":{"label":"App Bridge from npm","children":{"setup":{"label":"App setup","url":"/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup"},"using_react":{"label":"Using React","url":"/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react"}}},"actions":{"label":"Actions","children":{"overview":{"label":"About actions","url":"/docs/api/app-bridge/previous-versions/actions"},"appState":{"label":"App state","url":"/docs/api/app-bridge/previous-versions/actions/app-state"},"button":{"label":"Button","url":"/docs/api/app-bridge/previous-versions/actions/button"},"buttongroup":{"label":"ButtonGroup","url":"/docs/api/app-bridge/previous-versions/actions/buttongroup"},"cart":{"label":"Cart","url":"/docs/api/app-bridge/previous-versions/actions/cart"},"contextualSaveBar":{"label":"ContextualSaveBar","url":"/docs/api/app-bridge/previous-versions/actions/contextualsavebar"},"error":{"label":"Error","url":"/docs/api/app-bridge/previous-versions/actions/error"},"features":{"label":"Features","url":"/docs/api/app-bridge/previous-versions/actions/features"},"fullscreen":{"label":"Fullscreen","url":"/docs/api/app-bridge/previous-versions/actions/fullscreen"},"loading":{"label":"Loading","url":"/docs/api/app-bridge/previous-versions/actions/loading"},"menu":{"label":"Menu","children":{"overview":{"label":"About Menu actions","url":"/docs/api/app-bridge/previous-versions/actions/menu"},"channel":{"label":"Channel Menu","url":"/docs/api/app-bridge/previous-versions/actions/menu/channel"},"navigation":{"label":"Navigation Menu","url":"/docs/api/app-bridge/previous-versions/actions/menu/navigation"}}},"modal":{"label":"Modal","url":"/docs/api/app-bridge/previous-versions/actions/modal"},"navigation":{"label":"Navigation","children":{"overview":{"label":"About Navigation actions","url":"/docs/api/app-bridge/previous-versions/actions/navigation"},"history":{"label":"History","url":"/docs/api/app-bridge/previous-versions/actions/navigation/history"},"redirect":{"label":"Redirect / Navigate","url":"/docs/api/app-bridge/previous-versions/actions/navigation/redirect-navigate"}}},"pos":{"label":"POS","url":"/docs/api/app-bridge/previous-versions/actions/pos"},"picker":{"label":"unstable_Picker","url":"/docs/api/app-bridge/previous-versions/actions/picker"},"resourcepicker":{"label":"ResourcePicker","url":"/docs/api/app-bridge/previous-versions/actions/resourcepicker"},"scanner":{"label":"Scanner","url":"/docs/api/app-bridge/previous-versions/actions/scanner"},"share":{"label":"Sharing","url":"/docs/api/app-bridge/previous-versions/actions/share"},"titleBar":{"label":"TitleBar","url":"/docs/api/app-bridge/previous-versions/actions/titlebar"},"toast":{"label":"Toast","url":"/docs/api/app-bridge/previous-versions/actions/toast"}}},"methods":{"label":"Methods","url":"/docs/api/app-bridge/previous-versions/methods"},"debugging":{"label":"Debugging","url":"/docs/api/app-bridge/previous-versions/debugging"}}}}},"admin":{"label":"Admin extensions","children":{"overview":{"label":"About admin extensions","stepIn":true,"url":"/docs/api/admin-extensions"},"extension_points_api":{"label":"APIs","stepIn":true,"url":"/docs/api/admin-extensions/api"},"components":{"label":"Components","stepIn":true,"url":"/docs/api/admin-extensions/components"}}},"checkout":{"label":"Checkout","children":{"overview":{"label":"About checkout app extensions","url":"/docs/api/checkout-extensions"},"in_checkout":{"label":"Checkout UI","stepIn":true,"url":"/docs/api/checkout-ui-extensions"},"post_purchase":{"label":"Post-purchase","children":{"overview":{"label":"About post-purchase extensions","url":"/docs/api/checkout-extensions/post-purchase"},"configuration":{"label":"Configuration","url":"/docs/api/checkout-extensions/post-purchase/configuration"},"extension_points_api":{"label":"Extension points API","url":"/docs/api/checkout-extensions/post-purchase/api"},"components":{"label":"Components","url":"/docs/api/checkout-extensions/post-purchase/components"},"jwt-specification":{"label":"JWT specification","url":"/docs/api/checkout-extensions/post-purchase/jwt-specification"}}}}},"customer_accounts":{"label":"Customer account","children":{"overview":{"label":"About customer account extensions","stepIn":true,"url":"/docs/api/customer-account-ui-extensions"},"targets":{"label":"Targets","stepIn":true,"url":"/docs/api/customer-account-ui-extensions/targets"},"apis":{"label":"APIs","stepIn":true,"url":"/docs/api/customer-account-ui-extensions/apis"},"components":{"label":"Components","stepIn":true,"url":"/docs/api/customer-account-ui-extensions/components"}}},"discounts":{"label":"Discount components","children":{"overview":{"label":"About discount components","url":"/docs/api/discounts"},"components":{"label":"Components","children":{"activeDatesCard":{"label":"ActiveDatesCard","url":"/docs/api/discounts/components/active-dates-card"},"appProvider":{"label":"AppProvider","url":"/docs/api/discounts/components/app-provider"},"combinationCard":{"label":"CombinationCard","url":"/docs/api/discounts/components/combination-card"},"countriesAndRatesCard":{"label":"CountriesAndRatesCard","url":"/docs/api/discounts/components/countries-and-rates-card"},"customerEligibilityCard":{"label":"CustomerEligibilityCard","url":"/docs/api/discounts/components/customer-eligibility-card"},"methodCard":{"label":"MethodCard","url":"/docs/api/discounts/components/method-card"},"minimumRequirementsCard":{"label":"MinimumRequirementsCard","url":"/docs/api/discounts/components/minimum-requirements-card"},"purchaseTypeCard":{"label":"PurchaseTypeCard","url":"/docs/api/discounts/components/purchase-type-card"},"summaryCard":{"label":"SummaryCard","url":"/docs/api/discounts/components/summary-card"},"usageLimitsCard":{"label":"UsageLimitsCard","url":"/docs/api/discounts/components/usage-limits-card"}}}}},"marketing":{"label":"Marketing activities","children":{"overview":{"label":"About marketing activities app extensions","url":"/docs/api/marketing-activities"},"components":{"label":"Components","url":"/docs/api/marketing-activities/components"},"endpoints":{"label":"Endpoints","url":"/docs/api/marketing-activities/endpoints"},"statuses":{"label":"Statuses","url":"/docs/api/marketing-activities/statuses"}}},"pos":{"label":"Shopify Point of Sale","children":{"overview":{"label":"About Shopify Point of Sale app extensions","url":"/docs/api/pos-extensions"},"ui-extensions":{"label":"UI extensions reference","children":{"overview":{"label":"About POS UI extensions","stepIn":true,"url":"/docs/api/pos-ui-extensions"},"targets":{"label":"Extension targets","stepIn":true,"url":"/docs/api/pos-ui-extensions/targets"},"apis":{"label":"APIs","stepIn":true,"url":"/docs/api/pos-ui-extensions/apis"},"components":{"label":"Components","stepIn":true,"url":"/docs/api/pos-ui-extensions/components"},"versions":{"label":"Versions","stepIn":true,"url":"/docs/api/pos-ui-extensions/versions"},"migration":{"label":"Migration guide","stepIn":true,"url":"/docs/api/pos-ui-extensions/migrating"}}},"cart":{"label":"Cart extension reference","url":"/docs/api/pos-extensions/cart-reference"},"recommendations":{"label":"Product recommendations reference","url":"/docs/api/pos-extensions/product-recommendations-reference"}}},"product_subscription":{"label":"Product subscriptions","children":{"overview":{"label":"About product subscription app extensions","url":"/docs/api/product-subscription-extensions"},"extension_points_apis":{"label":"Extension points APIs","url":"/docs/api/product-subscription-extensions/api"},"components":{"label":"Components","url":"/docs/api/product-subscription-extensions/components"}}}}},"storefronts_group":{"group_description":"Storefronts","links":{"storefront":{"label":"Storefront API","stepIn":true,"url":"/docs/api/storefront"},"liquid":{"label":"Liquid","stepIn":true,"url":"/docs/api/liquid"},"ajax_api":{"label":"Ajax API","children":{"overview":{"label":"About the Ajax API","url":"/docs/api/ajax"},"reference":{"label":"Reference","url":"/docs/api/ajax/reference","children":{"cart":{"label":"Cart","url":"/docs/api/ajax/reference/cart"},"product":{"label":"Product","url":"/docs/api/ajax/reference/product"},"product_recommendations":{"label":"Product recommendations","url":"/docs/api/ajax/reference/product-recommendations"},"predictive_search":{"label":"Predictive search","url":"/docs/api/ajax/reference/predictive-search"}}},"section_rendering_api":{"label":"Section Rendering API","url":"/docs/api/ajax/section-rendering"}}},"hydrogen_2":{"label":"Hydrogen framework","stepIn":true,"url":"/docs/api/hydrogen"},"hydrogen_react":{"label":"Hydrogen React library","stepIn":true,"url":"/docs/api/hydrogen-react"},"customer_privacy_api":{"label":"Customer Privacy API","url":"/docs/api/customer-privacy"},"customer_account_api":{"label":"Customer Account API","stepIn":true,"url":"/docs/api/customer"}}},"additional_apis_group":{"group_description":"Additional APIs","links":{"blockchain":{"label":"Blockchain","children":{"overview":{"label":"About blockchain components","url":"/docs/api/blockchain"},"components":{"label":"Components","url":"/docs/api/blockchain/components","children":{"connect-wallet":{"label":"Connect wallet","url":"/docs/api/blockchain/components/connect-wallet"},"tokengate":{"label":"Tokengate","url":"/docs/api/blockchain/components/tokengate"}}},"theming":{"label":"Theming","url":"/docs/api/blockchain/theming"},"analytics":{"label":"Analytics","url":"/docs/api/blockchain/analytics"}}},"multipass":{"label":"Multipass","url":"/docs/api/multipass"},"shopifyql":{"label":"ShopifyQL for analytics","children":{"overview":{"label":"About ShopifyQL for analytics","url":"/docs/api/shopifyql"},"shopifyql-reference":{"label":"ShopifyQL reference","url":"/docs/api/shopifyql/shopifyql-reference"},"segment-query-language-reference":{"label":"Segment query language reference","url":"/docs/api/shopifyql/segment-query-language-reference"},"datasets":{"label":"Datasets","url":"/docs/api/shopifyql/datasets","children":{"orders-dataset":{"label":"Orders dataset","url":"/docs/api/shopifyql/datasets/orders-dataset"},"products-dataset":{"label":"Products dataset","url":"/docs/api/shopifyql/datasets/products-dataset"},"payment-attempts-dataset":{"label":"Payment attempts dataset","url":"/docs/api/shopifyql/datasets/payment-attempts-dataset"}}}}},"pixels":{"label":"Web pixel","children":{"overview":{"label":"About Web pixel app extensions","url":"/docs/api/pixels"},"extension_api":{"label":"Web Pixels API","stepIn":true,"url":"/docs/api/web-pixels-api"}}}}}},"beta":{"heading":"Beta","pos_extension_migration":{"pos_extension_migration_group":{"group_description":"POS unified extension migration.","links":{"pos_extension_migration":{"label":"POS unified extension migration","url":"/beta/pos-extension-migration"}}}},"awareness_ads":{"awareness_ads_group":{"group_description":"Purchase awareness ads.","links":{"awareness_ads":{"label":"Awareness ads","url":"/beta/awareness-ads"}}}},"managed_pricing":{"managed_pricing_group":{"group_description":"Managed app pricing","links":{"managed_pricing":{"label":"Managed app pricing","url":"/beta/managed-pricing/getting-started"}}}},"shipping_partner_platform":{"shipping_partner_platform_group":{"group_description":"Shipping Partner Platform","links":{"shipping_partner_platform":{"label":"Shipping Partner Platform","children":{"overview":{"label":"Overview","url":"/beta/shipping-partner-platform"},"file-uploads":{"label":"File Uploads","url":"/beta/shipping-partner-platform/file-uploads","children":{"generic-rate-cards":{"label":"Generic Rate Cards","url":"/beta/shipping-partner-platform/file-uploads/generic-rate-cards"}}},"grc":{"label":"Generic Rate Cards","children":{"overview":{"label":"Overview","url":"/beta/shipping-partner-platform/generic-rate-cards"},"settings-global":{"label":"Settings Global File format","url":"/beta/shipping-partner-platform/generic-rate-cards/settings-global-file-format"},"zones":{"label":"Zones File format","url":"/beta/shipping-partner-platform/generic-rate-cards/zones-file-format"},"conditions":{"label":"Conditions File format","url":"/beta/shipping-partner-platform/generic-rate-cards/conditions-file-format"},"mail_services":{"label":"Mail Services File format","url":"/beta/shipping-partner-platform/generic-rate-cards/mail-services-file-format"},"package_types":{"label":"Package Types File format","url":"/beta/shipping-partner-platform/generic-rate-cards/package-types-file-format"},"settings_rates":{"label":"Settings Rates File format","url":"/beta/shipping-partner-platform/generic-rate-cards/settings-rates-file-format"},"base_rates":{"label":"Base Rates File format","url":"/beta/shipping-partner-platform/generic-rate-cards/base-rates-file-format"},"flat_rates":{"label":"Flat Rates File format","url":"/beta/shipping-partner-platform/generic-rate-cards/flat-rates-file-format"},"shipment_options":{"label":"Shipment Options File format","url":"/beta/shipping-partner-platform/generic-rate-cards/shipment-options-file-format"},"surcharges":{"label":"Surcharges File format","url":"/beta/shipping-partner-platform/generic-rate-cards/surcharges-file-format"},"time_in_transit":{"label":"Time in Transit File format","url":"/beta/shipping-partner-platform/generic-rate-cards/time-in-transit-file-format"},"facility_time_in_transit":{"label":"Facility Time in Transit File format","url":"/beta/shipping-partner-platform/generic-rate-cards/facility-time-in-transit-file-format"},"postal_code_to_facility_code":{"label":"Postal Code to Facility Code File format","url":"/beta/shipping-partner-platform/generic-rate-cards/postal-code-to-facility-code-file-format"},"messages":{"label":"Messages File format","url":"/beta/shipping-partner-platform/generic-rate-cards/messages-file-format"}}},"pickup_points":{"label":"Pickup Points","children":{"specification":{"label":"File format","url":"/beta/shipping-partner-platform/pickup-points/file-format"}}}}}}}}},"workshops":{"heading":"Training","hydrogen":{"hydrogen_workshops_group":{"group_description":"Curriculum","links":{"welcome":{"label":"Welcome","url":"/workshops/hydrogen"},"pre-work":{"label":"Pre-work","url":"/workshops/hydrogen/begin-development"},"day_1":{"label":"Day 1","children":{"remix":{"label":"Remix core concepts","url":"/workshops/hydrogen/remix"},"home_page":{"label":"Build a home page","url":"/workshops/hydrogen/collection-page"}}},"day_2":{"label":"Day 2","children":{"oxygen":{"label":"Deploy with Oxygen","url":"/workshops/hydrogen/deploy-oxygen"},"product_page":{"label":"Build a product page","url":"/workshops/hydrogen/product-page"}}},"day_3":{"label":"Day 3","children":{"cart":{"label":"Build a cart page","url":"/workshops/hydrogen/cart-page"}}}}}}}}}; window.I18n.globals = {"total_blog_subscribers":"446,005","trial_length":3,"custom_signup_header":""}; //]]> </script> <script> //<![CDATA[ window.RailsData = {"features":["adaptive_rate_limiter","automated_privacy","cli_managed_subscription_link_creation_and_migration","combined_listings","conditionally_disable_gift_cards","customer_account_ui_extensions_stable_docs","dat_scheduled_feature_tho","discounts_allocator_function","editor_extension_collections_docs","enforce_fulfillment_order_status_on_create_fulfillment","explicit_buyer_consent","extensions_only_discounts_app","flex_sections","gql_ai","gql_ai_v2","gql_example_switcher","gql_operation_cache","headless_cmp","mockshop_ai","mockshop_ai_disable_force_ai","net_new_webhooks_reference_2024","online_store_new_datasources","product_discount_cart_line_targeting","rest_admin_api_deprecation","rev_share_jan24","sched_2","schedule_test","shipping_discount_functions_general_availability","static_blocks","style_settings","theme_blocks","theme_blocks_data_sources","versioned_app_config","zero_redirect_auth"],"enable_theme_mode":true,"search":{"selectable_versions":{"default":{"values":["unstable","2025-01","2024-10","2024-07","2024-04","2024-01"],"stable_version":"2024-10"},"API: Admin Extensions":{"stable_version":"unstable","values":["unstable","2024-10","2024-07","2024-04","2024-01","2023-10"]},"API: Checkout UI extensions":{"stable_version":"unstable","values":["unstable","2024-10","2024-07","2024-04","2024-01","2023-10","2023-07","2023-04"]},"API: Customer account UI extensions":{"stable_version":"unstable","values":["unstable","2024-10"]},"API: Hydrogen":{"stable_version":"2024-10","values":["2024-10","2024-07","2024-04","2024-01","2023-10","2023-07","2023-04"]},"API: Hydrogen React":{"stable_version":"2024-10","values":["2024-10","2024-07","2024-04","2024-01","2023-10","2023-07","2023-04","2023-01"]},"API: POS UI Extensions":{"stable_version":"unstable","values":["unstable","2024-10","2024-07","2024-04"]},"API: shopify app remix":{"stable_version":"v3","values":["v3","v2","v1"]},"API: Webhooks":{"stable_version":"unstable","values":["unstable","2025-01","2024-10","2024-07","2024-04","2024-01"]}},"categories":{"API: Admin Extensions":{"reference_name":"admin-extensions","versioned":true,"cookie_name":"api_version"},"API: App Bridge Library":{"reference_name":"app-bridge-library","versioned":false,"cookie_name":"api_version"},"API: Checkout UI extensions":{"reference_name":"checkout-ui-extensions","versioned":true,"cookie_name":"api_version"},"API: Customer account UI extensions":{"reference_name":"customer-account-ui-extensions","versioned":true,"cookie_name":"api_version"},"API: Hydrogen":{"reference_name":"hydrogen","versioned":true,"cookie_name":"api_version"},"API: Hydrogen React":{"reference_name":"hydrogen-react","versioned":true,"cookie_name":"api_version"},"API: Hydrogen UI":{"reference_name":"hydrogen-ui","versioned":false,"cookie_name":"api_version"},"API: POS UI Extensions":{"reference_name":"pos-ui-extensions","versioned":true,"cookie_name":"api_version"},"API: shopify app remix":{"reference_name":"shopify-app-remix","versioned":true,"cookie_name":"api_version_shopify-app-remix"},"API: Shopify CLI":{"reference_name":"shopify-cli","versioned":false,"cookie_name":"api_version"},"API: Web Pixels API":{"reference_name":"web-pixels-api","versioned":false,"cookie_name":"api_version"},"API: Webhooks":{"reference_name":"webhooks","versioned":true,"cookie_name":"api_version"}}},"env":"production","bugsnagApiKey":"fc1be50c64e992230ef8ca972c17217c","url_section":"storefronts","markdown_path":"content/storefronts/themes/architecture/settings/input-settings.md","sidebarData":{"heading":"Themes","groups":[{"label":"Getting started","isGroup":true,"children":[{"label":"Overview","href":"/docs/storefronts/themes"},{"label":"Getting started","children":[{"label":"Overview","href":"/docs/storefronts/themes/getting-started"},{"label":"Create a theme","href":"/docs/storefronts/themes/getting-started/create"},{"label":"Customize a theme","href":"/docs/storefronts/themes/getting-started/customize"}]},{"label":"Architecture","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture"},{"label":"Layouts","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/layouts"},{"label":"checkout.liquid","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/layouts/checkout-liquid"},{"label":"Customize checkout.liquid","href":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/customize-checkout"},{"label":"Checkout CSS","href":"/docs/storefronts/themes/architecture/layouts/checkout-liquid/checkout-css"}]}]},{"label":"Templates","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/templates"},{"label":"JSON templates","href":"/docs/storefronts/themes/architecture/templates/json-templates"},{"label":"article","href":"/docs/storefronts/themes/architecture/templates/article"},{"label":"blog","href":"/docs/storefronts/themes/architecture/templates/blog"},{"label":"cart","href":"/docs/storefronts/themes/architecture/templates/cart"},{"label":"collection","href":"/docs/storefronts/themes/architecture/templates/collection"},{"label":"customers/account","href":"/docs/storefronts/themes/architecture/templates/customers-account"},{"label":"customers/activate_account","href":"/docs/storefronts/themes/architecture/templates/customers-activate-account"},{"label":"customers/addresses","href":"/docs/storefronts/themes/architecture/templates/customers-addresses"},{"label":"customers/login","href":"/docs/storefronts/themes/architecture/templates/customers-login"},{"label":"customers/order","href":"/docs/storefronts/themes/architecture/templates/customers-order"},{"label":"customers/register","href":"/docs/storefronts/themes/architecture/templates/customers-register"},{"label":"customers/reset_password","href":"/docs/storefronts/themes/architecture/templates/customers-reset-password"},{"label":"gift_card.liquid","href":"/docs/storefronts/themes/architecture/templates/gift-card-liquid"},{"label":"index","href":"/docs/storefronts/themes/architecture/templates/index-template"},{"label":"list-collections","href":"/docs/storefronts/themes/architecture/templates/list-collections"},{"label":"metaobject","href":"/docs/storefronts/themes/architecture/templates/metaobject"},{"label":"page","href":"/docs/storefronts/themes/architecture/templates/page"},{"label":"password","href":"/docs/storefronts/themes/architecture/templates/password"},{"label":"product","href":"/docs/storefronts/themes/architecture/templates/product"},{"label":"robots.txt.liquid","href":"/docs/storefronts/themes/architecture/templates/robots-txt-liquid"},{"label":"search","href":"/docs/storefronts/themes/architecture/templates/search"},{"label":"404","href":"/docs/storefronts/themes/architecture/templates/404"}]},{"label":"Sections","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/sections"},{"label":"Section schema","href":"/docs/storefronts/themes/architecture/sections/section-schema"},{"label":"Section assets","href":"/docs/storefronts/themes/architecture/sections/section-assets"},{"label":"Integrate with the theme editor","href":"/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-editor"}]},{"label":"Blocks","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/blocks"},{"label":"Section blocks","href":"/docs/storefronts/themes/architecture/blocks/section-blocks"},{"label":"Theme blocks","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks"},{"label":"Block schema","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/schema"},{"label":"Static Blocks","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks"},{"label":"Dynamic sources","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/dynamic-sources"},{"label":"Developer preview","href":"/docs/storefronts/themes/architecture/blocks/theme-blocks/developer-preview"}]},{"label":"App blocks","href":"/docs/storefronts/themes/architecture/blocks/app-blocks"}]},{"label":"Section groups","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/section-groups"},{"label":"Migrate","href":"/docs/storefronts/themes/architecture/section-groups/migrate"}]},{"label":"Config","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/config"},{"label":"settings_schema.json","href":"/docs/storefronts/themes/architecture/config/settings-schema-json"},{"label":"settings_data.json","href":"/docs/storefronts/themes/architecture/config/settings-data-json"}]},{"label":"Locales","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/locales"},{"label":"Schema locale files","href":"/docs/storefronts/themes/architecture/locales/schema-locale-files"},{"label":"Storefront locale files","href":"/docs/storefronts/themes/architecture/locales/storefront-locale-files"}]},{"label":"Settings","children":[{"label":"Overview","href":"/docs/storefronts/themes/architecture/settings"},{"label":"Input settings","href":"/docs/storefronts/themes/architecture/settings/input-settings"},{"label":"Style settings","href":"/docs/storefronts/themes/architecture/settings/style-settings"},{"label":"Sidebar settings","href":"/docs/storefronts/themes/architecture/settings/sidebar-settings"},{"label":"Dynamic sources","href":"/docs/storefronts/themes/architecture/settings/dynamic-sources"},{"label":"Fonts","href":"/docs/storefronts/themes/architecture/settings/fonts"},{"label":"Deprecated settings","href":"/docs/storefronts/themes/architecture/settings/deprecated-settings"}]}]},{"label":"Developer tools","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools"},{"label":"CLI","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/cli"},{"label":"CI/CD","href":"/docs/storefronts/themes/tools/cli/ci-cd"},{"label":"Commands","href":"/docs/api/shopify-cli/theme","stepIn":true},{"label":"Language Server","href":"/docs/storefronts/themes/tools/cli/language-server"},{"label":"Environments","href":"/docs/storefronts/themes/tools/cli/environments"},{"label":"Migrate","href":"/docs/storefronts/themes/tools/cli/migrate"},{"label":"CLI 2.x","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/cli/cli-2"},{"label":"Commands","href":"/docs/storefronts/themes/tools/cli/cli-2/commands"},{"label":"Install, upgrade, or uninstall","href":"/docs/storefronts/themes/tools/cli/cli-2/upgrade-uninstall"}]}]},{"label":"GitHub integration","href":"/docs/storefronts/themes/tools/github"},{"label":"VS Code extension","href":"/docs/storefronts/themes/tools/shopify-liquid-vscode"},{"label":"Prettier plugin","href":"/docs/storefronts/themes/tools/liquid-prettier-plugin"},{"label":"Theme Check","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/theme-check"},{"label":"Commands","href":"/docs/storefronts/themes/tools/theme-check/commands"},{"label":"Configuration","href":"/docs/storefronts/themes/tools/theme-check/configuration"},{"label":"Checks reference","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/theme-check/checks"},{"label":"AppBlockValidTags","href":"/docs/storefronts/themes/tools/theme-check/checks/app-block-valid-tags"},{"label":"AssetPreload","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-preload"},{"label":"AssetSizeAppBlockCSS","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-css"},{"label":"AssetSizeAppBlockJavascript","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-javascript"},{"label":"AssetSizeCSS","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-css"},{"label":"AssetSizeJavascript","href":"/docs/storefronts/themes/tools/theme-check/checks/asset-size-javascript"},{"label":"BlockIdUsage","href":"/docs/storefronts/themes/tools/theme-check/checks/block-id-usage"},{"label":"CaptureOnContentForBlock","href":"/docs/storefronts/themes/tools/theme-check/checks/capture-on-content-for-block"},{"label":"CdnPreconnect","href":"/docs/storefronts/themes/tools/theme-check/checks/cdn-preconnect"},{"label":"ContentForHeaderModification","href":"/docs/storefronts/themes/tools/theme-check/checks/content-for-header-modification"},{"label":"DeprecateBgsizes","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes"},{"label":"DeprecateLazysizes","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecate-lazysizes"},{"label":"DeprecatedFilter","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-filter"},{"label":"DeprecatedTag","href":"/docs/storefronts/themes/tools/theme-check/checks/deprecated-tag"},{"label":"ImgWidthAndHeight","href":"/docs/storefronts/themes/tools/theme-check/checks/img-width-and-height"},{"label":"JSONSyntaxError","href":"/docs/storefronts/themes/tools/theme-check/checks/json-syntax-error"},{"label":"LiquidHTMLSyntaxError","href":"/docs/storefronts/themes/tools/theme-check/checks/liquid-html-syntax-error"},{"label":"MatchingTranslations","href":"/docs/storefronts/themes/tools/theme-check/checks/matching-translations"},{"label":"MatchingSchemaTranslations","href":"/docs/storefronts/themes/tools/theme-check/checks/matching-schema-translations"},{"label":"MissingAsset","href":"/docs/storefronts/themes/tools/theme-check/checks/missing-asset"},{"label":"MissingTemplate","href":"/docs/storefronts/themes/tools/theme-check/checks/missing-template"},{"label":"PaginationSize","href":"/docs/storefronts/themes/tools/theme-check/checks/pagination-size"},{"label":"ParserBlockingJavaScript","href":"/docs/storefronts/themes/tools/theme-check/checks/parser-blocking-javascript"},{"label":"RemoteAsset","href":"/docs/storefronts/themes/tools/theme-check/checks/remote-asset"},{"label":"RequiredLayoutThemeObject","href":"/docs/storefronts/themes/tools/theme-check/checks/required-layout-theme-object"},{"label":"TranslationKeyExists","href":"/docs/storefronts/themes/tools/theme-check/checks/translation-key-exists"},{"label":"UnclosedHTMLElement","href":"/docs/storefronts/themes/tools/theme-check/checks/unclosed-html-element"},{"label":"UndefinedObject","href":"/docs/storefronts/themes/tools/theme-check/checks/undefined-object"},{"label":"UniqueStaticBlockId","href":"/docs/storefronts/themes/tools/theme-check/checks/unique-static-block-id"},{"label":"UnknownFilter","href":"/docs/storefronts/themes/tools/theme-check/checks/unknown-filter"},{"label":"UnusedAssign","href":"/docs/storefronts/themes/tools/theme-check/checks/unused-assign"},{"label":"ValidBlockTarget","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-block-target"},{"label":"ValidContentForArguments","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-content-for-arguments"},{"label":"ValidHTMLTranslation","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-html-translation"},{"label":"ValidLocalBlocks","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-local-blocks"},{"label":"ValidSchema","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema"},{"label":"ValidSchemaName","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-schema-name"},{"label":"ValidStaticBlockType","href":"/docs/storefronts/themes/tools/theme-check/checks/valid-static-block-type"},{"label":"VariableName","href":"/docs/storefronts/themes/tools/theme-check/checks/variable-name"}]},{"label":"Migrate","href":"/docs/storefronts/themes/tools/theme-check/migrate"}]},{"label":"Theme editor","href":"/docs/storefronts/themes/tools/online-editor"},{"label":"Code editor","href":"/docs/storefronts/themes/tools/code-editor"},{"label":"Theme Access app","href":"/docs/storefronts/themes/tools/theme-access"},{"label":"Development stores","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/development-stores"},{"label":"Test data","href":"/docs/storefronts/themes/tools/development-stores/generated-data"},{"label":"Transfer a development store","href":"/docs/storefronts/themes/tools/development-stores/transfer-development-stores"}]},{"label":"Collaborator accounts","href":"/docs/storefronts/themes/tools/collaborator-accounts"},{"label":"Theme Inspector","children":[{"label":"Overview","href":"/docs/storefronts/themes/tools/theme-inspector"},{"label":"Optimizing themes using Theme Inspector","href":"/docs/storefronts/themes/tools/theme-inspector/using-the-theme-inspector"}]},{"label":"Lighthouse CI","href":"/docs/storefronts/themes/tools/lighthouse-ci"},{"label":"Dawn","href":"/docs/storefronts/themes/tools/dawn"}]},{"label":"Best practices","children":[{"label":"Overview","href":"/docs/storefronts/themes/best-practices"},{"label":"Sections and blocks","href":"/docs/storefronts/themes/best-practices/templates-sections-blocks"},{"label":"Performance","children":[{"label":"Overview","href":"/docs/storefronts/themes/best-practices/performance"},{"label":"Platform","href":"/docs/storefronts/themes/best-practices/performance/platform"}]},{"label":"Accessibility","href":"/docs/storefronts/themes/best-practices/accessibility"},{"label":"Theme editor preview inspector","href":"/docs/storefronts/themes/best-practices/theme-editor-preview-inspector"},{"label":"Design","children":[{"label":"Overview","href":"/docs/storefronts/themes/best-practices/design"},{"label":"Color system","href":"/docs/storefronts/themes/best-practices/design/color-system"}]},{"label":"Merchant stores","href":"/docs/storefronts/themes/best-practices/merchant-stores"},{"label":"Version control","href":"/docs/storefronts/themes/best-practices/version-control"},{"label":"File transformation","href":"/docs/storefronts/themes/best-practices/file-transformation"},{"label":"Deceptive code","href":"/docs/storefronts/themes/best-practices/deceptive-code"}]}]},{"label":"Theme features","isGroup":true,"children":[{"label":"Integrating apps","href":"/docs/apps/online-store"},{"label":"Product merchandising","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising"},{"label":"Product variants","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising/variants"},{"label":"Support high-variant products","href":"/docs/storefronts/themes/product-merchandising/variants/support-high-variant-products"}]},{"label":"Product recommendations","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising/recommendations"},{"label":"Related products","href":"/docs/storefronts/themes/product-merchandising/recommendations/related-products"},{"label":"Complementary products","href":"/docs/storefronts/themes/product-merchandising/recommendations/complementary-products"}]},{"label":"Media and images","children":[{"label":"Overview","href":"/docs/storefronts/themes/product-merchandising/media"},{"label":"Support product media","href":"/docs/storefronts/themes/product-merchandising/media/support-media"},{"label":"Product media UX guidelines","href":"/docs/storefronts/themes/product-merchandising/media/media-ux"}]},{"label":"Gift cards","href":"/docs/storefronts/themes/product-merchandising/gift-cards"}]},{"label":"Pricing and payments","children":[{"label":"Overview","href":"/docs/storefronts/themes/pricing-payments"},{"label":"Discounts","href":"/docs/storefronts/themes/pricing-payments/discounts"},{"label":"Subscriptions","children":[{"label":"Overview","href":"/docs/storefronts/themes/pricing-payments/subscriptions"},{"label":"Add subscriptions to your theme","href":"/docs/storefronts/themes/pricing-payments/subscriptions/add-subscriptions-to-your-theme"},{"label":"Subscription UX guidelines","href":"/docs/storefronts/themes/pricing-payments/subscriptions/subscription-ux-guidelines"}]},{"label":"Pre-orders and Try Before You Buy","children":[{"label":"Overview","href":"/docs/storefronts/themes/pricing-payments/preorder-tbyb"},{"label":"Add pre-orders and TBYB to your theme","href":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/add-preorder-tbyb-to-your-theme"},{"label":"Pre-orders and TBYB UX guidelines","href":"/docs/storefronts/themes/pricing-payments/preorder-tbyb/preorder-tbyb-ux-guidelines"}]},{"label":"Shop Pay Installments","href":"/docs/storefronts/themes/pricing-payments/installments"},{"label":"Accelerated checkout","children":[{"label":"About accelerated checkout","href":"/docs/storefronts/themes/pricing-payments/accelerated-checkout"},{"label":"Upgrade accelerated checkout","href":"/docs/storefronts/themes/pricing-payments/accelerated-checkout/upgrade-accelerated-checkout"}]},{"label":"B2B","href":"/docs/storefronts/themes/pricing-payments/b2b"},{"label":"Unit pricing","href":"/docs/storefronts/themes/pricing-payments/unit-pricing"},{"label":"Explicit currency formatting","href":"/docs/storefronts/themes/pricing-payments/currency-formatting"}]},{"label":"Delivery and fulfillment","children":[{"label":"Overview","href":"/docs/storefronts/themes/delivery-fulfillment"},{"label":"Pickup availability","href":"/docs/storefronts/themes/delivery-fulfillment/pickup-availability"}]},{"label":"Customer engagement","children":[{"label":"Overview","href":"/docs/storefronts/themes/customer-engagement"},{"label":"Email consent","href":"/docs/storefronts/themes/customer-engagement/email-consent"},{"label":"Additional customer information","href":"/docs/storefronts/themes/customer-engagement/additional-customer-information"},{"label":"Add a contact form","href":"/docs/storefronts/themes/customer-engagement/add-contact-form"}]},{"label":"Markets","children":[{"label":"Overview","href":"/docs/storefronts/themes/markets"},{"label":"Support multiple currencies and languages","href":"/docs/storefronts/themes/markets/multiple-currencies-languages"},{"label":"Detect and set a visitor’s optimal localization","href":"/docs/storefronts/themes/markets/localization-discovery"},{"label":"Country and language selector UX guidelines","href":"/docs/storefronts/themes/markets/country-language-ux"}]},{"label":"Site navigation and search","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search"},{"label":"Navigation","href":"/docs/storefronts/themes/navigation-search/navigation"},{"label":"Storefront search","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search/search"},{"label":"Predictive search","href":"/docs/storefronts/themes/navigation-search/search/predictive-search"},{"label":"Predictive search UX guidelines","href":"/docs/storefronts/themes/navigation-search/search/predictive-search-ux"}]},{"label":"Filtering","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search/filtering"},{"label":"Storefront filtering","children":[{"label":"Overview","href":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering"},{"label":"Support storefront filtering","href":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering"},{"label":"Storefront filtering UX guidelines","href":"/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/storefront-filtering-ux"}]},{"label":"Tag filtering","href":"/docs/storefronts/themes/navigation-search/filtering/tag-filtering"}]}]},{"label":"SEO","children":[{"label":"Overview","href":"/docs/storefronts/themes/seo"},{"label":"Metadata","href":"/docs/storefronts/themes/seo/metadata"},{"label":"hreflang tags","href":"/docs/storefronts/themes/seo/hreflang"},{"label":"robots.txt","href":"/docs/storefronts/themes/seo/robots-txt"}]},{"label":"Trust and security","children":[{"label":"Overview","href":"/docs/storefronts/themes/trust-security"},{"label":"Security badges","href":"/docs/storefronts/themes/trust-security/security-badges"},{"label":"Captcha","href":"/docs/storefronts/themes/trust-security/captcha"}]},{"label":"Migrating to Online Store 2.0","children":[{"label":"Overview","href":"/docs/storefronts/themes/os20"},{"label":"Assessment","href":"/docs/storefronts/themes/os20/assessment"},{"label":"Migration guide","href":"/docs/storefronts/themes/os20/migration"}]},{"label":"Troubleshooting","href":"/docs/storefronts/themes/troubleshooting"}]},{"label":"Sell themes","isGroup":true,"children":[{"label":"Theme Store","children":[{"label":"Overview","href":"/docs/storefronts/themes/store"},{"label":"Requirements","href":"/docs/storefronts/themes/store/requirements"},{"label":"Testing","children":[{"label":"Overview","href":"/docs/storefronts/themes/store/test-theme"},{"label":"Testing assets","href":"/docs/storefronts/themes/store/test-theme/assets"},{"label":"Testing checklist","href":"/docs/storefronts/themes/store/test-theme/checklist"}]},{"label":"Review process","children":[{"label":"Submitting a theme","href":"/docs/storefronts/themes/store/review-process/submit-theme"},{"label":"Theme Store listings","href":"/docs/storefronts/themes/store/review-process/listings"},{"label":"Common theme rejections","href":"/docs/storefronts/themes/store/review-process/common-theme-rejections"}]},{"label":"Theme success","children":[{"label":"Overview","href":"/docs/storefronts/themes/store/success"},{"label":"Prohibited actions","href":"/docs/storefronts/themes/store/success/prohibited-actions"},{"label":"Managing theme reviews","href":"/docs/storefronts/themes/store/success/managing-theme-reviews"},{"label":"Brand asset guidance","href":"/docs/storefronts/themes/store/success/brand-assets"},{"label":"Updating your theme","href":"/docs/storefronts/themes/store/success/updates"},{"label":"Removing a theme","href":"/docs/storefronts/themes/store/success/remove-theme"}]},{"label":"Theme revenue share","href":"/docs/storefronts/themes/store/revenue-share"}]}]}]},"page":{"gid":"4D196A0B-9F90-413F-8600-86B4EC25C33E","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>