CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="EN"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages","20211201175158","https://web.archive.org/","web","/_static/", "1638381118"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://web.archive.org/web/20211201175158/https://cdn.shopify.com/"/> <link href="https://web.archive.org/web/20211201175158/https://fonts.googleapis.com/" rel="preconnect" crossorigin> <link rel="stylesheet" href="https://web.archive.org/web/20211201175158cs_/https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700;800&display=swap"/> <link rel="shortcut icon" type="image/png" href="https://web.archive.org/web/20211201175158im_/https://cdn.shopify.com/static/shopify-favicon.png"/> <title>Build product pages in Hydrogen</title> <meta name="description" content="Learn how to build product pages in your Hydrogen app."/> <link rel="canonical" href="https://web.archive.org/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages"> <script nonce="">document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js')</script> <link rel="stylesheet" media="screen" href="https://web.archive.org/web/20211201175158cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/application-bc9916d157e68b00267d783e78bfce1fc218f6dd5893d9a5ec106902386b6b8d.css"/> <link rel="stylesheet" media="print" href="https://web.archive.org/web/20211201175158cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/print-723f766d3af22195b195daef85f7795e57f8f313da5a904f787a82d519fb8404.css"/> <link rel="stylesheet" media="screen" href="https://web.archive.org/web/20211201175158cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/manifests/docs-8730c2a1e5fdd20e9965e81fd314c2a235fbc6ad6443ddd9acbbf6dcc1b06bf0.css"/> <link href="https://web.archive.org/web/20211201175158cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/manifests/feedback-78c7571815be1118276ef5cb8e808f5c9775b6a3e47a3ead925c8b42ba606102.css" rel="stylesheet"/> <link href="https://web.archive.org/web/20211201175158cs_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/manifests/docs-ed9ee82d75acdce1675daeda565564d18fe7e80a701bb29a6cce009492da47ff.css" rel="stylesheet"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="Shopify"/> <meta property="og:title" content="Build product pages in Hydrogen"/> <meta property="og:description" content="Learn how to build product pages in your Hydrogen app."/> <meta property="og:image" content="https://web.archive.org/web/20211201175158im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/social-share-24de3afa0326f705b84a0a98714acc192611e5a21ade3b7c8f2bd12ba7d1457f.jpg"/> <meta property="og:url" content="https://web.archive.org/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages"/> <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="Build product pages in Hydrogen"/> <meta property="twitter:description" content="Learn how to build product pages in your Hydrogen app."/> <meta property="twitter:image" content="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/social-share-24de3afa0326f705b84a0a98714acc192611e5a21ade3b7c8f2bd12ba7d1457f.jpg"/> <meta name="“facebook-domain-verification”" content="“qv0mhbzsog35yr5kbv40mmbu65worz”"> <script id="TrekkieScript" type="text/javascript"> (function(){ var config = { 'Trekkie': { 'appName': 'brochure' }, 'Session Attribution': {}, 'CrossDomainTracking': {} }; var trekkie_version = '2021.05.04'; var analytics = window.analytics = window.analytics || []; if (analytics.integrations) { return; } analytics.methods = [ 'identify', 'page', 'ready', 'track', ]; analytics.factory = function(method) { return function() { var args = Array.prototype.slice.call(arguments); args.unshift(method); analytics.push(args); return analytics; }; }; for (var i = 0; i < analytics.methods.length; i++) { var key = analytics.methods[i]; analytics[key] = analytics.factory(key); } analytics.load = function(config) { analytics.config = config; var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://web.archive.org/web/20211201175158/https://cdn.shopify.com/s/javascripts/tricorder/trekkie.' + config.Trekkie.appName + '.min.js?v=' + trekkie_version; var first = document.getElementsByTagName('script')[0]; first.parentNode.insertBefore(script, first); }; analytics.load(config); analytics.page(); })(); </script> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://web.archive.org/web/20211201175158/https://www.google-analytics.com/analytics.js','_gaUTracker'); var _gaUTrackerOptions = {}; analytics.ready(function() { _gaUTrackerOptions.clientId = analytics.user().traits().uniqToken; _gaUTracker('create', 'UA-82702-49', _gaUTrackerOptions); _gaUTracker('set', 'transport', 'beacon'); _gaUTracker('require', 'displayfeatures'); _gaUTracker('send', 'pageview'); }); </script> </head> <body class="page--custom-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"/></svg></symbol><symbol id="search-magnify"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M10.192 10.192A3 3 0 115.95 5.95a3 3 0 014.242 4.242zm.64 2.048a5.002 5.002 0 01-6.296-7.704 5 5 0 017.704 6.297c.025.02.05.043.074.066l4.95 4.95a1 1 0 11-1.415 1.415l-4.95-4.95a.974.974 0 01-.066-.074z" clip-rule="evenodd"/></svg></symbol><symbol id="up-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 20 21"><g filter="url(#filter0_d)"><rect width="20" height="20" fill="#FAFBFB" rx="4"/><path fill="#5C5F62" d="M9.462 14V7.76c0-.176.008-.352.024-.528l.036-.432h-.12c-.08.12-.3.336-.66.648l-2.22 1.896v-1.26l3.492-2.964 3.468 2.952v1.26L11.25 7.436a8.247 8.247 0 01-.432-.396 6.984 6.984 0 01-.216-.24h-.12c.016.104.028.248.036.432.016.176.024.352.024.528V14h-1.08z"/><rect width="19" height="19" x=".5" y=".5" stroke="#6D7175" rx="3.5"/></g><defs><filter id="filter0_d" width="20" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg></symbol><symbol id="down-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 20 21"><g filter="url(#filter0_d)"><rect width="20" height="20" fill="#FAFBFB" rx="4"/><path fill="#5C5F62" d="M9.99 14.12l-3.468-2.952v-1.26l2.232 1.896c.176.152.32.284.432.396.112.112.184.192.216.24h.12l-.036-.42a6.234 6.234 0 01-.024-.54V5.24h1.08v6.24c0 .176-.008.356-.024.54a4.13 4.13 0 01-.036.42h.12c.08-.12.3-.336.66-.648l2.22-1.896v1.26L9.99 14.12z"/><rect width="19" height="19" x=".5" y=".5" stroke="#6D7175" rx="3.5"/></g><defs><filter id="filter0_d" width="20" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg></symbol><symbol id="enter-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 48 21"><filter id="a" width="48" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><g filter="url(#a)"><rect width="48" height="20" fill="#fafbfb" rx="4"/><path fill="#5c5f62" d="M7.14 14V5.24h5.148v1.152H8.412v2.484h3.456v1.14H8.412v2.832h3.876V14zm7.075 0V7.4h1.284v1.26h.012c.064-.432.248-.768.552-1.008.304-.248.704-.372 1.2-.372.656 0 1.18.212 1.572.636.392.416.588.98.588 1.692V14h-1.296V9.752c0-.432-.116-.764-.348-.996s-.548-.348-.948-.348c-.408 0-.732.124-.972.372-.232.248-.348.6-.348 1.056V14zm10.507 0c-.6 0-1.068-.164-1.404-.492s-.504-.788-.504-1.38V8.576H20.99V7.4h1.824V5.54h1.296V7.4h2.592v1.176H24.11v3.552c0 .464.224.696.672.696h1.8V14zm6.476.12c-.536 0-1.004-.104-1.404-.312a2.358 2.358 0 01-.936-.9c-.216-.384-.324-.832-.324-1.344V9.836c0-.512.108-.96.324-1.344.224-.384.536-.68.936-.888.4-.216.868-.324 1.404-.324.544 0 1.016.108 1.416.324.4.208.708.504.924.888.224.384.336.832.336 1.344v1.176h-4.092v.552c0 1 .476 1.5 1.428 1.5.776 0 1.224-.26 1.344-.78h1.284a2 2 0 01-.864 1.344c-.48.328-1.072.492-1.776.492zm-1.416-4.284v.3l2.832-.012v-.3c0-.488-.12-.86-.36-1.116-.24-.264-.592-.396-1.056-.396s-.816.132-1.056.396-.36.64-.36 1.128zM36.017 14V7.4h1.248v1.224c.208-.896.8-1.344 1.776-1.344.704 0 1.26.22 1.668.66.416.432.624 1.028.624 1.788v.444h-1.332v-.336c0-.472-.12-.832-.36-1.08-.232-.256-.56-.384-.984-.384s-.756.128-.996.384c-.232.256-.348.616-.348 1.08V14z"/><rect width="47" height="19" x=".5" y=".5" stroke="#6d7175" rx="3.5"/></g></svg></symbol><symbol id="escape-key"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 34 21"><filter id="a" width="34" height="21" x="0" y="0" color-interpolation-filters="sRGB" filterunits="userSpaceOnUse"><feflood flood-opacity="0" result="BackgroundImageFix"/><fecolormatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feoffset dy="1"/><fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feblend in2="BackgroundImageFix" result="effect1_dropShadow"/><feblend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><g filter="url(#a)"><rect width="34" height="20" fill="#fafbfb" rx="4"/><path fill="#5c5f62" d="M7.335 14V5.24h5.148v1.152H8.607v2.484h3.456v1.14H8.607v2.832h3.876V14zm9.44.108c-.72 0-1.297-.164-1.729-.492s-.668-.772-.708-1.332h1.296c.032.224.148.4.348.528s.464.192.792.192h.516c.392 0 .688-.076.888-.228.2-.16.3-.372.3-.636 0-.488-.356-.788-1.068-.9l-.852-.132c-.704-.104-1.224-.304-1.56-.6-.328-.296-.492-.732-.492-1.308 0-.6.196-1.068.588-1.404.4-.336.988-.504 1.764-.504h.456c.688 0 1.236.16 1.644.48.416.312.652.732.708 1.26H18.37a.65.65 0 00-.324-.468c-.184-.12-.428-.18-.732-.18h-.456c-.376 0-.652.072-.828.216-.168.136-.252.34-.252.612 0 .24.072.42.216.54.152.12.392.204.72.252l.876.132c.744.12 1.288.332 1.632.636.352.304.528.748.528 1.332 0 .632-.208 1.124-.624 1.476-.408.352-1.02.528-1.836.528zm7.47.012c-.823 0-1.483-.228-1.98-.684-.487-.456-.731-1.08-.731-1.872V9.836c0-.792.244-1.416.732-1.872.496-.456 1.156-.684 1.98-.684.792 0 1.428.208 1.908.624s.732.984.756 1.704h-1.296c-.024-.376-.156-.668-.396-.876s-.564-.312-.972-.312c-.44 0-.788.124-1.044.372-.248.24-.372.584-.372 1.032v1.74c0 .456.124.808.372 1.056.256.24.604.36 1.044.36.408 0 .732-.104.972-.312s.372-.504.396-.888h1.296c-.024.72-.276 1.292-.756 1.716-.48.416-1.116.624-1.908.624z"/><rect width="33" height="19" x=".5" y=".5" stroke="#6d7175" rx="3.5"/></g></svg></symbol><symbol id="sidebar-collapse"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 2"><path d="M0 .75a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-.5z"/></svg></symbol><symbol id="sidebar-expand"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"><path fill-rule="evenodd" d="M3.75 0a.5.5 0 00-.5.5v2.75H.5a.5.5 0 00-.5.5v.5a.5.5 0 00.5.5h2.75V7.5a.5.5 0 00.5.5h.5a.5.5 0 00.5-.5V4.75H7.5a.5.5 0 00.5-.5v-.5a.5.5 0 00-.5-.5H4.75V.5a.5.5 0 00-.5-.5h-.5z" clip-rule="evenodd"/></svg></symbol><symbol id="modules-mobile-hamburger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="M19 11H1a1 1 0 110-2h18a1 1 0 110 2zm0-7H1a1 1 0 110-2h18a1 1 0 110 2zm0 14H1a1 1 0 110-2h18a1 1 0 110 2z"/></svg></symbol><symbol id="chevron-down"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 6"><path d="M8.586 0H1.414C.524 0 .077 1.077.707 1.707l3.586 3.586a1 1 0 001.414 0l3.586-3.586C9.923 1.077 9.477 0 8.586 0z"/></svg></symbol><symbol id="modules-cancel"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="M11.414 10l6.293-6.293a1 1 0 00-1.414-1.414L10 8.586 3.707 2.293a1 1 0 00-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 001.414 1.414L10 11.414l6.293 6.293a.996.996 0 001.414 0 1 1 0 000-1.414L11.414 10z"/></svg></symbol></svg></div> <div class="signup-form-wrapper signup--hidden " data-define="{form_0: new SignupForm(this)}"> <form class="marketing-form signup-form stateful-form" novalidate="novalidate" autocomplete="off" data-namespace="form_0" data-hidden-fields-namespace="hiddenFields_0" data-bind-event-submit="form_0.handleSubmit(this, event)" action="https://web.archive.org/web/20211201175158/https://accounts.shopify.com/store-signup/setup" accept-charset="UTF-8" method="post"> <div data-define="{ email0: new StatefulField( 'email', form_0, this, { required: true, validate: true, live: false, showHint: true, showError: true }, {}, 'form_0' )} " class="stateful-field email "><div data-context="email0"><label data-bind-class="{'js-has-error': state.error,'js-is-filled': state.filled || state.value.length > 0,'js-has-hint': !state.error && state.hint}" class="marketing-input-wrapper"><span class="marketing-label marketing-label--in-field marketing-label--floating">Email address</span><input placeholder="Email address" aria-describedby="MessageId_2ae7" name="signup[email]" type="email" autocomplete="email" data-bind="state.value" data-bind-event-blur="ShopifyMarketing.context.form_0.handleFieldBlur(ShopifyMarketing.context.email0)" data-bind-event-keyup="ShopifyMarketing.context.form_0.handleFieldKeyup(event, ShopifyMarketing.context.email0)" class="marketing-input marketing-input--floating" id="0_signup_email"/></label><span class="marketing-form__messages" id="MessageId_2ae7"><span class="suggest hide" data-bind-unsafe-html="displayHint()" data-bind-show="!state.error && state.hint"></span><span class="error hide" data-bind="displayError()" data-bind-show="state.error == true"></span></span></div></div> <div data-define="{ password0: new StatefulField( 'password', form_0, this, { required: true, validate: true, live: false, showHint: false, showError: true }, {}, 'form_0' )} " class="stateful-field password "><div data-context="password0"><label data-bind-class="{'js-has-error': state.error,'js-is-filled': state.filled || state.value.length > 0,'js-has-hint': !state.error && state.hint}" class="marketing-input-wrapper"><span class="marketing-label marketing-label--in-field marketing-label--floating">Password</span><input placeholder="Password" aria-describedby="MessageId_307b" name="signup[password]" type="password" autocomplete="new-password" data-bind="state.value" data-bind-event-blur="ShopifyMarketing.context.form_0.handleFieldBlur(ShopifyMarketing.context.password0)" data-bind-event-keyup="null" class="marketing-input marketing-input--floating" id="0_signup_password"/></label><span class="marketing-form__messages" id="MessageId_307b"><span class="suggest hide" data-bind-unsafe-html="displayHint()" data-bind-show="!state.error && state.hint"></span><span class="error hide" data-bind="displayError()" data-bind-show="state.error == true"></span></span></div></div> <div data-define="{ shop_name0: new StatefulField( 'shop_name', form_0, this, { required: true, validate: true, live: true, showHint: false, showError: true }, {}, 'form_0' )} " class="stateful-field shop_name "><div data-context="shop_name0"><label data-bind-class="{ 'js-has-error': state.error == true, 'js-is-pending': state.pending == true, 'js-is-focused': state.focus == true, 'js-is-filled': state.filled == true || state.value.length > 0, }" class="marketing-input-wrapper shop_name"><span class="marketing-label marketing-label--in-field marketing-label--floating">Your store name</span><input placeholder="Your store name" aria-describedby="MessageId_a240" name="signup[shop_name]" type="text" autocomplete="off" data-bind="state.value" data-bind-event-blur="ShopifyMarketing.context.form_0.handleFieldBlur(ShopifyMarketing.context.shop_name0)" data-bind-event-keyup="ShopifyMarketing.context.form_0.handleFieldKeyup(event, ShopifyMarketing.context.shop_name0)" class="marketing-input marketing-input--floating" id="0_signup_shop_name"/></label><span class="marketing-form__messages" id="MessageId_a240"><span class="suggest hide" data-bind-unsafe-html="displayHint()" data-bind-show="!state.error && state.hint"></span><span class="error hide" data-bind="displayError()" data-bind-show="state.error == true && state.pending == false" data-bind-unsafe-html="displayError()"></span></span></div></div> <div data-define="{hiddenFields_0: new HiddenFields({ source: "", source_url: "", source_url_referer: "", signup_code: "", signup_page: "", signup_page_referer: "", signup_types: [], theme: "", selected_app: "", selected_plan: "", domain_to_connect: "", }, this)}"> <div data-context="hiddenFields_0"> <input type="hidden" name="ref" value=""> <input type="hidden" name="language" value="en"> <input type="hidden" name="locale" value="en"> <input type="hidden" name="_y" data-bind="fields.y"> <input type="hidden" name="ssid" data-bind="fields.ssid"> <input type="hidden" name="source" data-bind="fields.source"> <input type="hidden" name="source_url" data-bind="fields.source_url"> <input type="hidden" name="source_url_referer" data-bind="fields.source_url_referer"> <input type="hidden" name="signup_code" data-bind="fields.signup_code"> <input type="hidden" name="signup_page" data-bind="fields.signup_page"> <input type="hidden" name="signup_page_referer" data-bind="fields.signup_page_referer"> <input type="hidden" name="domain_to_connect" data-bind="fields.domain_to_connect"> <input type="hidden" name="signup_types[]" data-bind-disabled="fields.signup_types" data-bind="fields.signup_type"> <input type="hidden" name="extra[selected_theme]" data-bind="fields.theme"> <input type="hidden" name="extra[selected_app]" data-bind="fields.selected_app"> <input type="hidden" name="extra[selected_plan]" data-bind="fields.selected_plan"> </div> </div> <div class=" cta_wrapper"> <button class="marketing-button marketing-form__button " name="button" data-bind-disabled="form_0.pending == true" type="submit">Create your store</button> </div> </form> </div> <div id="Announcements"></div> <header id="SiteNavContainer" class="site-nav-container is-sticky"> <div class="marketing-nav-wrapper marketing-nav-wrapper--sidebar"> <a class="in-page-link skip-to-main visuallyhidden focusable" data-ga-event="Main Nav" data-ga-action="Skip to content" data-trekkie-event="Main Nav" data-trekkie-action="Skip to content" data-trekkie-id="Main Nav Skip to content" href="#Main">Skip to Content</a> <nav class="marketing-nav--skin-light marketing-nav marketing-nav--primary" id="ShopifyMainNav" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <div class="marketing-nav--mobile-wrapper"> <button name="button" type="button" class="marketing-nav__hamburger hide--expanded-nav js-drawer-open-right" aria-haspopup="dialog" aria-expanded="false"> <svg class="icon" aria-labelledby="icon-modules-mobile-hamburger-22-title" role="img"><title id="icon-modules-mobile-hamburger-22-title">Open Main Navigation</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#modules-mobile-hamburger"/> </svg> </button> <div class="marketing-nav__logo "> <a href="/web/20211201175158/https://shopify.dev/" class="marketing-nav__logo__shopify" data-ga-event="Main Nav" data-ga-action="Logo" data-trekkie-event="Main Nav" data-trekkie-action="Logo" data-trekkie-id="Main Nav Logo"> <div class="shopify-logo"></div> </a> </div> </div> <div class="marketing-nav__container"> <ul class="marketing-nav__items admin-api-next"> <li><a href="/web/20211201175158/https://shopify.dev/apps" class="marketing-nav__item marketing-nav__item--primary" itemprop="name">Apps</a></li><li><a href="/web/20211201175158/https://shopify.dev/themes" class="marketing-nav__item marketing-nav__item--primary" itemprop="name">Themes</a></li><li><a href="/web/20211201175158/https://shopify.dev/custom-storefronts" class="marketing-nav__item marketing-nav__item--active marketing-nav__item--primary drawer__item--active" itemprop="name" aria-current="page">Custom storefronts</a></li><li><a href="/web/20211201175158/https://shopify.dev/marketplaces" class="marketing-nav__item marketing-nav__item--primary" itemprop="name">Marketplaces</a></li><li><div class="popover-wrapper js-popover-dropdown popover-wrapper--dropdown" data-position="bottom" data-align="left"><button type="button" class="popover__trigger marketing-nav__item marketing-nav__item--primary" url="/api" itemprop="name">APIs and references<svg class="icon marketing-nav__arrow" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#chevron-down"/> </svg></button><div class="popover"><div class="popover__content"><ul class="popover__list"><li><p class="popover__description marketing-nav__item marketing-nav__item--child">Apps</p><ul class="popover__list"><li><a href="/web/20211201175158/https://shopify.dev/api/admin-graphql" class="marketing-nav__item marketing-nav__item--child" itemprop="name">GraphQL Admin API</a></li><li><a href="/web/20211201175158/https://shopify.dev/api/admin-rest" class="marketing-nav__item marketing-nav__item--child" itemprop="name">REST Admin API</a></li></ul></li><li><p class="popover__description marketing-nav__item marketing-nav__item--child">Themes</p><ul class="popover__list"><li><a href="/web/20211201175158/https://shopify.dev/api/liquid" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Liquid</a></li><li><a href="/web/20211201175158/https://shopify.dev/api/ajax" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Ajax API</a></li></ul></li><li><p class="popover__description marketing-nav__item marketing-nav__item--child">Custom storefronts</p><ul class="popover__list"><li><a href="/web/20211201175158/https://shopify.dev/api/storefront" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Storefront API</a></li><li><a href="/web/20211201175158/https://shopify.dev/api/hydrogen" class="marketing-nav__item marketing-nav__item--child" itemprop="name">Hydrogen</a></li></ul></li><li><ul class="popover__list"><li><a href="/web/20211201175158/https://shopify.dev/api" class="marketing-nav__item marketing-nav__item--child marketing-nav__item--separated" itemprop="name">View all</a></li></ul></li></ul></div></div></div></li> </ul> <div class="search-container" id="searchContainer"> <form id="searchForm" class="search-form" action="/web/20211201175158/https://shopify.dev/search" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="laJGGSATr6CcwtL5iN7inummXlbgbwTT8zNMbAq0BWBY6fZhDQW7ICEdOPoxFvdEPWMhaEzYotnY4IowF_8pmA"/> <input type="hidden" name="authenticity_token" id="authenticity_token" value="n4arnN_x5b0N6M4jatGnKmplqvsSL40Rk9KxtgHduY-b0ZvdKFPHCbdj6Po-bChzfNEShX8nEVCKDIdogqFShQ"/> <label class="marketing-input-wrapper search-input-wrapper"><span class="marketing-label marketing-label--hidden visuallyhidden">Search the documentation</span><input aria-describedby="MessageId_e888" placeholder="Search" name="query" class="marketing-input search-input" id="searchInput" autocomplete="off" required="required" type="search"/></label><span class="marketing-form__messages" id="MessageId_e888"></span> <input name="search_uuid" id="searchUUID" value="bbe8298c-92be-44a4-b0fa-e49a6dd0a77b" type="hidden"/> <input id="openSearchResultPath" value="/search/result" type="hidden" name="search[open_search_result_path]"/> <button name="button" type="submit" id="searchSubmitButton" class="search-submit-button" aria-label="Search Submit button"> <svg class="icon search-submit-button__icon" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#search-magnify"/> </svg> </button> <div class="search-launcher" aria-label="Forward slash to launch search"></div> <div id="searchSuggestionsContainer" class="search-suggestions-container search-suggestions-container--is-hidden"> <div class="search-suggestions-instructions hide--mobile" id="searchSuggestionsInstruction" aria-hidden="true"> <span class="search-instruction"> Press <svg class="icon search-instruction__icon search-instruction__icon--up" aria-labelledby="icon-up-key-3-title" role="img"><title id="icon-up-key-3-title">Up</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#up-key"/> </svg><svg class="icon search-instruction__icon" aria-labelledby="icon-down-key-4-title" role="img"><title id="icon-down-key-4-title">Down</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#down-key"/> </svg> to navigate, <svg class="icon icon--size-large search-instruction__icon search-instruction__icon--enter" aria-labelledby="icon-enter-key-5-title" role="img"><title id="icon-enter-key-5-title">enter</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#enter-key"/> </svg> to select, <svg class="icon icon--size-large search-instruction__icon search-instruction__icon--escape" aria-labelledby="icon-escape-key-6-title" role="img"><title id="icon-escape-key-6-title">esc</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#escape-key"/> </svg> to dismiss </span> </div> <div id="searchSuggestionsIllustration" class="search-suggestions-illustration search-suggestions-illustration--is-hidden"> <span class="image lazyload-image search-no-results-image" style="max-width: 138px; max-height: 138px;"><span class="lazyload-image__placeholder" style="padding-bottom: 100.0%"><img alt="No search results" data-sizes="100vw" data-srcset="https://web.archive.org/web/20211201175158im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-small-ee5ac8bd6c3f5e1a928fe9719c3623a0e2422eabee4f9cf9ed4f3161487b7c85.png 1x, https://web.archive.org/web/20211201175158im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-large-2df0a9fcac1970320ac16ca99c05aabd45e68b68899e00ab2ad79a6528ad8cd2.png 2x" class="lazyload"/><noscript><img sizes="100vw" srcset="https://web.archive.org/web/20211201175158im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-small-ee5ac8bd6c3f5e1a928fe9719c3623a0e2422eabee4f9cf9ed4f3161487b7c85.png 1x, https://web.archive.org/web/20211201175158im_/https://cdn.shopify.com/shopifycloud/shopify_dev/assets/search/empty-search-large-2df0a9fcac1970320ac16ca99c05aabd45e68b68899e00ab2ad79a6528ad8cd2.png 2x" alt="No search results"/></noscript></span></span> </div></div></form> <button type="button" class="search-mobile-button" id="searchMobileButton"> <svg class="icon search-mobile-button__icon" aria-labelledby="icon-search-magnify-7-title" role="img"><title id="icon-search-magnify-7-title">Search</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#search-magnify"/> </svg> </button> </div> <ul class="marketing-nav__items marketing-nav__user display--expanded-nav admin-api-next"> <li class="theme-mode-toggle-container"> <button name="button" type="button" id="theme-mode-toggle" class="theme-mode-button"></button> </li> <li><a href="https://web.archive.org/web/20211201175158/https://partners.shopify.com/organizations" class="marketing-nav__item marketing-nav__item--user" itemprop="name">Log in</a></li><li><a href="https://web.archive.org/web/20211201175158/https://partners.shopify.com/signup/developer" class="marketing-nav__item marketing-nav__item--user" itemprop="name" data-event-page="header" data-event-category="link" data-event-action="click-signup-link" data-event-label="sign-up" data-fbq-event="Lead" data-ga-form-success-event="Partner signup email form from developer site" data-ga-event-page="/custom-storefronts/hydrogen/getting-started/product-pages">Sign up</a></li> </ul> </div> </nav> </div> <div id="NavDrawer" class="drawer drawer--left" role="dialog" aria-modal="true" aria-labelledby="DrawerTitle"> <div class="drawer__inner-wrapper"> <div class="drawer__top drawer__inner-top-wrapper"> <div class="drawer__inner-top"> <button name="button" type="button" class="drawer__close-button js-drawer-close"> <svg class="icon" aria-labelledby="icon-modules-cancel-24-title" role="img"><title id="icon-modules-cancel-24-title">Close Main Navigation</title> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#modules-cancel"/> </svg> </button> <div class="marketing-nav__logo"> <a href="/web/20211201175158/https://shopify.dev/" class="marketing-nav__logo__shopify"> <div class="shopify-logo"></div> </a> </div> </div> </div> <div class="drawer__inner-bottom"> <nav id="DrawerTitle" aria-label="Main Navigation"> <div class="drawer-navigation"> <div class="accordion-item drawer-navigation__item"> <button class="accordion-link drawer-navigation__link"> <span class="drawer-navigation__link-content"> Menu </span> <svg class="icon drawer-navigation__caret" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#modules-caret-down"/> </svg> </button> <div class="accordion-content drawer-navigation__content"> <ul> <li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/apps" class="drawer__item">Apps</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/themes" class="drawer__item">Themes</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/custom-storefronts" class="drawer__item drawer__item--active">Custom storefronts</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/marketplaces" class="drawer__item">Marketplaces</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api" class="drawer__item">APIs and references</a><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api/admin-graphql" class="drawer__item">GraphQL Admin API</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api/admin-rest" class="drawer__item">REST Admin API</a></li></ul></li><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api/liquid" class="drawer__item">Liquid</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api/ajax" class="drawer__item">Ajax API</a></li></ul></li><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api/storefront" class="drawer__item">Storefront API</a></li><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api/hydrogen" class="drawer__item">Hydrogen</a></li></ul></li><li class="drawer-navigation__list"><ul class="drawer__items drawer__items--nested"><li class="drawer-navigation__list"><a href="/web/20211201175158/https://shopify.dev/api" class="drawer__item marketing-nav__item--separated">View all</a></li></ul></li></ul></li> </ul> </div> </div> </div> </nav> </div> </div> <div class="drawer-sidebar"> <nav class="sidebar"> <div class="sidebar-menu"> <section class="sidebar-group" aria-label="Get started with custom storefronts."> <ul class="sidebar-list"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts"><span>Custom storefronts</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Getting started</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/getting-started"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/api/storefront/getting-started"><span>Storefront API</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item accordion-item--active"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Hydrogen</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--active sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started"><span>Create a Hydrogen app</span></a> </div> </li> <li class="sidebar-item sidebar-item--active"> <div class="sidebar-item__inner-container"> <a class="sidebar-link sidebar-link--active" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages"><span>Build product pages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/cart"><span>Build a cart</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/data-sources"><span>Data sources</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Framework</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">React Server Components</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-3"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components/work-with-rsc"><span>Implementation</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/css-support"><span>CSS support</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/server-state"><span>Server state</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/routes"><span>Routes</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/cache"><span>Caching</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/pages"><span>Pages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/secrets"><span>Secrets</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/seo"><span>SEO</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/static-assets"><span>Static assets</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/third-party-dependencies"><span>Third-party dependencies</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/components"><span>Components</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/best-practices"><span>Best practices</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/deployment"><span>Deployment</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Developer tools</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/buy-button"><span>Buy Button JS</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/js-buy"><span>JS Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/android"><span>Android Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/ios"><span>iOS Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/unity-buy"><span>Unity Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/web-components"><span>Web Components</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/graphiql-storefront-api"><span>GraphiQL Storefront API explorer</span></a> </div> </li> </ul> </li> </ul> </section> <section class="sidebar-group" aria-label="Get familiar with the Storefront API."> <ul class="sidebar-list"> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Storefront data</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/storefront-api"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Products</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/international-pricing"><span>International pricing</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/multiple-currencies"><span>Multiple currencies</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/multiple-languages"><span>Multiple languages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/filter-products"><span>Filtering</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/local-pickup"><span>Local pickup</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/subscriptions"><span>Subscriptions</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/metafields"><span>Metafields</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/cart"><span>Cart</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/customer-accounts"><span>Customer accounts</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/checkout"><span>Checkout</span></a> </div> </li> </ul> </li> </ul> </section> </div> </nav> <div id="react-drawer-sidebar"></div> <ul class="drawer__inner-bottom user-links"> <li><a href="https://web.archive.org/web/20211201175158/https://partners.shopify.com/organizations" class="drawer__item">Log in</a></li><li><a href="https://web.archive.org/web/20211201175158/https://partners.shopify.com/signup/developer" class="drawer__item" data-event-page="header" data-event-category="link" data-event-action="click-signup-link" data-event-label="sign-up" data-fbq-event="Lead" data-ga-form-success-event="Partner signup email form from developer site" data-ga-event-page="/custom-storefronts/hydrogen/getting-started/product-pages">Sign up</a></li> <li class="drawer__item theme-mode-toggle-sidebar-container"> <button name="button" type="button" id="theme-mode-toggle-sidebar" class="theme-mode-button-sidebar"></button> </li> </ul> </div> </div> </header> <div hidden="hidden"><span id="NewWindow">Opens in a new window</span><span id="ExternalSite">Opens an external site</span><span id="NewWindowExternalSite">Opens an external site in a new window</span></div> <div id="PageContainer"> <div class="grid--with-sidebar"> <nav class="sidebar display--desktop grid__item--sidebar" id="SidebarAccordion"> <div class="sidebar-menu"> <section class="sidebar-group" aria-label="Get started with custom storefronts."> <ul class="sidebar-list"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts"><span>Custom storefronts</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Getting started</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/getting-started"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/api/storefront/getting-started"><span>Storefront API</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item accordion-item--active"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Hydrogen</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--active sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started"><span>Create a Hydrogen app</span></a> </div> </li> <li class="sidebar-item sidebar-item--active"> <div class="sidebar-item__inner-container"> <a class="sidebar-link sidebar-link--active" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages"><span>Build product pages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/cart"><span>Build a cart</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/data-sources"><span>Data sources</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Framework</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">React Server Components</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-3"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components/work-with-rsc"><span>Implementation</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/css-support"><span>CSS support</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/server-state"><span>Server state</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/routes"><span>Routes</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/cache"><span>Caching</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/pages"><span>Pages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/secrets"><span>Secrets</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/seo"><span>SEO</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/static-assets"><span>Static assets</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/third-party-dependencies"><span>Third-party dependencies</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/components"><span>Components</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/best-practices"><span>Best practices</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/deployment"><span>Deployment</span></a> </div> </li> </ul> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Developer tools</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/buy-button"><span>Buy Button JS</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/js-buy"><span>JS Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/android"><span>Android Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/ios"><span>iOS Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/unity-buy"><span>Unity Buy SDK</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/web-components"><span>Web Components</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/tools/graphiql-storefront-api"><span>GraphiQL Storefront API explorer</span></a> </div> </li> </ul> </li> </ul> </section> <section class="sidebar-group" aria-label="Get familiar with the Storefront API."> <ul class="sidebar-list"> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Storefront data</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-1"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/storefront-api"><span>Overview</span></a> </div> </li> <li class="sidebar-item accordion-item"> <div class="sidebar-item__inner-container"> <button class="sidebar-item__accordion-link accordion-link"> <h4 class="sidebar-item__accordion-link-text">Products</h4> <svg class="icon sidebar-icon sidebar-icon--collapse" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-collapse"/> </svg> <svg class="icon sidebar-icon sidebar-icon--expand" aria-hidden="true" focusable="false"> <use xlink:href="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#sidebar-expand"/> </svg> </button> </div> <ul class="sidebar-submenu accordion-content sidebar-submenu--depth-2"> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products"><span>Overview</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/international-pricing"><span>International pricing</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/multiple-currencies"><span>Multiple currencies</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/multiple-languages"><span>Multiple languages</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/filter-products"><span>Filtering</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/local-pickup"><span>Local pickup</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/subscriptions"><span>Subscriptions</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/products/metafields"><span>Metafields</span></a> </div> </li> </ul> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/cart"><span>Cart</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/customer-accounts"><span>Customer accounts</span></a> </div> </li> <li class="sidebar-item"> <div class="sidebar-item__inner-container"> <a class="sidebar-link" href="/web/20211201175158/https://shopify.dev/custom-storefronts/checkout"><span>Checkout</span></a> </div> </li> </ul> </li> </ul> </section> </div> </nav> <div class="grid__item--main"> <main role="main" id="Main"> <div class="grid grid--equal-height grid--main"> <div class="grid__item 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="/web/20211201175158im_/https://shopify.dev/custom-storefronts/hydrogen/getting-started/product-pages#modules-caret-down"/> </svg> </button> <div class="toc-accordion__content accordion-content toc"> <ul> <li><a href="#what-youll-learn">What you'll learn</a></li><li><a href="#requirements">Requirements</a></li><li><a href="#step-1-edit-the-layout-component">Step 1: Edit the layout component</a></li><li><a href="#step-2-create-a-product-list">Step 2: Create a product list</a></li><li><a href="#step-3-customize-the-product-details-page">Step 3: Customize the product details page</a></li><li><a href="#next-steps">Next steps</a></li> </ul> </div> </div> </div> </div> <div class="grid__item grid__item--desktop-up-two-thirds grid__item--wide-up-three-quarters grid__item--article"> <article class="article--docs"> <div class="article-title-container "> <h1 class="article-title"> Build product pages in Hydrogen </h1> </div> <aside class="note beta"> <h4>Developer preview</h4> <p>This is a developer preview of Hydrogen. The documentation will be updated as Shopify introduces <a href="https://web.archive.org/web/20211201175158/https://github.com/Shopify/hydrogen/releases">new features and refines existing functionality</a>. Production launches of Hydrogen custom storefronts aren't yet supported as Shopify is evolving the Hydrogen framework.</p> </aside> <p>Previously, you <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started">created a Hydrogen app</a>. You're now ready to build product pages in your app.</p> <p>In this tutorial, you'll accomplish a series of tasks to add some specific functionality to your app. Your final app will be simple, but you'll learn where to find resources to build more complex features on your own.</p> <h2 id="what-youll-learn">What you'll learn</h2> <p>After you've finished this tutorial, you'll be able to do the following:</p> <ul> <li>Edit the layout component to define the structure of a page</li> <li>Display a list of products in a grid on your app's homepage</li> <li>Add a <strong>Load more</strong> button to the product list page</li> <li>Customize the product details page</li> </ul> <figure class="figure"> <img src="/web/20211201175158im_/https://shopify.dev/assets/custom-storefronts/hydrogen/hydrogen-product-pages-example.gif" alt="A GIF showing example product pages built in Hydrogen"/> <figcaption>Product pages built in Hydrogen</figcaption> </figure> <h2 id="requirements">Requirements</h2> <ul> <li>You've completed the <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started">Create a Hydrogen app</a> tutorial to begin coding off of the Hydrogen starter template.</li> <li>You have an integrated development environment (IDE) installed on your computer, such as <a rel="external noreferrer noopener" target="_blank" href="https://web.archive.org/web/20211201175158/https://code.visualstudio.com/">VSCode</a> or <a rel="external noreferrer noopener" target="_blank" href="https://web.archive.org/web/20211201175158/https://atom.io/">Atom</a>.</li> </ul> <h2 id="step-1-edit-the-layout-component">Step 1: Edit the layout component</h2> <p>You can start building product pages by editing the layout component in your Hydrogen app. The layout component defines a structure and organization of a page. By defining your layout logic in one place, you can use it in different parts of your app.</p> <p>When you create a Hydrogen app, a <code class="text-highlight text-highlight--grey">Layout.server.jsx</code> server component is automatically scaffolded in <code class="text-highlight text-highlight--grey">src/components</code>. This is a <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components#component-types">server component</a> because it doesn't include any client-side interactivity and it makes a call to the Storefront API.</p> <p>In <code class="text-highlight text-highlight--grey">Layout.server.jsx</code>, replace the code with the following:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/Layout.server.jsx"></script> <script type="text/plain" data-language="jsx"> // The `useShopQuery` hook makes server-only GraphQL queries to the Storefront API. import {useShopQuery, Link} from '@shopify/hydrogen'; // Import `gql` to parse GraphQL queries. import gql from 'graphql-tag'; // The `Layout` component accepts `children` as a prop. This injects any nested components into the layout when you call it. export default function Layout({children}) { // Your shop domain and token are automatically configured, so you only need to pass in a GraphQL query. const {data} = useShopQuery({ query: QUERY, }); // Return JSX with the Tailwind classes that determine the layout styling. return ( <div> <div className="absolute top-0 left-0"> <a href="#mainContent" className="p-4 focus:block sr-only focus:not-sr-only" > Skip to content </a> </div> <header className="my-10 text-center"> <h1 className="font-bold uppercase tracking-wider text-2x-l"> <Link to="/">{data.shop.name}</Link> </h1> </header> <main id="mainContent" className="mx-auto max-w-7xl p-4 md:py-5 md:px-8"> {children} </main> </div> ); } // The GraphQL query used to fetch shop data. const QUERY = gql` query ShopNameQuery { shop { name } } `; </script> </div> </p> <h2 id="step-2-create-a-product-list">Step 2: Create a product list</h2> <p>A product list includes information about all of the products that the storefront offers. You can create a product list so that buyers can look for and view products on a storefront.</p> <h3 id="edit-the-productcard-component">Edit the <code class="text-highlight text-highlight--grey">ProductCard</code> component</h3> <p>A product card is used to display a single product. It allows buyers to quickly identify a particular item of interest.</p> <p>When you create a Hydrogen app, a <code class="text-highlight text-highlight--grey">ProductCard</code> shared component is automatically scaffolded and available in <code class="text-highlight text-highlight--grey">src/components</code>. Shared components are more flexible in that they can be used by both client and server components.</p> <p>In <code class="text-highlight text-highlight--grey">src/components/ProductCard.jsx</code>, replace the code with the following:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/ProductCard.jsx"></script> <script type="text/plain" data-language="jsx"> // Import client components that need to be accessible to the `ProductCard` component. import { SelectedVariantImage, SelectedVariantPrice, ProductProvider, ProductTitle, Link // Hydrogen provides a special `@shopify/hydrogen/client` module to reference // components that are safe to use within client components. You should use // this import path when writing your client components. } from '@shopify/hydrogen/client'; // The `ProductCard` component accepts `products` as a prop. export default function ProductCard({product}) { // The product card displays the first product variant. const firstVariant = product.variants?.edges[0]?.node; // Return the first variant of the product. The product card // links to a product details page (specified by the product handle) // and displays the product's image, title, and price of the first variant. return ( <ProductProvider product={product} initialVariantId={firstVariant.id}> <div className="mb-6"> <Link to={`/products/${product.handle}`}> <SelectedVariantImage /> <ProductTitle className="py-2 font-medium" /> <SelectedVariantPrice className="text-gray-600" /> </Link> </div> </ProductProvider> ); } </script> </div> </p> <h3 id="add-a-productlist-component">Add a <code class="text-highlight text-highlight--grey">ProductList</code> component</h3> <p>After you've updated the <code class="text-highlight text-highlight--grey">ProductCard</code> component, you can use the component as part of a new <code class="text-highlight text-highlight--grey">ProductList</code> component. Similar to the <code class="text-highlight text-highlight--grey">ProductCard</code> component, <code class="text-highlight text-highlight--grey">ProductList</code> is a shared component, which means that it can render on both the client and the server.</p> <ol> <li><p>Create a new file under <code class="text-highlight text-highlight--grey">src/components</code> called <code class="text-highlight text-highlight--grey">ProductList.jsx</code>.</p></li> <li><p>Add the following code to the file:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/ProductList.jsx"></script> <script type="text/plain" data-language="jsx"> // Import the `ProductCard` shared component so that it's accessible to `ProductList`. import ProductCard from "./ProductCard"; // The `ProductList` component accepts `products` as a prop. export default function ProductList({ products }) { // Return a list of products organized in a three-column grid. return ( <div className="grid md:grid-cols-3 gap-4"> {products.map((product) => ( // Each product card maps to a product in the storefront. <ProductCard key={product.id} product={product} /> ))} </div> ); } </script> </div> </p></li> </ol> <h3 id="add-the-product-list-to-the-homepage">Add the product list to the homepage</h3> <p>After you've defined your <code class="text-highlight text-highlight--grey">Layout</code> and <code class="text-highlight text-highlight--grey">ProductList</code> components, you can use the components on different pages in your app. For example, you might want to add your product list to your app's homepage.</p> <p>In <code class="text-highlight text-highlight--grey">src/pages/index.server.jsx</code>, replace the code with the following:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/pages/index.server.jsx"></script> <script type="text/plain" data-language="jsx"> import { // The `useShopQuery` hook makes server-only GraphQL queries to the Storefront API. useShopQuery, // The `ProductProviderFragment` queries for all the product data you need for a component. ProductProviderFragment, // The `flattenConnection` utility takes Shopify storefront relay data // and transforms it into a flat array of objects. flattenConnection } from '@shopify/hydrogen'; // Import the `Layout` component that defines the structure of the page. import Layout from '../components/Layout.server'; // Import the `ProductList` component that defines the products to display. import ProductList from '../components/ProductList'; // Import `gql` to parse GraphQL queries. import gql from 'graphql-tag'; // Fetch product data from your storefront by passing in a GraphQL query to the // `useShopQuery` server component. export default function Index() { const {data} = useShopQuery({ query: QUERY, variables: { numProductMetafields: 0, includeReferenceMetafieldDetails: false, numProductVariants: 250, numProductMedia: 10, numProductVariantMetafields: 10, numProductVariantSellingPlanAllocations: 10, numProductSellingPlanGroups: 10, numProductSellingPlans: 10, }, }); // Transform Shopify storefront relay data into // a flat array of objects. const products = flattenConnection(data.products); // Return a list of products. return ( <Layout> <ProductList products={products} /> </Layout> ); } // Define the GraphQL query. const QUERY = gql` query HomeQuery( $numProductMetafields: Int! $includeReferenceMetafieldDetails: Boolean = false $numProductVariants: Int! $numProductMedia: Int! $numProductVariantMetafields: Int! $numProductVariantSellingPlanAllocations: Int! $numProductSellingPlanGroups: Int! $numProductSellingPlans: Int! ) { products(first: 10) { edges { node { ...ProductProviderFragment } } } } ${ProductProviderFragment} ` </script> </div> </p> <p>The homepage renders a list of products:</p> <p><figure class="figure"> <img src="/web/20211201175158im_/https://shopify.dev/assets/custom-storefronts/hydrogen/product-list-example.gif" alt="A GIF showing a list of products on the homepage"/> <figcaption>A list of products on the homepage</figcaption> </figure></p> <h3 id="add-a-load-more-button">Add a <code class="text-highlight text-highlight--grey">Load more</code> button</h3> <p>You might want to initially only show a subset of products on your product list page, and provide a button to load more products.</p> <ol> <li><p>Create a new file under <code class="text-highlight text-highlight--grey">src/components</code> called <code class="text-highlight text-highlight--grey">LoadMore.client.jsx</code>.</p> <p>The <code class="text-highlight text-highlight--grey">LoadMore</code> component is a <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components#component-types">client component</a> because it contains client-side interactivity.</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/LoadMore.client.jsx"></script> <script type="text/plain" data-language="jsx"> import { useServerState } from "@shopify/hydrogen/client"; // Define a `LoadMore` component that takes `children` and `current` (the current // number of products to display on the page) as props. export default function LoadMore({ children, current }) { const { setServerState } = useServerState(); // Return the Load more button. Show the first products, and then // load three more products upon clicking the button. return ( <div> {children} <div className="py-10 text-center"> <button onClick={() => { setServerState("first", current + 3); }} className="bg-black text-white py-2 px-4" > Load more </button> </div> </div> ); } </script> </div> </p></li> <li><p>In <code class="text-highlight text-highlight--grey">src/pages/index.server.jsx</code>, import the <code class="text-highlight text-highlight--grey">LoadMore</code> component, update your GraphQL query to fetch the first three products on product list page, and return the <strong>Load more</strong> button on the page.</p> <p>Your code should look like the following:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/pages/index.server.jsx"></script> <script type="text/plain" data-language="jsx"> import { useShopQuery, ProductProviderFragment, flattenConnection } from '@shopify/hydrogen'; import Layout from '../components/Layout.server'; import ProductList from '../components/ProductList'; import gql from 'graphql-tag'; // Import the `LoadMore` component that you created. import LoadMore from '../components/LoadMore.client'; // Fetch the first three products on the product list page. export default function Index({ first = 3 }) { const {data} = useShopQuery({ query: QUERY, variables: { numProductMetafields: 0, includeReferenceMetafieldDetails: false, numProductVariants: 250, numProductMedia: 10, numProductVariantMetafields: 10, numProductVariantSellingPlanAllocations: 10, numProductSellingPlanGroups: 10, numProductSellingPlans: 10, first, }, }); const products = flattenConnection(data.products); // Return the first three products and the load more button. return ( <Layout> <LoadMore current={first}> <ProductList products={products} /> </LoadMore> </Layout> ); } // Define the GraphQL query. const QUERY = gql` query HomeQuery( $numProductMetafields: Int! $includeReferenceMetafieldDetails: Boolean = false $numProductVariants: Int! $numProductMedia: Int! $numProductVariantMetafields: Int! $numProductVariantSellingPlanAllocations: Int! $numProductSellingPlanGroups: Int! $numProductSellingPlans: Int! $first: Int! ) { products(first: $first) { edges { node { ...ProductProviderFragment } } } } ${ProductProviderFragment} ` </script> </div> </p> <p>You can now click the <strong>Load more</strong> button to display additional products on the product list page:</p> <figure class="figure"> <img src="/web/20211201175158im_/https://shopify.dev/assets/custom-storefronts/hydrogen/load-more.gif" alt="A GIF showing the load more functionality to display additional products"/> <figcaption>Load more functionality</figcaption> </figure></li> </ol> <h2 id="step-3-customize-the-product-details-page">Step 3: Customize the product details page</h2> <p>When you create a Hydrogen app, a <code class="text-highlight text-highlight--grey">ProductDetails</code> client component is automatically scaffolded in <code class="text-highlight text-highlight--grey">src/components</code>. A <code class="text-highlight text-highlight--grey">src/pages/products/[handle].server.jsx</code> file is also available, which contains the <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/routes">routing logic</a> for product pages.</p> <p>You can navigate from the product list page to the product details page:</p> <figure class="figure"> <img src="/web/20211201175158im_/https://shopify.dev/assets/custom-storefronts/hydrogen/hydrogen-product-pages-example.gif" alt="A GIF showing how to navigate from the product list to the product details page"/> <figcaption>Navigating from the product list to the product details page</figcaption> </figure> <h3 id="change-text-styling">Change text styling</h3> <p>You might want to update the color and size of the product title text that displays on your product details page.</p> <p>In <code class="text-highlight text-highlight--grey">src/components/ProductDetails.client.jsx</code>, find all instances <code class="text-highlight text-highlight--grey">Product.Title</code> and replace them with the following code:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/ProductDetails.client.jsx"></script> <script type="text/plain" data-language="jsx"> <Product.Title as="h1" className="text-4xl md:text-5xl font-black text-purple-500 mb-4" /> </script> </div> </p> <p>The text color and size for the product title (<code class="text-highlight text-highlight--grey">The Hydrogen</code>) is updated:</p> <figure class="figure"> <img src="/web/20211201175158im_/https://shopify.dev/assets/custom-storefronts/hydrogen/update-title.png" alt="A screenshot that shows the changed styling of a product title"/> <figcaption>Changed styling of a product title</figcaption> </figure> <h3 id="update-and-remove-components">Update and remove components</h3> <p>You might want to update the <strong>Add to bag</strong> button to read <strong>Add to cart</strong>, and remove the <strong>Buy it now</strong> button.</p> <ol> <li><p>In <code class="text-highlight text-highlight--grey">src/components/ProductDetails.client.jsx</code>, find the following code:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/ProductDetails.client.jsx"></script> <script type="text/plain" data-language="jsx"> <div className="space-y-2 mb-8"> <Product.SelectedVariant.AddToCartButton className={BUTTON_PRIMARY_CLASSES} disabled={isOutOfStock} > {isOutOfStock ? 'Out of stock' : 'Add to bag'} </Product.SelectedVariant.AddToCartButton> {isOutOfStock ? ( <p className="text-black text-center">Available in 2-3 weeks</p> ) : ( <Product.SelectedVariant.BuyNowButton className={BUTTON_SECONDARY_CLASSES} > Buy it now </Product.SelectedVariant.BuyNowButton> )} </div> </script> </div> </p></li> <li><p>Replace the code with the following:</p> <p> <div class="react-code-block" data-preset="file"> <script data-option="filename" data-value="src/components/ProductDetails.client.jsx"></script> <script type="text/plain" data-language="jsx"> <div className="space-y-4 mb-8"> <Product.SelectedVariant.AddToCartButton className="text-center font-mono font-semibold p-4 w-full border-4 border-white shadow-md bg-blue-600 text-white disabled:border-gray-300 disabled:bg-gray-300 disabled:shadow-none disabled:cursor-not-allowed" disabled={isOutOfStock} > {isOutOfStock ? 'Out of stock' : 'Add to cart'} </Product.SelectedVariant.AddToCartButton> </div> </script> </div> </p> <p>The product details page now shows the updated <strong>Add to cart</strong> button, and no longer displays the <strong>Buy it now</strong> button.</p> <figure class="figure"> <img src="/web/20211201175158im_/https://shopify.dev/assets/custom-storefronts/hydrogen/update-buttons.png" alt="A screenshot showing an updated product details page"/> <figcaption>Updated product details page</figcaption> </figure></li> </ol> <h2 id="next-steps">Next steps</h2> <ul> <li>Learn how to <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/getting-started/cart">build a cart</a> in your Hydrogen app.</li> <li>Explore <a rel="external noreferrer noopener" target="_blank" href="https://web.archive.org/web/20211201175158/https://github.com/Shopify/hydrogen-examples">example Hydrogen implementations</a> in GitHub.</li> <li>Get familiar with <a href="/web/20211201175158/https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components">React Server Components</a>.</li> <li>Learn more about the <a href="/web/20211201175158/https://shopify.dev/api/hydrogen">Shopify-specific commerce components, hooks, and utilities</a> included in Hydrogen.</li> </ul> </article> <div id="Feedback" class="feedback"></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="#what-youll-learn">What you'll learn</a></li><li><a href="#requirements">Requirements</a></li><li><a href="#step-1-edit-the-layout-component">Step 1: Edit the layout component</a></li><li><a href="#step-2-create-a-product-list">Step 2: Create a product list</a></li><li><a href="#step-3-customize-the-product-details-page">Step 3: Customize the product details page</a></li><li><a href="#next-steps">Next steps</a></li> </ul> </div> </div> </div></div> </main> <footer class="footer--light" id="PageContainerFooter" data-gid="b58c39d5-ad4a-402d-a179-4a451f98294f" data-page-url-section="custom_storefronts"> <div class="footer-top"> <div class="grid"> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">News and updates</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="/web/20211201175158/https://shopify.dev/changelog">Developer changelog</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.shopifystatus.com/">Shopify status</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Blogs</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.shopify.com/partners/blog">Partner blog</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://shopify.engineering/">Engineering blog</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://ux.shopify.com/">UX blog</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Community</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://community.shopify.com/c/App-Partner-Platform/ct-p/appdev">Developer forums</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://shopifypartners.slack.com/join/shared_invite/zt-fadywn35-y~7e2MJkJkQ4caIjmbKRpg#/shared-invite/email">Partner Slack</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.facebook.com/shopifypartners/">Facebook group</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Social</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link footer-link--social footer-link--twitch" href="https://web.archive.org/web/20211201175158/https://www.twitch.tv/shopifydevs">Twitch</a> </li> <li> <a class="footer-link footer-link--social footer-link--youtube" href="https://web.archive.org/web/20211201175158/https://www.youtube.com/c/shopifydevs">YouTube</a> </li> <li> <a class="footer-link footer-link--social footer-link--twitter" href="https://web.archive.org/web/20211201175158/https://twitter.com/ShopifyDevs">Twitter</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Events</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://unite.shopify.com/">Unite</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://events.shopify.com/partners">Meetups</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://events.shopify.com/partnertownhall">Partner Town Hall</a> </li> </ul> </div> <div class="grid__item grid__item--mobile-up-half grid__item--tablet-up-third grid__item--desktop-up-2"> <h3 class="footer-subhead heading--5 ">Legal</h3> <ul class="footer-top--list" role="list"> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.shopify.com/legal/terms">Terms of Service</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.shopify.com/legal/api-terms">API Terms of Service</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.shopify.com/legal/privacy">Privacy policy</a> </li> <li> <a class="footer-link" href="https://web.archive.org/web/20211201175158/https://www.shopify.com/partners/terms">Partner program agreement</a> </li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="grid grid--vertically-centered"> <div class="grid__item"> <nav class="footer-nav"> <ul class="footer-nav__list" role="list"> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211201175158/https://www.shopify.com/about">About Shopify</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211201175158/https://www.shopify.com/plus">Shopify Plus</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211201175158/https://www.shopify.com/careers">Careers</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211201175158/https://investors.shopify.com/">Investors</a> </li> <li class="footer-nav__list-item"> <a href="https://web.archive.org/web/20211201175158/https://www.shopify.com/press">Press and Media</a> </li> </ul> </nav> </div></div> </div> </footer> </div> </div> </div> <script> //<![CDATA[ window.I18n = window.I18n || {}; window.I18n.data = {"modal":{"home":"Home","close":"Close"},"signup":{"header":"Start your free %{trial_length}-day trial of Shopify","create_now":"Create your store","labels":{"email":"Email address","password":"Password","shop_name":"Your store name","subdomain":"Store URL"},"subtitles":{"shop_name":"This can be changed later.","subdomain":"This will be the default domain for your store, but you can add different domains later. You'll also use your Store URL to log in."},"placeholders":{"password":"Minimum 5 characters"},"success_messages":{"email":"Got it","password":"Looks great","shop_name":"That name is available!","subdomain":"You‘ll use this to log in to your store"},"store_address_suffix":".myshopify.com","hint_messages":{"email_typo_html":"Did you mean \u003cbutton type=\"button\" data-bind-event-click=\"%{on_click}\"\u003e%{suggestion}\u003c/button\u003e?"},"partners_input_label":"Email address","partners_input_placeholder":"Enter your email","submit":"Sign up","signup_html":"Sign up as a Shopify Partner to get a free API\u0026nbsp;key."},"forms":{"errors":{"throttled":"Too many requests from this IP, try again later.","global":{"invalid":"Please enter a valid email address","required":"This field is required.","generic":"Sorry, something went wrong. Please try again later.","throttled":"Too many requests from this IP, try again later."},"shop_name":{"empty":"Please enter a store name","minlength":"Your store name must be at least 4 characters","maxlength":"Your store name can’t be longer than 60 characters","existingAdmin":"A store with that name already exists. If you are the owner you can \u003ca href=\"https://%{err}/admin\"\u003elog in here\u003c/a\u003e","message":"%{err}","matchesPassword":"Your store name can’t be the same as your password","disallowed":"Your store name can’t contain the word \u003cstrong\u003e%{err}\u003c/strong\u003e. Try another."},"email":{"empty":"Please enter an email address","invalid":"Please enter a valid email address","member_exists":"You are already subscribed to this list","generic":"Sorry, something went wrong. Please try again later."},"password":{"empty":"Please enter a password","minlength":"Password must be at least 5 characters","spaces":"Password cannot start or end with a space"},"subdomain":{"empty":"Please enter a subdomain","minlength":"Your subdomain must be at least 4 characters","multiple":"Multiple subdomains are associated with this email","suggest":"Did you mean %{err}?","invalid":"Please enter a valid subdomain","existingAdmin":"A store with that subdomain already exists. If you are the owner you can \u003ca href=\"https://%{err}/admin\"\u003elog in here\u003c/a\u003e","disallowed":"Your subdomain can’t contain the word \u003cstrong\u003e%{err}\u003c/strong\u003e. Try another.","message":"%{err}"}}},"search":{"title":"Search","placeholder":"Search","label":"Search the documentation","suggestions_available":"Suggestions are available. Use up and down arrows to select a suggestion and enter key to use it.","no_suggestions_available":"No suggestions are available for this search term. Try a different search term.","instructions":"As you start typing, we might suggest common search terms. Use up and down arrow keys to select a search term.","submit":"Search Submit button","launcher":"Forward slash to launch search","up_down_navigation_html":"%{up_icon}%{down_icon} arrows to navigate","up":"Up","down":"Down","enter_to_select":"Enter to select","escape_to_close":"Escape to close","instructions_html":"Press %{up_icon}%{down_icon} to navigate, %{enter} to select, %{esc} to dismiss","enter":"enter","esc":"esc","no_results":"No results","try_another_search_term":"Try another search term","could_not_be_completed":"Your search couldn’t be completed","try_again_later":"Please try again later","search":{"page_title":"Search results for '%{search_term}'","meta_description":"Create powerful ecommerce solutions for a variety of scenarios using Shopify’s API.","results_for_html":"Results for %{search_term}","total_results":{"one":"%{count} result","other":"%{count} results"},"no_results_for_html":"No results for %{search_term}","no_search_term":"this request","try_another_term_html":"Try another term or browse the %{docs_href}","docs":"Docs","no_search_results":"No search results","next":"Next","previous":"Previous"}},"feedback":{"page_sentiment_label":"Was this page helpful?","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"}}; window.I18n.globals = {"total_blog_subscribers":"446,005","trial_length":14}; //]]> </script> <script> //<![CDATA[ window.RailsData = { "features": [ "admin_api_next", "cg_fe_comment", "dark_mode" ], "markdown_path": "content/custom-storefronts/hydrogen/getting-started/product-pages.md" } //]]> </script> <script src="https://web.archive.org/web/20211201175158js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/runtime-aae29a1923410bc6c1dcbfe2703c1858339443a1e485f33af57def797a818f15.js"></script> <script src="https://web.archive.org/web/20211201175158js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors~manifests/admin_graphiql~manifests/api_landing_page~manifests/app_challenge~manifests/change~e5d2ea56-347310b936935b802c5280cdf6b434765e50d361a260453e35a9a7bb3fdca4a9.js"></script> <script src="https://web.archive.org/web/20211201175158js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/vendors~application~manifests/api_landing_page~manifests/changelog~manifests/docs~manifests/feedback~77ada086-4f194fcea21d9fee555db6e0b847cef91b2fe8f0781389a8dbbe33332c305845.js"></script> <script src="https://web.archive.org/web/20211201175158js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/manifests/docs-5078e454423d90c7f9d61fda1739321b3de0da5be5ec490d316cc610a04edcdb.js"></script> <script src="https://web.archive.org/web/20211201175158js_/https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/baseline/manifests/feedback-6f243e3dfcae0eddc3b63aaba4caa4ca3f573641d8f89fee75d7a8aa00dc9037.js"></script> <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','//web.archive.org/web/20211201175158/https://connect.facebook.net/en_US/fbevents.js'); fbq('dataProcessingOptions', ['LDU'], 0, 0); fbq('init', '1139564706572105'); fbq('track', 'PageView'); </script> <noscript> <img height="0" width="0" style="display: none" alt="" src="https://web.archive.org/web/20211201175158im_/https://www.facebook.com/tr?id=1139564706572105&ev=PageView&noscript=1"/> </noscript> </body> </html>