CINXE.COM
An Overview of Liquid: Shopify's Templating Language - Shopify Indonesia
<!DOCTYPE html><html lang="en-ID"><head><title>An Overview of Liquid: Shopify's Templating Language - Shopify Indonesia</title><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Liquid is Shopify's templating language. Learn how it fits into Shopify theme building, and the core concepts that will help you build ecommerce templates. "/><meta property="fb:pages" content="20409006880"/><meta property="fb:app_id" content="847460188612391"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Shopify"/><meta property="og:title" content="An Overview of Liquid: Shopify's Templating Language - Shopify Indonesia"/><meta property="og:description" content="Liquid is Shopify's templating language. Learn how it fits into Shopify theme building, and the core concepts that will help you build ecommerce templates. "/><meta property="og:image" content="https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154"/><meta property="twitter:image" content="https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154"/><meta property="og:url" content="https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"/><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="An Overview of Liquid: Shopify's Templating Language - Shopify Indonesia"/><meta property="twitter:description" content="Liquid is Shopify's templating language. Learn how it fits into Shopify theme building, and the core concepts that will help you build ecommerce templates. "/><link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/brochureV2-BYGn9kt8.css"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/static/fonts/ShopifySans--regular.woff2"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/static/fonts/ShopifySans--medium.woff2"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/static/fonts/ShopifySans--bold.woff2"/><link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/blog-DaLkAq42.css"/><link rel="icon" href="https://cdn.shopify.com/shopifycloud/web/assets/v1/favicon-default-6cbad9de243dbae3.ico" type="image/x-icon"/><link rel="apple-touch-icon" href="https://cdn.shopify.com/b/shopify-brochure2-assets/c97c60ca19c64a8b5378d9f9e971f7bd.png"/><link rel="apple-touch-icon" sizes="120x120" href="https://cdn.shopify.com/b/shopify-brochure2-assets/c97c60ca19c64a8b5378d9f9e971f7bd.png"/><link rel="apple-touch-icon" sizes="114x114" href="https://cdn.shopify.com/b/shopify-brochure2-assets/b13486e5693b246af63c66ab047a6b6b.png"/><link rel="apple-touch-icon" sizes="72x72" href="https://cdn.shopify.com/b/shopify-brochure2-assets/8734d76c98437c8ae8a628bbeed3750a.png"/><link rel="apple-touch-icon" sizes="57x57" href="https://cdn.shopify.com/b/shopify-brochure2-assets/193f18e4855704ef1716dc0cd750c1ee.png"/><link rel="canonical" href="https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"/><link href="https://cdn.shopify.com" rel="preconnect"/><link href="https://gtm.shopify.com" rel="preconnect"/><link href="https://www.googletagmanager.com" rel="preconnect"/><link href="https://www.shopify.com/au/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-AU" rel="alternate"/><link href="https://www.shopify.com/ca/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-CA" rel="alternate"/><link href="https://www.shopify.com/hk-en/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-HK" rel="alternate"/><link href="https://www.shopify.com/in/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-IN" rel="alternate"/><link href="https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-ID" rel="alternate"/><link href="https://www.shopify.com/ie/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-IE" rel="alternate"/><link href="https://www.shopify.com/my/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-MY" rel="alternate"/><link href="https://www.shopify.com/nz/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-NZ" rel="alternate"/><link href="https://www.shopify.com/ng/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-NG" rel="alternate"/><link href="https://www.shopify.com/ph/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-PH" rel="alternate"/><link href="https://www.shopify.com/sg/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-SG" rel="alternate"/><link href="https://www.shopify.com/za/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-ZA" rel="alternate"/><link href="https://www.shopify.com/uk/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en-GB" rel="alternate"/><link href="https://www.shopify.com/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" hrefLang="en" rel="alternate"/></head><body class="overscroll-y-none"><div class="absolute top-2 left-2 z-[100] pointer-events-none"><a href="#main" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-dark-primary-text bg-button-dark-primary-bg border-button-dark-primary-border ring-button-dark-primary-border hover:text-button-dark-primary-text-hover hover:bg-button-dark-primary-bg-hover hover:border-button-dark-primary-border-hover hover:ring-button-dark-primary-border-hover focus:text-button-dark-primary-text-focus focus:bg-button-dark-primary-bg-focus focus:border-button-dark-primary-border-focus focus:ring-button-dark-primary-border-focus active:text-button-dark-primary-text-active active:bg-button-dark-primary-bg-active active:border-button-dark-primary-border-active active:ring-button-dark-primary-border-active disabled:text-button-dark-primary-text-disabled disabled:bg-button-dark-primary-bg-disabled disabled:border-button-dark-primary-border-disabled disabled:ring-button-dark-primary-border-disabled transition-transform duration-300 translate-y-[-200%] motion-reduce:transition-none focus:translate-y-0" data-component-name="button" data-mode="dark" target="">Skip to Content</a></div><div class="relative"><header class="font-shopifysans absolute h-full w-full pointer-events-none z-50" data-component-name="global-nav" data-viewable-component="true" data-has-secondary-navigation="true"><div class="after:absolute after:top-0 after:left-0 after:will-change-[opacity] after:pointer-events-none after:h-full after:w-full after:z-10 after:transition-opacity after:duration-200 w-full z-50 after:bg-white text-black after:opacity-100 -top-global-header pointer-events-auto sticky"><div class="h-global-header px-margin xl:px-auto-xl flex items-center z-20 relative"><div class="w-[150px] sm:w-[217px] mt-0 sm:mr-12 shrink-0"><a href="/id/partners" data-component-name="partners-logo" aria-label="Shopify partners logo"><svg viewBox="0 0 200 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="max-w-full"><path d="M117.923 31.189H116.694L119.399 17.2375C119.699 15.6754 119.918 14.221 120.109 12.9282H121.284L120.847 15.7023H120.902C122.158 13.79 123.989 12.6319 125.929 12.6319C128.77 12.6319 129.863 14.9482 129.863 17.1567C129.863 21.7354 126.366 26.1524 122.131 26.1524C120.519 26.1524 119.59 25.8292 119.044 25.533H118.989L117.923 31.189ZM120.027 20.2271L119.262 24.321C119.918 24.8327 120.956 25.102 122.213 25.102C125.656 25.102 128.579 21.1428 128.579 17.2375C128.579 15.6754 127.869 13.6823 125.546 13.6823C123.579 13.6823 120.847 15.9178 120.027 20.2271ZM141.148 25.8562H139.945C139.918 25.0482 140.082 23.6207 140.328 22.0047H140.273C138.716 25.0482 136.803 26.1524 134.754 26.1524C132.432 26.1524 131.093 24.321 131.093 22.0316C131.093 17.426 134.727 12.6319 139.973 12.6319C141.066 12.6319 142.24 12.7935 143.033 13.009L141.721 19.7423C141.202 22.3548 141.066 24.5364 141.148 25.8562ZM140.765 18.3956L141.639 13.8978C141.311 13.79 140.738 13.6823 139.754 13.6823C135.765 13.6823 132.404 17.453 132.377 21.8162C132.35 23.3514 132.869 25.102 135.027 25.102C137.377 25.102 140.082 22.0047 140.765 18.3956ZM145.601 25.8562H144.372L146.066 17.1298C146.339 15.6215 146.557 14.194 146.721 12.9282H147.842C147.705 13.8439 147.596 14.7596 147.404 15.837H147.486C148.306 14.0324 149.672 12.6319 151.393 12.6319C151.585 12.6319 151.858 12.6588 151.995 12.6858L151.749 13.9247C151.612 13.8978 151.421 13.8708 151.148 13.8708C149.508 13.8708 147.404 16.2948 146.803 19.5807L145.601 25.8562ZM155.847 10.558L157.186 10.0732L156.639 12.9282H159.973L159.781 13.9247H156.421L155 21.3852C154.836 22.2471 154.727 22.9204 154.727 23.7284C154.727 24.5903 155.164 25.0751 156.038 25.0751C156.475 25.0751 156.831 25.0482 157.104 24.9404L157.213 25.91C156.858 26.0447 156.339 26.1255 155.792 26.1255C154.016 26.1255 153.443 24.9135 153.443 23.7823C153.443 23.0012 153.552 22.2471 153.743 21.3314L155.191 13.9247H153.197L153.388 12.9282H155.41L155.847 10.558ZM161.066 25.8562H159.836L161.639 16.4026C161.913 15.1098 162.076 13.9516 162.213 12.9282H163.361L162.951 15.7023H163.005C164.153 13.817 166.011 12.6319 168.06 12.6319C169.235 12.6319 171.339 13.2514 171.339 16.241C171.339 16.8335 171.229 17.5607 171.093 18.2879L169.645 25.8562H168.415L169.891 18.1802C169.973 17.6415 170.082 16.9951 170.082 16.4026C170.082 14.8674 169.454 13.7092 167.568 13.7092C165.71 13.7092 162.923 15.81 162.295 19.2306L161.066 25.8562ZM181.53 24.1324L181.913 25.102C181.229 25.533 179.863 26.1255 177.923 26.1255C174.59 26.1255 173.333 23.6207 173.333 21.089C173.333 17.2375 176.311 12.6319 180.219 12.6319C182.596 12.6319 183.607 14.0863 183.607 15.5946C183.607 19.042 179.344 19.7423 174.727 19.6884C174.535 20.3618 174.59 21.9778 174.891 22.8666C175.437 24.3479 176.585 25.0751 178.087 25.0751C179.727 25.0751 180.874 24.5364 181.53 24.1324ZM182.35 15.6754V15.6484C182.35 14.3556 181.366 13.6823 180 13.6823C177.623 13.6823 175.628 16.1063 174.918 18.665C178.798 18.7188 182.35 18.2071 182.35 15.6754ZM185.628 25.8562H184.399L186.093 17.1298C186.366 15.6215 186.585 14.194 186.749 12.9282H187.869C187.732 13.8439 187.623 14.7596 187.432 15.837H187.514C188.333 14.0324 189.699 12.6319 191.421 12.6319C191.612 12.6319 191.885 12.6588 192.022 12.6858L191.776 13.9247C191.639 13.8978 191.448 13.8708 191.175 13.8708C189.536 13.8708 187.432 16.2948 186.831 19.5807L185.628 25.8562ZM191.12 25.3175L191.557 24.321C192.104 24.698 193.06 25.0751 194.016 25.0751C195.792 25.0751 197.022 23.8362 197.022 22.3818C197.022 21.1428 196.53 20.3887 195.082 19.5268C193.579 18.638 192.978 17.4799 192.978 16.3218C192.978 14.3287 194.727 12.6319 197.076 12.6319C198.06 12.6319 199.016 12.9551 199.426 13.2514L198.962 14.2748C198.579 14.0324 197.814 13.6823 196.94 13.6823C195.355 13.6823 194.208 14.7866 194.208 16.1332C194.208 17.3452 194.891 17.9916 196.12 18.7458C197.596 19.6346 198.279 20.8196 198.279 22.0586C198.279 24.6172 196.229 26.1255 193.907 26.1255C192.65 26.1255 191.585 25.6946 191.12 25.3175Z" fill="#1F2124"></path><path d="M24.346 6.07805C24.3234 5.92163 24.1874 5.83224 24.074 5.83224C23.9607 5.83224 21.5351 5.65348 21.5351 5.65348C21.5351 5.65348 19.8577 3.99989 19.6536 3.82113C19.4723 3.64236 19.1096 3.68705 18.9736 3.73174C18.9509 3.73174 18.6109 3.84347 18.0215 4.02224C17.4548 2.391 16.4574 0.916176 14.7119 0.916176C14.6666 0.916176 14.6212 0.916176 14.5532 0.916176C14.0772 0.290495 13.4425 0 12.9211 0C8.84074 0 6.89124 5.0278 6.27919 7.57521C4.69239 8.06682 3.55896 8.40201 3.42295 8.4467C2.53888 8.71485 2.51621 8.73719 2.40287 9.56399C2.31219 10.1897 0 27.8428 0 27.8428L18.0215 31.1723L27.7917 29.0942C27.7917 29.0718 24.3687 6.23447 24.346 6.07805ZM17.0241 4.29039C16.5707 4.42446 16.0493 4.58088 15.5053 4.75965C15.5053 4.64792 15.5053 4.55854 15.5053 4.42446C15.5053 3.44125 15.3693 2.6368 15.1426 1.98877C16.0493 2.12285 16.6387 3.12841 17.0241 4.29039ZM14.0092 2.21223C14.2585 2.83791 14.4172 3.7094 14.4172 4.91607C14.4172 4.98311 14.4172 5.0278 14.4172 5.09483C13.4198 5.40767 12.3544 5.72052 11.2663 6.0557C11.8783 3.75409 13.0344 2.6368 14.0092 2.21223ZM12.8077 1.0726C12.9891 1.0726 13.1704 1.13963 13.3291 1.25136C12.0143 1.8547 10.6316 3.37421 10.0422 6.43558C9.18077 6.70373 8.34203 6.94953 7.54863 7.19534C8.22869 4.87138 9.88349 1.0726 12.8077 1.0726Z" fill="#95BF47"></path><path d="M24.074 5.80986C23.9607 5.80986 21.5351 5.63109 21.5351 5.63109C21.5351 5.63109 19.8577 3.97751 19.6537 3.79874C19.5857 3.7317 19.495 3.68701 19.4043 3.68701L18.0442 31.1723L27.8143 29.0941C27.8143 29.0941 24.3914 6.23443 24.3687 6.07801C24.3234 5.92159 24.1874 5.83221 24.074 5.80986Z" fill="#5E8E3E"></path><path d="M14.7119 11.1284L13.5105 14.659C13.5105 14.659 12.445 14.1003 11.1529 14.1003C9.24877 14.1003 9.1581 15.2847 9.1581 15.5752C9.1581 17.1841 13.4198 17.8097 13.4198 21.5862C13.4198 24.5582 11.5156 26.4799 8.93141 26.4799C5.82582 26.4799 4.26169 24.5805 4.26169 24.5805L5.10042 21.8767C5.10042 21.8767 6.73256 23.2621 8.09268 23.2621C8.99942 23.2621 9.36211 22.5694 9.36211 22.0554C9.36211 19.9549 5.87116 19.8655 5.87116 16.402C5.87116 13.497 7.97933 10.6814 12.2637 10.6814C13.8958 10.6591 14.7119 11.1284 14.7119 11.1284Z" fill="white"></path><path d="M39.194 17.765C38.2192 17.2511 37.7205 16.8042 37.7205 16.2008C37.7205 15.4411 38.4232 14.9495 39.5113 14.9495C40.7808 14.9495 41.9142 15.4634 41.9142 15.4634L42.7983 12.7819C42.7983 12.7819 41.9822 12.1562 39.5793 12.1562C36.2244 12.1562 33.8895 14.0556 33.8895 16.7148C33.8895 18.2343 34.9776 19.3739 36.4284 20.2007C37.6072 20.8488 38.0152 21.318 38.0152 22.0107C38.0152 22.7258 37.4258 23.3068 36.3377 23.3068C34.7283 23.3068 33.1868 22.48 33.1868 22.48L32.2347 25.1615C32.2347 25.1615 33.6402 26.1 36.0204 26.1C39.466 26.1 41.9595 24.4241 41.9595 21.4074C41.9369 19.7538 40.6901 18.6142 39.194 17.765Z" fill="#1F2124"></path><path d="M52.9311 12.1112C51.2309 12.1112 49.8935 12.9157 48.8734 14.1223L48.8281 14.1L50.3015 6.50244H46.4705L42.7302 25.8539H46.5612L47.8307 19.2395C48.3294 16.7368 49.6441 15.1949 50.8682 15.1949C51.7296 15.1949 52.0697 15.7759 52.0697 16.6027C52.0697 17.1167 52.0243 17.7647 51.911 18.2787L50.4602 25.8539H54.2912L55.7873 18.0329C55.946 17.2061 56.0593 16.2228 56.0593 15.5525C56.082 13.3849 54.9486 12.1112 52.9311 12.1112Z" fill="#1F2124"></path><path d="M64.7641 12.1113C60.1397 12.1113 57.0795 16.2229 57.0795 20.8038C57.0795 23.7311 58.9156 26.0998 62.3612 26.0998C66.895 26.0998 69.9552 22.0999 69.9552 17.4073C69.9779 14.6811 68.3684 12.1113 64.7641 12.1113ZM62.8826 23.1948C61.5678 23.1948 61.0238 22.0999 61.0238 20.7144C61.0238 18.5469 62.1572 15.0163 64.2427 15.0163C65.6028 15.0163 66.0562 16.1783 66.0562 17.2955C66.0562 19.6195 64.9001 23.1948 62.8826 23.1948Z" fill="#1F2124"></path><path d="M79.7933 12.1113C77.2091 12.1113 75.7357 14.3683 75.7357 14.3683H75.6903L75.917 12.3348H72.5167C72.358 13.6979 72.0407 15.7984 71.746 17.3626L69.0711 31.217H72.9021L73.9675 25.6082H74.0582C74.0582 25.6082 74.8516 26.0998 76.3024 26.0998C80.8134 26.0998 83.7603 21.5412 83.7603 16.938C83.7603 14.3906 82.6042 12.1113 79.7933 12.1113ZM76.121 23.2395C75.1236 23.2395 74.5342 22.6809 74.5342 22.6809L75.1689 19.1502C75.6223 16.7816 76.8691 15.2174 78.2065 15.2174C79.3853 15.2174 79.748 16.29 79.748 17.2955C79.748 19.7536 78.2745 23.2395 76.121 23.2395Z" fill="#1F2124"></path><path d="M89.2462 6.68115C88.022 6.68115 87.0473 7.64202 87.0473 8.87104C87.0473 9.98832 87.7727 10.7704 88.8608 10.7704H88.9061C90.1076 10.7704 91.1276 9.96598 91.1503 8.58054C91.1503 7.46325 90.4022 6.68115 89.2462 6.68115Z" fill="#1F2124"></path><path d="M83.8737 25.8317H87.7046L90.3115 12.4019H86.4579L83.8737 25.8317Z" fill="#1F2124"></path><path d="M100.082 12.3793H97.4068L97.5428 11.7537C97.7695 10.4576 98.5402 9.31798 99.8324 9.31798C100.512 9.31798 101.056 9.51909 101.056 9.51909L101.805 6.5471C101.805 6.5471 101.147 6.21191 99.719 6.21191C98.3589 6.21191 96.9988 6.59179 95.956 7.46328C94.6413 8.55822 94.0292 10.1448 93.7345 11.7537L93.6212 12.3793H91.8304L91.2636 15.2396H93.0545L91.0143 25.8315H94.8453L96.8854 15.2396H99.5377L100.082 12.3793Z" fill="#1F2124"></path><path d="M109.33 12.4019C109.33 12.4019 106.928 18.3682 105.862 21.6307H105.817C105.749 20.5804 104.865 12.4019 104.865 12.4019H100.83L103.142 24.7144C103.187 24.9825 103.165 25.1613 103.051 25.3401C102.598 26.1892 101.85 27.016 100.966 27.6193C100.24 28.1333 99.4243 28.4685 98.7896 28.6919L99.855 31.9097C100.626 31.7533 102.258 31.1053 103.618 29.8539C105.363 28.245 106.996 25.7423 108.65 22.3457L113.343 12.4019H109.33Z" fill="#1F2124"></path></svg></a></div><nav class="lg:flex hidden h-full" aria-label="Main" itemscope="" itemType="https://schema.org/SiteNavigationElement" data-click-outside="dismiss" data-component-name="desktop-main-navigation" data-viewable-component="true"><ul class="flex h-full"><li class="mr-8 text-base"><div class="flex h-full"><a class="flex items-center hover:underline text-black hover:text-black" href="https://help.shopify.com/en/partners" aria-label="External source: Docs">Docs</a></div></li><li class="mr-8 text-base"><div class="flex h-full"><a class="flex items-center hover:underline text-black hover:text-black" href="https://community.shopify.com/c/partners-and-developers/ct-p/appdev" aria-label="External source: Community">Community</a></div></li><li class="mr-8 text-base"><div class="flex h-full"><a class="flex items-center hover:underline text-black hover:text-black" href="https://academy.shopify.com" aria-label="External source: Shopify Academy">Shopify Academy</a></div></li></ul></nav><div class="ml-auto transition-opacity duration-200 opacity-100 delay-100"><ul class="lg:flex hidden items-center"><li class="mr-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="/id" data-component-name="shopify site">shopify.com</a></li><li class="mr-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="https://partners.shopify.com/organizations" data-component-name="login" aria-label="External source: Log in">Log in</a></li><li class="leading-[0]"><a href="https://partners.shopify.com/signup" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled" data-component-name="sign up" data-mode="light" target="">Join Now</a></li></ul><ul class="flex items-center lg:hidden mr-[-15px]"><li class="mr-2 sm:mr-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="https://partners.shopify.com/signup" data-component-name="shopify site" aria-label="External source: Join Now">Join Now</a></li><li><button class="flex h-12 w-12 cursor-pointer select-none flex-col items-center justify-center gap-1" aria-label="Menu" aria-expanded="false" aria-controls="MobileDrawer" aria-haspopup="true" type="button" data-component-name="navigation-toggle-open"><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-black"></div><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-black"></div><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-black"></div></button></li></ul></div></div></div><div class="top-0 w-full z-20 before:absolute before:top-0 before:left-0 before:pointer-events-none before:w-full before:h-global-header-with-border before:z-20 after:absolute after:top-0 after:left-0 after:will-change-[opacity] after:pointer-events-none after:h-full after:w-full after:z-10 after:transition-opacity after:duration-200 after:bg-white text-black before:border-y before:border-black/20 after:opacity-100 pointer-events-auto before:opacity-0 sticky"><div class="h-global-header container flex items-center relative z-20"><div data-component-name="secondary-navigation" class="flex items-center gap-x-8 w-full h-14 sm:h-global-header text-black"><a class="absolute left-0 top-1/2 -translate-y-1/2 transform-opacity will-change-opacity duration-200 z-20 opacity-0 pointer-events-none" href="/id/" data-component-name="logo-home"><svg viewBox="0 0 32 36" role="img" aria-labelledby="ShoppingBagOnlyLogoTitle" class="w-8 h-9"><title id="ShoppingBagOnlyLogoTitle">Shopify</title><path fill="#95BF47" d="M27.1851 6.83166C27.1598 6.65519 27.0079 6.55435 26.8813 6.55435C26.7548 6.55435 24.2489 6.50393 24.2489 6.50393C24.2489 6.50393 22.148 4.48717 21.9455 4.26028C21.743 4.0586 21.338 4.10902 21.1861 4.15944C21.1861 4.15944 20.7812 4.28549 20.123 4.48717C20.0218 4.13423 19.8446 3.70567 19.6168 3.2519C18.8828 1.84016 17.769 1.08387 16.4528 1.08387C16.3516 1.08387 16.2756 1.08387 16.1744 1.10908C16.1237 1.05866 16.0984 1.00824 16.0478 0.983034C15.4656 0.378004 14.7316 0.0754894 13.8457 0.100699C12.1498 0.151118 10.4539 1.38639 9.0617 3.55441C8.09984 5.0922 7.36579 7.00813 7.13798 8.49549C5.18896 9.10052 3.82211 9.52908 3.77149 9.52908C2.78432 9.8316 2.75901 9.85681 2.63245 10.7896C2.58182 11.4954 0 31.3858 0 31.3858L21.6671 35.1168L31.0578 32.7975C31.0325 32.7975 27.2104 7.00813 27.1851 6.83166ZM19.0346 4.8401C18.5284 4.99136 17.9715 5.16783 17.364 5.3695C17.364 4.51238 17.2375 3.30232 16.8578 2.29393C18.1487 2.49561 18.7815 3.95777 19.0346 4.8401ZM16.225 5.69723C15.086 6.05016 13.8457 6.42831 12.6054 6.80645C12.9597 5.47034 13.6179 4.15944 14.4278 3.27711C14.7316 2.94938 15.1619 2.59645 15.6428 2.39477C16.1491 3.37794 16.2503 4.76447 16.225 5.69723ZM13.8963 1.23513C14.3013 1.23513 14.6303 1.31076 14.9088 1.51244C14.4532 1.73932 13.9975 2.09226 13.5925 2.54603C12.5041 3.70567 11.6688 5.49555 11.3398 7.23501C10.302 7.56274 9.2895 7.86525 8.37827 8.14256C8.98576 5.39471 11.2892 1.31076 13.8963 1.23513Z"></path><path fill="#5E8E3E" d="M26.8814 6.55452C26.7548 6.55452 24.2489 6.5041 24.2489 6.5041C24.2489 6.5041 22.148 4.48733 21.9455 4.26045C21.8696 4.18482 21.7684 4.1344 21.6671 4.1344V35.117L31.0579 32.7977C31.0579 32.7977 27.2358 7.00829 27.2104 6.83183C27.1598 6.65536 27.0079 6.55452 26.8814 6.55452Z"></path><path fill="white" d="M16.4528 11.3696L15.3644 15.4283C15.3644 15.4283 14.1494 14.8737 12.7066 14.9745C10.5804 15.1006 10.5804 16.4367 10.5804 16.7644C10.707 18.5795 15.4909 18.9828 15.7694 23.2433C15.9719 26.5961 13.9975 28.8902 11.112 29.0667C7.66952 29.2432 5.77112 27.2264 5.77112 27.2264L6.50517 24.1256C6.50517 24.1256 8.42888 25.5625 9.9476 25.4617C10.9348 25.4113 11.3144 24.5794 11.2638 24.0248C11.112 21.6551 7.2139 21.8063 6.96078 17.8988C6.75829 14.6216 8.90981 11.3191 13.6685 11.0166C15.5162 10.8906 16.4528 11.3696 16.4528 11.3696Z"></path></svg></a><nav aria-label="Secondary" class="hidden lg:block h-full transition-transform will-change-transform duration-200 translate-x-0" data-click-outside="dismiss"><ul class="flex items-center gap-x-8 h-full"><li class="relative flex flex-col items-center h-full border-black/30"><a href="/id/partners/blog" class="font-bold flex items-center h-full hover:underline outline-4 outline-state-focus focus-visible:outline">Blog</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/id/partners/blog/topics/shopify-news" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Shopify News</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/id/partners/blog/topics/case-studies" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Case Studies</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><a href="/id/partners/blog/latest" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Latest</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-black"><button type="button" aria-expanded="false" aria-haspopup="true" aria-controls="id_More_3" class="h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1"><span class="flex items-center">More<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" icon="chevron" height="64" width="64" class="rotate-180 shrink-0 w-5 h-7 ml-2"><path fill="currentColor" d="M12 10.4a.798.798 0 0 1-.566-.234L8 6.73l-3.434 3.435a.8.8 0 1 1-1.132-1.132l4-4a.8.8 0 0 1 1.132 0l4 4A.8.8 0 0 1 12 10.4Z"></path></svg></span></button><div id="id_More_3" class="absolute top-[80px] duration-500 left-0 rounded-lg transition-all box-content opacity-0 -translate-y-6 pointer-events-none w-[256px] bg-white text-black shadow-light"><ul class="p-4 w-[224px] box-content"><li class="py-3 px-4 rounded-lg"><a href="/id/partners/blog/topics/shopify-app-development" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">App development</a></li><li class="py-3 px-4 rounded-lg"><a href="/id/partners/blog/topics/shopify-theme-development" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Shopify Theme Development</a></li><li class="py-3 px-4 rounded-lg"><a href="/id/partners/blog/topics/front-end-development" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Front End Development</a></li><li class="py-3 px-4 rounded-lg"><a href="/id/partners/blog/topics/inspiration-creativity" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Inspiration & Creativity</a></li><li class="py-3 px-4 rounded-lg"><a href="/id/partners/blog/topics/finding-new-clients" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Finding New Clients</a></li><li class="py-3 px-4 rounded-lg"><a href="/id/partners/blog/topics" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">See All topics</a></li></ul></div></li></ul></nav><div class="hidden lg:block ml-auto"><div class="hidden lg:flex flex-row items-center text-base cursor-pointer blog-navbar-navigation">Search<svg viewBox="0 0 20 20" class="w-4 h-4 ml-2"><path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></div><div class="mb-6 lg:mb-0 lg:absolute lg:bottom-0 lg:left-0 w-full z-50 bg-white lg:hidden"><div class="lg:container lg:h-[71px] flex items-center"><div class="flex flex-row items-center text-base relative w-full border-b border-[#ccc]"><form method="get" action="/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" class="flex lg:block w-full -mt-4 lg:mt-0" novalidate="" data-component-extra-search-value=""><input class="outline-0 text-base relative z-20 bg-transparent w-full lg:placeholder:text-transparent py-2 placeholder-shade-50" type="text" name="header-search" autoComplete="off" placeholder="Search" value=""/><button class="lg:hidden p-6 -mr-6" aria-label="Search icon"><svg viewBox="0 0 20 20" class="w-4 h-4 ml-2"><path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></button></form><div class="hidden lg:flex absolute z-10 top-1/2 left-0 -translate-y-1/2 flex-row items-center text-base text-shade-50">Type something you're looking for<svg viewBox="0 0 20 20" class="w-4 h-4 ml-2"><path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></div><div class="hidden lg:block p-2 cursor-pointer ml-auto"><svg viewBox="0 0 20 20" class="size-5"><path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z"></path></svg></div></div></div></div></div><div class="pl-8 app-signup-links transform-opacity duration-200 relative before:h-[22px] before:bg-shade-30 before:w-[1px] before:absolute before:left-0 before:top-[1/2] before:translate-[-1/2] opacity-0 lg:hidden"><ul class="flex items-center"><li class="mr-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="/id" data-component-name="shopify site">shopify.com</a></li><li class="mr-8 text-base"><a class="whitespace-nowrap hover:underline text-black" href="https://partners.shopify.com/organizations" data-component-name="login" aria-label="External source: Log in">Log in</a></li><li class="leading-[0]"><a href="https://partners.shopify.com/signup" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled" data-component-name="sign up" data-mode="light" target="">Join Now</a></li></ul></div></div></div></div><svg class="sr-only" aria-hidden="true"><defs><linearGradient id="start_svg__a" x1="4" y1="2.5" x2="37.5" y2="36" gradientUnits="userSpaceOnUse"><stop stop-color="#00E392"></stop><stop offset="1" stop-color="#00B4CD"></stop></linearGradient><linearGradient id="manage_svg__a" x1="1" y1="1" x2="39" y2="39" gradientUnits="userSpaceOnUse"><stop stop-color="#1CD9D9"></stop><stop offset="1" stop-color="#70D50E"></stop></linearGradient><linearGradient id="market_svg__a" x1="1" y1="1" x2="39" y2="39" gradientUnits="userSpaceOnUse"><stop stop-color="#EA4EF2"></stop><stop offset="1" stop-color="#29C9FF"></stop></linearGradient><linearGradient id="start_svg__b" x1="4" y1="2.5" x2="37.5" y2="36" gradientUnits="userSpaceOnUse"><stop stop-color="#00E392"></stop><stop offset="1" stop-color="#00B4CD"></stop></linearGradient><linearGradient id="sell_svg__a" x1="1" y1="1" x2="39" y2="39" gradientUnits="userSpaceOnUse"><stop stop-color="#33EDE2"></stop><stop offset="1" stop-color="#6754FF"></stop></linearGradient><clipPath id="white_circle_svg__a"><path fill="#fff" d="M0 0h40v40H0z"></path></clipPath><linearGradient id="paint0_linear_1_569" x1="6.12412" y1="7.32529" x2="16.6923" y2="17.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint1_linear_1_569" x1="18.4621" y1="6.91041" x2="12.5203" y2="17.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_589" x1="7.59808" y1="8.96" x2="28.4853" y2="30.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint1_linear_41_589" x1="18.4622" y1="6.91041" x2="12.7852" y2="12.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_1_568" x1="85.4375" y1="44" x2="-160.562" y2="-57" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="0.829504" stop-color="white" stop-opacity="0"></stop></linearGradient><radialGradient id="paint1_radial_1_568" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.4375 49) rotate(-96.3402) scale(54.3323 72.1138)"><stop stop-color="#3C00BB" stop-opacity="0.72"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_1_568" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.438 44) rotate(-15.5615) scale(82.0061 39.4114)"><stop stop-color="#423EFF" stop-opacity="0.6"></stop><stop offset="0.754349" stop-color="#12C06D" stop-opacity="0"></stop></radialGradient><linearGradient id="paint3_linear_1_568" x1="15.1241" y1="17.3253" x2="25.6923" y2="27.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint4_linear_1_568" x1="27.4621" y1="16.9104" x2="21.5203" y2="27.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_1_612" x1="85.4375" y1="44" x2="-160.562" y2="-57" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="0.829504" stop-color="white"></stop></linearGradient><radialGradient id="paint1_radial_1_612" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.4375 49) rotate(-99.5942) scale(44.6242 90.7846)"><stop stop-color="#3C00BB" stop-opacity="0.72"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_1_612" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.438 44) rotate(-47.641) scale(98.7905 47.4778)"><stop stop-color="#423EFF" stop-opacity="0.6"></stop><stop offset="0.754349" stop-color="#12C06D" stop-opacity="0"></stop></radialGradient><linearGradient id="paint3_linear_1_612" x1="15.1242" y1="17.3253" x2="25.6923" y2="27.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint4_linear_1_612" x1="27.4621" y1="16.9104" x2="21.5203" y2="27.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_1_651" x1="85.4375" y1="44" x2="-160.562" y2="-57" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="0.829504" stop-color="white"></stop></linearGradient><radialGradient id="paint1_radial_1_651" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.4375 49) rotate(-99.5942) scale(44.6242 90.7846)"><stop stop-color="#3C00BB" stop-opacity="0.72"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_1_651" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.438 44) rotate(-47.641) scale(98.7905 47.4778)"><stop stop-color="#423EFF" stop-opacity="0.6"></stop><stop offset="0.754349" stop-color="#12C06D" stop-opacity="0"></stop></radialGradient><linearGradient id="paint3_linear_1_651" x1="15.1242" y1="17.3253" x2="25.6923" y2="27.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint4_linear_1_651" x1="27.4621" y1="16.9104" x2="21.5203" y2="27.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_588" x1="-59.2497" y1="-1.6632e-07" x2="-32.4337" y2="99.4491" gradientUnits="userSpaceOnUse"><stop offset="0.000294443" stop-color="#15161B"></stop><stop offset="0.606057" stop-color="#1C1F31"></stop></linearGradient><radialGradient id="paint1_radial_41_588" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146.438 64) rotate(-172.051) scale(224.154 105.307)"><stop stop-color="#333FB2"></stop><stop offset="0.75924" stop-color="#27293B" stop-opacity="0"></stop></radialGradient><linearGradient id="paint2_linear_41_588" x1="16.5981" y1="18.96" x2="37.4853" y2="40.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint3_linear_41_588" x1="27.4622" y1="16.9104" x2="21.7852" y2="22.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_625" x1="-59.2497" y1="-1.6632e-07" x2="-32.4337" y2="99.4491" gradientUnits="userSpaceOnUse"><stop offset="0.000294443" stop-color="#15161B"></stop><stop offset="0.606057" stop-color="#1C1F31"></stop></linearGradient><radialGradient id="paint1_radial_41_625" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146.438 64) rotate(-172.051) scale(224.154 105.307)"><stop stop-color="#333FB2"></stop><stop offset="0.75924" stop-color="#27293B" stop-opacity="0"></stop></radialGradient><linearGradient id="paint2_linear_41_625" x1="16.5981" y1="18.96" x2="37.4853" y2="40.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint3_linear_41_625" x1="27.4622" y1="16.9104" x2="21.7852" y2="22.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_662" x1="-59.2497" y1="-1.6632e-07" x2="-32.4337" y2="99.4491" gradientUnits="userSpaceOnUse"><stop offset="0.000294443" stop-color="#15161B"></stop><stop offset="0.606057" stop-color="#1C1F31"></stop></linearGradient><radialGradient id="paint1_radial_41_662" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146.438 64) rotate(-172.051) scale(224.154 105.307)"><stop stop-color="#333FB2"></stop><stop offset="0.75924" stop-color="#27293B" stop-opacity="0"></stop></radialGradient><linearGradient id="paint2_linear_41_662" x1="16.5981" y1="18.96" x2="37.4853" y2="40.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint3_linear_41_662" x1="27.4622" y1="16.9104" x2="21.7852" y2="22.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient></defs></svg></header><main role="main" id="main" tabindex="-1" class="focus-visible:outline-none"><div class="fixed top-0 left-0 h-[6px] z-50 bg-partners-highlight" style="width:null%"></div><section class="grid grid-cols-full bg-section-light-bg text-section-light-text featured-blogs gap-y-0 pt-36 pb-0" data-section-name="" data-component-name="115244038-an-overview-of-liquid-shopifys-templatin" data-viewable-component="true" data-mode="light"><div class="relative overflow-hidden bg-partners-conversionBg bg-partners-article-converion bg-no-repeat bg-bottom"><picture data-component-name="image"><img alt="" class="absolute right-[-380px] h-full w-auto min-w-[950px]" src=""/></picture><div class="container relative flex flex-col items-center text-center py-[60px] px-[40px] tablet-xl:px-[130px] desktop:px-[210px]"><p class="richtext font-extralight font-sans text-white text-t2">Become a Shopify Partner.</p><p class="richtext font-extralight mb-4 font-sans text-white text-t2">Unlock business growth.</p><a href="https://partners.shopify.com/signup" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 border-button-light-primary-border ring-button-light-primary-border hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled text-base font-ibmmono font-medium bg-partners-conversionButton text-partners-conversionButtonText hover:bg-[#62ba6b] hover:text-black active:bg-[#00740B] active:text-black focus:bg-[#00740B] focus:text-black" data-component-name="button" target="">Join Today</a></div></div><article id="article" itemscope="" itemType="https://schema.org/Article" class="featured-blogs__section"><meta itemProp="mainEntityOfPage" content="/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"/><meta itemProp="dateModified" content="2020-01-30T03:00:00.000Z"/><div class="relative"><div class="py-10 tablet:text-center desktop:pt-16 desktop:pb-16" data-mode="light"><div class="container desktop:w-9/12 desktop:mx-auto"><div class="uppercase text-shade-100 font-aktivgroteskextended text-[12px] leading-[14px] tracking-[0.01em] font-semibold tablet-xl:font-shopifysans tablet-xl:text-[11px] tablet-xl:leading-[13px] tablet:tracking-[0.5px] tablet:font-bold pb-2"><a href="/id/partners/blog" class="no-underline hover:text-link-light-hover topic-link">blog</a><span class="richtext px-2.5 text-xs">|</span><a href="/id/partners/blog/topics/shopify-theme-development" class="no-underline hover:text-link-light-hover topic-link">Shopify Theme Development</a></div><h1 class="richtext font-medium tracking-[-0.02em] text-[28px] leading-9 tablet-xl:text-[40px] tablet-xl:leading-[48px]" itemProp="headline">An Overview of Liquid: Shopify's Templating Language</h1><p class="richtext font-normal tracking-[-0.02em] text-[18px] leading-[26px] tablet-xl:text-[20px] tablet-xl:leading-7 desktop:text-[22px] desktop:leading-8 mt-4 desktop:mt-4">Liquid is Shopify’s templating language. In this article, learn how to get started with Liquid, including how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates.</p><div class="lg:hidden mt-4 tablet-xl:mt-12"><div class="gap-x-1 flex flex-wrap font-bold sm:justify-center !text-lg text-legacy-gray-90"> <!-- -->by <span itemProp="author" itemscope="" itemType="https://schema.org/Person"><a href="/id/partners/blog/authors/keir-whitaker" class="no-underline" itemProp="url"><span itemProp="name">Keir Whitaker</span></a></span></div><div class="text-body-sm text-shade-50">Last updated<!-- --> <time>30 Jan 2020</time></div></div></div></div><div class="tablet:container desktop:w-9/12 desktop:mx-auto overflow-hidden flex justify-center"><img class="" src="https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782" alt="Shopify liquid" loading="eager" decoding="async" width="1848" height="782" srcSet="https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=200 200w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=400 400w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=600 600w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=800 800w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=1000 1000w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=1200 1200w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=1400 1400w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=1600 1600w, https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154&originalWidth=1848&originalHeight=782&width=1800 1800w"/></div></div><div class="container grid-cols-4 sm:grid-cols-8 md:grid-cols-12 block tablet-xl:grid gap-y-0 gap-x-12"><div class="col-span-4 xs:col-span-12 md:col-span-4 lg:col-span-3 col-start-1 nav-drawer md:pb-20 pt-10 desktop:pt-16" data-component-name="blog-left-sidebar"><nav class="md:top-[calc(var(--header-height)*2)] md:max-h-[calc(100vh-var(--header-height))] md:overflow-auto md:sticky md:pb-6 pr-2"><div class="bg-[#EAE8FF] hidden md:block"><div class="p-6"><p class="richtext text-2xl font-aktivgroteskextended text-[#390278] font-bold mb-4">Earn more revenue as a Shopify Partner</p><p class="richtext font-aktivgroteskextended text-[#212326] text-base mb-4">Grow your Shopify expertise and unlock new ways to earn revenue for your own business with the Shopify Partner Program.</p><a href="https://partners.shopify.com/signup" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-light-primary-text border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled text-base bg-[#390278] hover:bg-[#390278] active:bg-[#390278] focus:bg-[#390278]" data-component-name="button" target="">Become a Partner</a></div></div></nav></div><div class="col-span-4 xs:col-span-12 md:col-span-8 lg:col-span-6 col-start-1"><div id="article-content" class="text-body-base text-shade-70 md:pt-10 desktop:pt-16 [&_h2]:text-t4 [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:text-black [&_h2]:font-medium [&_.heading--2]:text-t5 [&_.heading--2]:text-black [&_.heading--2]:font-aktivgroteskextended [&_.heading--2]:mb-6 [&_.heading--2]:font-medium [&_h3]:text-t5 [&_h3]:mt-12 [&_h3]:mb-4 [&_h3]:text-black [&_h4]:text-t6 [&_h4]:mt-12 [&_h4]:mb-4 [&_h4]:text-black [&_h5]:text-t7 [&_p]:mb-6 [&_hr]:mb-6 [&_a]:text-black [&_a]:font-medium [&_a]:underline [&_a:hover]:no-underline [&_sup_a]:no-underline [&_sup_a:hover]:underline [&_.marketing-button]:text-white [&_.marketing-button]:no-underline [&_a>img]:mt-3 [&_a>img]:mb-8 [&_a>img]:h-[revert-layer] [&_img]:my-12 [&_a>img]:inline-block [&_figure>img]:mb-0 [&_figure]:mb-12 [&_img]:inline-block [&_ul]:list-disc [&_ul]:space-y-3 [&_ul]:pl-6 [&_ul]:mb-6 [&_ul_li]:pl-4 [&_ol]:list-decimal [&_ol]:space-y-3 [&_ol]:pl-6 [&_ol]:mb-6 [&_ol_li]:pl-4 [&_ol_li::marker]:font-bold [&_iframe]:max-w-full [&_figcaption]:mb-12 [&_figcaption]:text-center [&_figcaption]:text-xs [&_figcaption]:sm:text-sm [&_figcaption]:mt-1 [&_strong]:font-medium [&_strong]:text-black [&_.heading--4]:font-aktivgroteskextended [&_.heading--4]:text-2xl [&_.heading--4]:text-black [&_.heading--4]:font-medium [&_.heading--4]:tracking-[-.02em] [&_iframe]:mt-3 [&_iframe]:mb-9 [&_.container]:m-0 [&_.container]:flex [&_.container]:gap-5 [&_.container]:flex-wrap [&_.green]:text-[green] [&_.red]:text-[red] [&_.pros]:bg-[#eafaea] [&_.pros]:rounded-[10px] [&_.pros]:p-5 [&_.pros_h3]:mt-2 [&_.cons]:bg-[#ffebe6] [&_.cons]:rounded-[10px] [&_.cons]:p-5 [&_.cons_h3]:mt-2 [&_.pros]:tablet:flex-[1_0_calc(50%-10px)] [&_.pros]:flex-[1_0_100%] [&_.cons]:tablet:flex-[1_0_calc(50%-10px)] [&_.cons]:flex-[1_0_100%] [&_.pros_.grid-container]:grid [&_.cons_.grid-container]:grid [&_.grid-container]:gap-[5px] [&_.grid-container]:grid-cols-[15px_auto] [&_.pros_.grid-container]:p-[5px] [&_.cons_.grid-container]:p-[5px] [&_.aspect-video_iframe]:mt-0 article-content [&_.truncated-text]:relative [&_.truncated-text]:max-h-[300px] [&_.truncated-text]:overflow-hidden [&_.truncated-text]:mb-6 [&_.truncated-text::before]:absolute [&_.truncated-text::before]:content-[""] [&_.truncated-text::before]:bottom-0 [&_.truncated-text::before]:w-full [&_.truncated-text::before]:h-[150px] [&_.truncated-text::before]:bg-gradient-to-t [&_.truncated-text::before]:from-white [&_.truncated-text::before]:from-50% [&_.truncated-text::before]:to-transparent [&_.truncated-text\_\_toggle]:absolute [&_.truncated-text\_\_toggle]:bottom-0 [&_.truncated-text\_\_toggle]:w-full [&_.truncated-text\_\_toggle]:text-center [&_.marketing-code]:bg-[#f0f1f2] [&_.marketing-code]:font-bold [&_.marketing-code]:p-1 [&_.marketing-code.marketing-code--block]:p-4 [&_.marketing-code--block]:block [&_.marketing-code--block]:max-w-full [&_.marketing-code--block]:overflow-x-scroll [&_.marketing-code--block]:mb-5 [&_.partners-signup]:mt-6 [&_.partners-signup]:mb-12 [&_.partners-signup]:bg-gray-200 [&_.partners-signup]:p-3 [&_.partners-signup]:md:p-6 [&_.table]:block [&_.table]:overflow-x-scroll [&_.table]:max-w-full" itemProp="articleBody"><div class="hidden leadpage-container leadpage__image leadpage__content marketing-button hide--mobile block--bordered"></div><div><img src="//cdn.shopify.com/s/files/1/0533/2089/files/Shopify-liquid.jpg?v=1585598279" alt="Shopify liquid" href="https://cdn.shopify.com/s/files/1/0533/2089/files/Shopify-liquid.jpg?v=1585598279"> <p>If you are new to the Shopify platform and read through our content, you might be wondering what all the references to Liquid actually refer to. In this article, we'll explain all you need to know about Liquid, how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates. Let's begin with a little history.</p> <p>Liquid was developed by Shopify co-founder and CEO Tobias Lütke and is now available as an <a href="https://github.com/Shopify/liquid" rel="nofollow noopener noreferrer" target="_blank">open source project on GitHub</a>. Today, it's used in many different software projects, from content management systems to static site generators—and of course, Shopify.</p> <h2>Liquid: language or engine?</h2> <p>Some refer to Liquid as a template language, while others may call it a template engine. It doesn't really matter which label you apply—in many ways both are right. Personally, I like to call it a template language. It has a syntax (like traditional programming languages), has concepts such as output, logic, and loops, and it interacts with variables (data), just as you would with a web-centric language such as PHP.</p> <p>However, that's really where the similarities end. There's a lot you can't do with Liquid—by design. For example, it has no concept of "state," it doesn't let you get deep under the covers of the platform, and can occasionally seem counter intuitive for seasoned coders. However, it has been very well thought out and what might at first seem like a limitation is usually intended, and for good reason.</p> <div class="marketing-block marketing-block--light marketing-block--padded border-t-2 px-8 py-10 my-12 [&_h2]:!mt-0 [&_h2]:mb-6 [&_h2]:text-t5 [&_h3]:!mt-0 [&_h3]:mb-6 [&_h3]:text-t7 [&_h4]:!mt-0 [&_h4]:mb-6 [&_h4]:text-t8 [&_img]:my-auto [&_p]:!mt-0 [&_p]:mb-6 [&_p]:text-body-sm [&_.heading--4]:text-t6 [&_.marketing-button]:text-white [&_.marketing-button]:no-underline border-partners-highlight" data-component-name="blog-cta-marketing"> <p class="heading--4">Explore Shopify Liquid Code Examples</p> <p>Visit our searchable library of Liquid code examples based around theme components. Learn how various Liquid objects, properties, and filters work together as part of components within a theme. Add them directly into themes to build and customize themes faster and more reliably.</p> <a class="marketing-button marketing-button--small" target="_blank" href="https://shopify.github.io/liquid-code-examples" rel="nofollow noopener noreferrer">Visit Shopify Liquid Code Examples</a> </div> <h2>Liquid's function</h2> <p>Liquid, like any template language, creates a bridge between an HTML file and a data store—in our context, the data is of course a Shopify store. It does this by allowing us to access variables from within a template, or Liquid file, with a simple to use and readable syntax.</p> <p>In Shopify, each Liquid file allows us to access certain variables without having to do any heavy lifting. For example, the <code class="marketing-code">product.liquid</code> template allows us access to all the details relating to the currently viewed product. Liquid, in turn, allows us to output this data without having to know anything about the actual product itself. These variables are known as template variables. You can also use Liquid to retrieve data that isn't made available to us. For example, you can ask Shopify to populate a variable you create with all the products in a particular collection.</p> <p>Once we know the names of the variables we have access to or create, we can use Liquid constructs such as "output" and "loops" to display the data in our Liquid files.</p> <p>The Shopify platform understands what data to retrieve, and how to display it depending on the Liquid code you have in your theme. It might be a simple case of displaying the name of a product or something slightly more complex, such as showcasing a series of product images.</p> <p>The great benefit of a template language such as Liquid is that you, as the designer, don't need to know anything about the store data itself. As such, your themes are 100 percent agnostic and can be applied to multiple stores without any knowledge of the stores content.</p> <p class="marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [&_h2]:!mt-0 [&_h2]:mb-6 [&_h2]:text-t5 [&_h3]:!mt-0 [&_h3]:mb-6 [&_h3]:text-t7 [&_h4]:!mt-0 [&_h4]:mb-6 [&_h4]:text-t8 [&_ul]:!mt-0 [&_ul]:mb-6 [&_ul:last-child]:mb-0 [&_ol]:!mt-0 [&_ol]:mb-6 [&_ol:last-child]:mb-0 [&_p]:!mt-0 [&_p]:mb-6 [&_p:last-child]:mb-0 border-partners-highlight"><strong>You might also like:</strong> <a target="_blank" href="/id/partners/blog/front-end-development-tools">The 8 Best Free Shopify Resources and Tools for Front-End Developers</a>.</p> <h2>Liquid's file extension and delimiters</h2> <p>Liquid files have the extension of <code class="marketing-code">.liquid</code>. A liquid file is a mix of standard HTML code and Liquid constructs. It's an easy to read syntax, and is easy to distinguish from HTML when working with a Liquid file. This is made even easier thanks to the use of two sets of delimiters.</p> <p>The double curly brace delimiters <code class="marketing-code">{{ }}</code> denote output, and the curly brace percentage delimiters <code class="marketing-code">{% %}</code> denote logic. You'll become very familiar with these as every Liquid construct begins with one or the other.</p> <p>Another way of thinking of delimiters is as "placeholders." A placeholder can be viewed as a piece of code that will ultimately be replaced by data when the compiled theme is sent to the browser. This data is determined entirely by the theme designer as a result of the Liquid code in the Liquid file. As such, Liquid themes, much like templates that inter splice PHP and HTML, serve as representations of what will be rendered.</p> <h3>Output</h3> <p>Let's examine the syntax for "output." As the name suggests, output in Liquid will literally output a piece of data from our store onto a page.</p> <p>Here's a quick example of an output placeholder that you will typically find in the <code class="marketing-code">product.liquid</code> file:</p> <pre><code class="marketing-code marketing-code--block"><h2>{{ product.title }}</h2> </code></pre> <p>When rendered, this would output the name of the currently viewed product in place of the <code class="marketing-code">{{ }}</code>, for example:</p> <pre><code class="marketing-code marketing-code--block"><h2>American Diner Mug</h2> </code></pre> <p>Output, unless manipulated with a filter (which we will look at shortly) is simply a case of replacing the entire placeholder with a text string from your store.</p> <div data-partners-signup="service_partner"></div> <h2>Objects and properties</h2> <p>This example also introduces us to the Liquid dot syntax. This is common in many template and server side languages. Taking our <code class="marketing-code">shop.name</code> example we can break it up into two parts.</p> <p>The first element preceding the <code class="marketing-code">.</code> is the object—in this case, it is the <code class="marketing-code">shop</code> object. This is a variable that represents all the data relating to the shop that we have defined in the Shopify admin. These data items include:</p> <ul> <li><code class="marketing-code">shop.address</code></li> <li><code class="marketing-code">shop.address.city</code></li> <li><code class="marketing-code">shop.address.country</code></li> <li><code class="marketing-code">shop.address.country_upper</code></li> <li><code class="marketing-code">shop.address.province</code></li> <li><code class="marketing-code">shop.address.province_code</code></li> <li><code class="marketing-code">shop.address.street</code></li> <li><code class="marketing-code">shop.address.summary</code></li> <li><code class="marketing-code">shop.address.zip</code></li> <li><code class="marketing-code">shop.collections_count</code></li> <li><code class="marketing-code">shop.currency</code></li> <li><code class="marketing-code">shop.description</code></li> <li><code class="marketing-code">shop.domain</code></li> <li><code class="marketing-code">shop.email</code></li> <li><code class="marketing-code">shop.enabled_currencies</code></li> <li><code class="marketing-code">shop.enabled_payment_types</code></li> <li><code class="marketing-code">shop.metafields</code></li> <li><code class="marketing-code">shop.money_format</code></li> <li><code class="marketing-code">shop.money_with_currency_format</code></li> <li><code class="marketing-code">shop.name</code></li> <li><code class="marketing-code">shop.password_message</code></li> <li><code class="marketing-code">shop.permanent_domain</code></li> <li><code class="marketing-code">shop.phone</code></li> <li><code class="marketing-code">shop.policies</code></li> <li><code class="marketing-code">shop.privacy_policy</code></li> <li><code class="marketing-code">shop.products_count</code></li> <li><code class="marketing-code">shop.published_locales</code></li> <li><code class="marketing-code">shop.refund_policy</code></li> <li><code class="marketing-code">shop.shipping_policy</code></li> <li><code class="marketing-code">shop.terms_of_service</code></li> <li><code class="marketing-code">shop.secure_url</code></li> <li><code class="marketing-code">shop.taxes_included</code></li> <li><code class="marketing-code">shop.types</code></li> <li><code class="marketing-code">shop.url</code></li> <li><code class="marketing-code">shop.vendors</code></li> </ul> <p>The items following the <code class="marketing-code">.</code> represent properties of the shop object. A property could be as simple as the name of the store (as per our example above) or it could be a list of items, such as the kinds of payment types enabled in the store.</p> <p class="marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [&_h2]:!mt-0 [&_h2]:mb-6 [&_h2]:text-t5 [&_h3]:!mt-0 [&_h3]:mb-6 [&_h3]:text-t7 [&_h4]:!mt-0 [&_h4]:mb-6 [&_h4]:text-t8 [&_ul]:!mt-0 [&_ul]:mb-6 [&_ul:last-child]:mb-0 [&_ol]:!mt-0 [&_ol]:mb-6 [&_ol:last-child]:mb-0 [&_p]:!mt-0 [&_p]:mb-6 [&_p:last-child]:mb-0 border-partners-highlight"><strong>You might also like:</strong> <a target="_blank" href="/id/partners/blog/the-ultimate-list-of-resources-for-shopify-theme-developers">The Essential List of Resources for Shopify Theme Development</a>.</p> <h2>Collection properties</h2> <p>You will notice from the list above that a number of the properties are plural, e.g:</p> <ul> <li><code class="marketing-code">shop.enabled_payment_types</code></li> <li><code class="marketing-code">shop.metafields</code></li> <li><code class="marketing-code">shop.types</code></li> </ul> <p>These properties represent Liquid collections. Instead of returning a string of data such as the name of the shop they will return an array of data — in other words, a list of items we can access via a Liquid loop.</p> <p>When first using Shopify and Liquid, it's easy to get confused by collections—I certainly did. I will therefore refer to "product collections" and "Liquid collections." The former being a logical grouping of products defined in the Shopify Admin, and the latter being a list of items we can access in Liquid code.</p> <p>Finally, it's worth saying that each one of the list items in our Liquid collection can also have properties. A good example of this is <code class="marketing-code">product.images</code>. This represents a list of all the images that have been added to a particular product.</p> <p>Each of the images in the list has multiple properties associated with it:</p> <ul> <li><code class="marketing-code">image.alt</code></li> <li><code class="marketing-code">image.aspect_ratio</code></li> <li><code class="marketing-code">image.attached_to_variant?</code></li> <li><code class="marketing-code">image.height</code></li> <li><code class="marketing-code">image.id</code></li> <li><code class="marketing-code">image.media_type</code></li> <li><code class="marketing-code">image.position</code></li> <li><code class="marketing-code">image.preview_image</code></li> <li><code class="marketing-code">image.product_id</code></li> <li><code class="marketing-code">image.src</code></li> <li><code class="marketing-code">image.variants</code></li> <li><code class="marketing-code">image.width</code></li> </ul> <p>In order to access these properties, we have to use a Liquid loop.</p> <h2>Liquid loops</h2> <p>Loops are used extensively in Shopify themes, and are thankfully very easy to understand. If you have done any form of basic programming, the concept of loops will likely be very familiar to you.</p> <p>Using a loop, often known as a <code class="marketing-code">for loop</code>, allows us to output the same piece of code a known number of times in our Liquid file. As mentioned above, a typical example would be to output all the images associated with a product.</p> <p>Let's have a look at an example using the <code class="marketing-code">product.images</code> Liquid collection I discussed earlier.</p> <p>Our aim with this loop is to output all of the images for a particular product. Here's a very simplistic loop that will output each image inline:</p> <pre><code class="marketing-code marketing-code--block">{% for image in product.images %}<br> <img src="{{ image | img_url: '300x300' }}"><br>{% endfor %}</code></pre> <p>Let's break it down into steps to fully understand it.</p> <h3>Step 1</h3> <pre><code class="marketing-code marketing-code--block">{% for image in product.images %} </code></pre> <p>The first line introduces us to the second style of delimiter, the curly brace percentage syntax <code class="marketing-code">{% %}</code>. Here, we are using a Liquid <code class="marketing-code">for</code> loop. Loops work with Liquid collections, and allow us to iterate over each item in our list in turn. If the product we are currently viewing had six images associated with it, our <code class="marketing-code">for</code> loop would loop six times, if it had 10 then it would loop 10 times, and so on. Only once every list item has been looked at (or unless we instruct it otherwise), will the next part of the page be considered.</p> <p>It's worth noting that unless we specifically ask how big our loop will be, we don't know how many loops will occur—only that Liquid will go through every item in our list, in turn. The loop will finish after the last iteration, and it's at this point that the page will carry on with its processing.</p> <p>In order to access the properties of each list item, we designate a variable to represent the current item in the loop. In our example above it is <code class="marketing-code">image</code>. While this is an obvious choice, and will help other designers understand your logic in the future, it can literally be anything. For example, we could use <code class="marketing-code">alltheimagesintheworld</code>, in which case it would look as follows:</p> <pre><code class="marketing-code marketing-code--block">{% for alltheimagesintheworld in product.images %} </code></pre> <p>This is of course a silly example to make a point—image makes much more sense, but I just wanted to emphasize the fact that this variable has no relation to the Liquid collection.</p> <h3>Step 2</h3> <pre><code class="marketing-code marketing-code--block"><img src="{{ image | img_url: '300x300' }}" /></code></pre> <p>The second line of our code example consists of part HTML and part Liquid. You'll also notice that the <code class="marketing-code">src</code> attribute is populated with a Liquid output tag.</p> <p>This introduces us to the concept of filters which are denoted by the <code class="marketing-code">|</code> (pipe) character—we'll look at these in more detail shortly. In our example, the filter is taking the image variable (the current item in our loop) and is specifying the dimensions, in pixels, the image should be displayed. </p> <p>We'll look at filters, denoted by the | character, next, but suffice to say that the parameters we define will populate the <code class="marketing-code">src</code> attribute with a fully qualified URL to the current image in our list. The filter does all the work of creating the <code class="marketing-code">src</code> attribute for us.</p> <h3>Step 3</h3> <pre><code class="marketing-code marketing-code--block">{% endfor %} </code></pre> <p>The final line of our example is our closing <code class="marketing-code">endfor</code> statement. This tells the template to carry on after all the loops have been executed.</p> <p>If we had three images in our <code class="marketing-code">product.images</code> object, the final output would look something like this:</p> <pre><code class="marketing-code marketing-code--block"><img src="//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-clay-pot_300x300.jpg" alt="plant-in-clay-pot" /><br><img src="//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-green-pot_300x300.jpg" alt="plant-in-green-pot" /><br><img src="//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-white-pot_300x300.jpg" alt="plant-in-white-pot" /> </code></pre> <p>Loops are really useful and something you will encounter daily in your theme development. Outputting images and product variants are two commonly found examples.</p> <p class="marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [&_h2]:!mt-0 [&_h2]:mb-6 [&_h2]:text-t5 [&_h3]:!mt-0 [&_h3]:mb-6 [&_h3]:text-t7 [&_h4]:!mt-0 [&_h4]:mb-6 [&_h4]:text-t8 [&_ul]:!mt-0 [&_ul]:mb-6 [&_ul:last-child]:mb-0 [&_ol]:!mt-0 [&_ol]:mb-6 [&_ol:last-child]:mb-0 [&_p]:!mt-0 [&_p]:mb-6 [&_p:last-child]:mb-0 border-partners-highlight"><strong>You might also like:</strong> <a target="_blank" href="/id/partners/blog/shopify-mobile-logos">How to Use Shopify Theme Settings to Create Mobile-Specific Logos</a>.</p> <h3>Liquid filters</h3> <p>Another very powerful feature of Liquid are output filters, which I used in the code example above. Filters serve three main purposes:</p> <ul> <li>They manipulate output data in some way</li> <li>They allow our themes to be agnostic</li> <li>They save theme designers time by reducing the amount of code we need to write</li> </ul> <p>Filters are always used in conjunction with a Liquid output. Let's have a look at some filters starting with the <code class="marketing-code">date</code> filter.</p> <p>When outputting a blog post, you'll likely want to let the reader know when it was published:</p> <pre><code class="marketing-code marketing-code--block"><p class="date-time">{{ article.published_at | date: '%d %B %Y' }}</p> </code></pre> <p>As before you'll notice the <code class="marketing-code">|</code> character (often referred to as a pipe) in the middle of the output tag. On the left side of the pipe, we have the <code class="marketing-code">article</code> object with its associated <code class="marketing-code">published_at</code> property, and on the right we have the <code class="marketing-code">date</code> filter with an argument to denote the date format—in this case <code class="marketing-code">'%d %B %Y'</code>.</p> <p>Without the filter, Shopify would simply output the date the blog article was published at in the format it is stored in the database—which may not be humanly readable. However, by adding in the <code class="marketing-code">|</code> and including the <code class="marketing-code">date</code> filter, we can manipulate the format so it outputs in a format we want.</p> <p>Put simply, filters allow us to take a piece of data from our store and change it. What we start with on the left hand side gets "piped" through our filter and emerges on the right hand sized changed. It's this final manipulated data that is then output on the front end of the theme.</p> <p>Here's another example:</p> <pre><code class="marketing-code marketing-code--block">{{ 'style.css' | asset_url | stylesheet_tag }} </code></pre> <p>Here we are using two filters with the ultimate aim of creating a fully formed style element in a layout file.</p> <p>We start on the left with the name of the our CSS file, which resides in the assets folder. Next we apply our first filter—in this case the <code class="marketing-code">asset_url</code> filter. This is an incredibly useful filter and one you'll use a lot. </p> <p>I mentioned before how Shopify themes, thanks to Liquid, are agnostic. They don't need to have any knowledge of the store they are working against and the same theme can be applied to multiple stores. However, this can cause issues when trying to reference assets as we need a way of knowing where a certain asset (image, JS file, CSS file) is on the network.</p> <p>Thankfully the <code class="marketing-code">asset_url</code> comes to our rescue. By using this filter, Shopify will return the fully qualified path to the assets folder for the theme and append the name of our asset at the end. Just remember it won't actually check that the file exists—it's up to us to ensure that the first part of the tag, in our case <code class="marketing-code">style.css</code> is in the assets folder.</p> <p>Here's how that might look when output:</p> <pre><code class="marketing-code marketing-code--block">//cdn.shopify.com/s/files/1/0222/9076/assets/style.css </code></pre> <p>The final filter in the chain, <code class="marketing-code">stylesheet_tag</code>, takes the URL and wraps it in a style element which is then output in our layout file. Here's the final result:</p> <pre><code class="marketing-code marketing-code--block"><link href= "//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/style.css" rel="stylesheet" type="text/css" media="all" /> </code></pre> <p>There are many really useful filters, here are just a few you'll find yourself using:</p> <ul> <li><code class="marketing-code">asset_url</code></li> <li><code class="marketing-code">stylesheet_tag</code></li> <li><code class="marketing-code">script_tag</code></li> <li><code class="marketing-code">date</code></li> <li><code class="marketing-code">pluralize</code></li> <li><code class="marketing-code">replace</code></li> <li><code class="marketing-code">handle</code></li> <li><code class="marketing-code">money</code></li> <li><code class="marketing-code">money_with_currency</code></li> <li><code class="marketing-code">img_url</code></li> <li><code class="marketing-code">link_to</code></li> </ul> <h2>Liquid logic</h2> <p>The final aspect of Liquid we need to look at is logic. Here's an example:</p> <pre><code class="marketing-code marketing-code--block">{% if product.available %}<br> <h2>Price: £99.99</h2><br>{% else %}<br> <h2 class="sold-out">Sorry - sold out</h2><br>{% endif %} </code></pre> <p>In this snippet, we are controlling the output to our liquid file using a simple <code class="marketing-code">if</code>, <code class="marketing-code">else</code>, <code class="marketing-code">endif</code> statement. In many ways, <code class="marketing-code">if</code> statements are like questions. Depending on the answer to the question a different piece of markup will be output—or in some cases no markup at all.</p> <p>In the above example, if the answer to our <code class="marketing-code">if</code> statement question is true (<code class="marketing-code">product.available</code> returns true or false), we render the words "This product is available." If it's false, our Liquid file carries on and outputs the text following our <code class="marketing-code">{% else %}</code> clause—in this case "Sorry, this product is sold out."</p> <p>Another way of looking at logic is that it allows us to control the flow of a page and ultimately make decisions on which data is displayed. It's worth noting that unlike output tags, the inclusion of logic tags in your Liquid files does not result in anything being directly rendered—rather they allow us to control exactly what is rendered.</p> <p>You will find yourself using <code class="marketing-code">if</code> statements a lot in Shopify theme development. Here's another example:</p> <pre><code class="marketing-code marketing-code--block">{% if cart.item_count > 0 %}<br> <p>You have {{ cart.item_count }} item(s) in your cart</p><br>{% else %}<br> <p>There's nothing in your cart :( Why not have a <a href= "/products"> look at our product range</a></p><br>{% endif %} </code></pre> <p>This snippet demonstrates how you can either display the number of items in a visitor’s cart or output a link to your products.</p> <h2>Operators</h2> <p>You'll notice in this example we are using the greater than <code class="marketing-code">></code> operator. As the <code class="marketing-code">cart.item_count</code> variable returns the number of items in the current users cart, we can check to see if it is greater than zero, i.e. it has items in it.</p> <p>If this returns <code class="marketing-code">true</code> we can output the message with the current item count, if not we can output:</p> <pre><code class="marketing-code marketing-code--block"><p>There's nothing in your cart :( Why not have a <a href= "/products">look at our product range</a></p> instead. </code></pre> <p>We could actually refactor our example with a filter. By using the pluralize filter we can output "item" or "items" depending on the number of items in the cart. The bonus here is that we don't have to know the count in order for Shopify to output the right designation:</p> <pre><code class="marketing-code marketing-code--block">{% if cart.item_count > 0 %}<br> <p>You have {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} in your cart</p><br>{% else %}<br> <p>There's nothing in your cart :( Why not have a <a href= "/products">look at our product range</a></p><br>{% endif %} </code></pre> <p>You'll notice that the refactored example now includes the <code class="marketing-code">pluralize</code> filter which takes two parameters. The first is the singular word and the second the plural.</p> <p>While we have used the <code class="marketing-code">></code> operator in the above example, there are a wide range of <a href="https://help.shopify.com/en/themes/liquid/basics/operators">comparison operators</a> in Liquid including:</p> <ul> <li> <code class="marketing-code">==</code> equal to</li> <li> <code class="marketing-code">!=</code> not equal to</li> <li> <code class="marketing-code">></code> greater than</li> <li> <code class="marketing-code"><</code> less than</li> <li> <code class="marketing-code">>=</code> bigger or equal</li> <li> <code class="marketing-code"><=</code> less or equal</li> <li> <code class="marketing-code">or</code> this or that</li> <li> <code class="marketing-code">and</code> must be this and that</li> <li> <code class="marketing-code">contains</code> includes the substring if used on a string, or element if used on an array</li> </ul> <p>By default, even if your Liquid code doesn’t have output, Liquid in a template will still render an empty line in the final HTML. Whitespace control in Liquid enables you to remove this. By using a hyphen in your tag syntax, <code class="marketing-code">{{-</code> , <code class="marketing-code">-}}</code> , <code class="marketing-code">{%-</code> , and <code class="marketing-code">-%}</code>, you can strip whitespace from the left or right side of a rendered tag.</p> <h2>Liquid cheat sheet</h2> <p>If you are anything like me, you'll have a hard time committing all these Liquid filters, operators, and structures to memory. Thankfully, the <a href="/partners/shopify-cheat-sheet">Shopify Liquid Cheat Sheet</a> is available to search all the Liquid objects, tags, and filters, view simple examples, and visit the reference documentation. It's an indispensable resource, which I strongly encourage you to bookmark and become familiar with.</p> <h2>Liquid code examples</h2> <p>Very often we learn through example, so seeing how to implement popular theme components is a great way to learn about how Shopify themes work. The <a href="https://shopify.github.io/liquid-code-examples" rel="nofollow noopener noreferrer" target="_blank">Shopify Liquid Code Examples</a> is a library of theme components that help to inform how various Liquid objects, properties, and filters work together as part of elements within a store.</p> <h2>Summary</h2> <p>We've covered a lot of ground in this article, but hopefully it has given you a solid introduction to Liquid. Here's a reminder of what we covered:</p> <ul> <li>Liquid is a template language that allows us to display data in a template</li> <li>Liquid has constructs such as output, logic, loops and deals with variables</li> <li>Liquid files are a mixture of HTML and Liquid code, and have the <code class="marketing-code">.liquid</code> file extension</li> <li>Liquid files used in a Shopify theme are agnostic and have no concept of the store they are currently being used in</li> <li>The two types of delimiters used in Liquid</li> <li>How to output data from a store in a Liquid file</li> <li>How to manipulate data with filters</li> <li>How to loop over a Liquid collection to output multiple items</li> <li>The use of logic in a Liquid file</li> <li>The different types of operators used for comparison</li> <li>How to control whitespace in Liquid</li> </ul> <p>Want to learn more about building themes for Shopify or your clients? You can learn more about Liquid concepts and how to use it in your own theme development in the <a href="https://help.shopify.com/themes/liquid">Shopify docs</a>. </p> <div data-partners-signup="service_partner"></div> <p> </p><div id=":R0:" data-component-name="blog-read-more" class="marketing-block marketing-block--light marketing-block--padded text-body-sm text-left my-8 tablet:my-16 p-8 bg-marketingBg border-t-2 [&_h2]:text-t5 border-partners-highlight"><h2 class="!mt-0 mb-6 font-aktivgroteskextended">Read more</h2><ul class="!mt-0 !mb-0"><li class="mt-2"><a href="/id/partners/blog/how-to-build-a-shopify-app">How to Build a Shopify App: The Complete Guide</a></li><li class="mt-2"><a href="/id/partners/blog/shopify-online-store">Introducing Online Store 2.0: What it Means For Developers</a></li><li class="mt-2"><a href="/id/partners/blog/landing-page">How to Use Liquid to Create Custom Landing Page Templates</a></li><li class="mt-2"><a href="/id/partners/blog/front-end-app">How to Build a Shopify App as a Front End Developer</a></li><li class="mt-2"><a href="/id/partners/blog/28500611-using-javascript-to-super-power-your-clients-shopify-site">Using JavaScript To Super Power Your Client's Shopify Site</a></li><li class="mt-2"><a href="/id/partners/blog/introduction-to-shopify-theming-for-wordpress-theme-developers">Introduction to Shopify Theming for WordPress Theme Developers</a></li><li class="mt-2"><a href="/id/partners/blog/best-free-themes">Top Tips for Building Themes That Are Fully Featured, Like Customizing Shopify’s Best Free Themes</a></li><li class="mt-2"><a href="/id/partners/blog/liquid-objects">How the Routes and Page_Image Liquid Objects Can Help You Build More Robust Themes</a></li></ul></div></div></div><div class="border-t tablet-xl:border-[#d4d4d8] my-16 py-6 flex tablet-xl:flex-row justify-between flex-col"><div class="flex items-center tablet-xl:justify-start tablet-xl:flex-row flex-row-reverse justify-between"><div class="self-center flex flex-col"><div class="gap-x-1 flex flex-wrap text-lg font-aktivgroteskextended leading-[18px] font-bold mb-2"> <!-- -->by <span itemProp="author" itemscope="" itemType="https://schema.org/Person"><span itemProp="name">Keir Whitaker</span></span></div><div class="text-body-sm text-shade-50">Last updated<!-- --> <time>30 Jan 2020</time></div></div></div><div class="xs:border-b tablet-xl:border-0 pb-4"><div class="font-bold text-xs font-aktivgroteskextended uppercase mt-4 tablet-xl:mt-0 tablet-xl:text-right">Share article</div><ul id=":R1bj95n5:" class="flex gap-4 mt-4" data-component-name="social"><li><a class="block h-9 w-9 fill-black hover:fill-shade-7" aria-describedby="blog-social-icon-facebook-:R1bj95n5:" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.shopify.com%2Fid%2Fpartners%2Fblog%2F115244038-an-overview-of-liquid-shopifys-templating-language" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-facebook" aria-label="External source: Facebook (Opens in a new window)"><svg viewBox="0 0 30 30"><path d="M15.6 30V19.4h5V15h-5v-3.1c0-1 .6-1.9 1.3-1.9h3.8V5.6h-3.8c-3.1 0-5.6 2.8-5.6 6.3V15H7.5v4.4h3.8v10.1C4.8 27.9 0 22 0 15 0 6.7 6.7 0 15 0s15 6.7 15 15c0 8.1-6.4 14.7-14.4 15z"></path></svg><span id="blog-social-icon-facebook-:R1bj95n5:" class="sr-only">Facebook</span></a></li><li><a class="block h-9 w-9 fill-black hover:fill-shade-7" aria-describedby="blog-social-icon-twitter-:R1bj95n5:" href="https://twitter.com/intent/tweet?text=An+Overview+of+Liquid:+Shopify's+Templating+Language&url=https%3A%2F%2Fwww.shopify.com%2Fid%2Fpartners%2Fblog%2F115244038-an-overview-of-liquid-shopifys-templating-language&via=Shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-twitter" aria-label="External source: Twitter (Opens in a new window)"><svg viewBox="0 0 19 19"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.5C19 14.7467 14.7467 19 9.5 19C4.25329 19 0 14.7467 0 9.5C0 4.25329 4.25329 0 9.5 0C14.7467 0 19 4.25329 19 9.5ZM8.18721 10.0675L3.64633 3.99603H7.14609L10.123 7.97639L13.8073 3.99603H14.8358L10.5825 8.59099L15.379 15.0039H11.8792L8.64689 10.6819L4.6462 15.0039H3.61771L8.18721 10.0675ZM6.76655 4.75353H5.15877L12.2586 14.2464H13.8663L6.76655 4.75353Z"></path></svg><span id="blog-social-icon-twitter-:R1bj95n5:" class="sr-only">Twitter</span></a></li><li><a class="block h-9 w-9 fill-black hover:fill-shade-7" aria-describedby="blog-social-icon-linkedin-:R1bj95n5:" href="https://www.linkedin.com/shareArticle?mini=true&source=Shopify&title=An+Overview+of+Liquid:+Shopify's+Templating+Language&url=https%3A%2F%2Fwww.shopify.com%2Fid%2Fpartners%2Fblog%2F115244038-an-overview-of-liquid-shopifys-templating-language" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-linkedin" aria-label="External source: LinkedIn (Opens in a new window)"><svg viewBox="0 0 30 30"><path d="M30 15c0 8.3-6.7 15-15 15S0 23.3 0 15 6.7 0 15 0s15 6.7 15 15zM11.3 7.8c0-1.2-1-2.2-2.5-2.2s-2.5.9-2.5 2.2c0 1.2 1 2.2 2.5 2.2s2.5-1 2.5-2.2zm-.7 4.1H6.9v10.6h3.8V11.9zm13.8 5c0-3.4-1.7-5.6-4.4-5.6-1.5 0-2.6.9-3.1 2.3l-.1-1.6H13c0 .4.1 2.5.1 2.5v8.1h3.8V17c0-1.5.7-2.5 1.8-2.5s1.9.6 1.9 2.5v5.6h3.8v-5.7z"></path></svg><span id="blog-social-icon-linkedin-:R1bj95n5:" class="sr-only">LinkedIn</span></a></li></ul></div></div></div><div class="col-span-4 xs:col-span-12 lg:col-span-3 col-start-1 hidden lg:block relative" data-component-name="blog-right-sidebar"><div class="tablet-xl:pt-10 desktop:pt-16 pb-6 absolute h-full max-h-full tot-0 left-0"><div class="h-full overflow-hidden" id="blog-side-banners-col"><div class="gap-x-1 flex flex-wrap font-bold text-lg text-legacy-gray-90 !font-shopifysans"> <!-- -->by <span itemProp="author" itemscope="" itemType="https://schema.org/Person"><span itemProp="name">Keir Whitaker</span></span></div><div class="text-body-sm text-shade-50">Last updated<!-- --> <time>30 Jan 2020</time></div><div id="blog-side-banners"><div class="mt-[640px] border-t border-shade-30 pt-6 hidden" data-priority="2" data-component-name="blog-CTA-sidebar-email"><p class="richtext text-xl mb-2 font-aktivgroteskextended">Let’s grow your digital business</p><p class="richtext text-sm mb-4">Get design inspiration, development tips, and practical takeaways delivered straight to your inbox.</p><form method="post" action="/id/blog/api/subscribe"><div id=":R36r95n5:" data-component-name="waitlist-form-input-wrapper" class="[&_input]:rounded-full [&_input]:border-shade-3 [&_input]:mb-1 [&_input]:pl-4 [&_input]:border-solid [&_input]:border [&_input]:border-shade-30 [&_input]:text-xs tablet-xl:[&_input]:text-base [&_div]:text-xs tablet-xl:[&_div]:text-base [&_button]:bg-black [&_button]:text-white [&_button]:h-14 [&_button]:text-lg [&_button]:text-lg [&_button]:hover:bg-[#3f3f46] [&_button]:active:bg-[#71717a]"><label for="email-input-:R36r95n5H1:" class="sr-only">Enter email</label><input id="email-input-:R36r95n5H1:" class="text-shade-70 h-14 w-full bg-transparent outline-none placeholder:text-black placeholder:font-normal" type="email" spellcheck="false" autoComplete="email" name="email" placeholder="Enter email"/><input type="hidden" name="subscriptionId" value="DE84EF61-2A02-4778-8807-F01B108DE974"/><input type="hidden" name="signup_page" value="/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"/><input type="hidden" name="locale" value="en-ID"/><input type="hidden" name="blogHandle" value="partners"/><input type="hidden" name="form_type" value="subscribe"/><div class="hidden sm:block"><button type="submit" class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none" data-component-name="join-waitlist-form-button">Get updates</button></div></div><div class="block w-full sm:hidden"><button type="submit" class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none" data-component-name="join-waitlist-form-button">Get updates</button></div><input class="sr-only" id=":R1pb6r95n5:" name="address" aria-label="address"/></form><p class="richtext text-xs mt-2 text-shade-60">No charge. Unsubscribe anytime.</p></div><div class="font-aktivgroteskextended mt-[640px]" data-priority="0"><p class="richtext text-base uppercase mb-6">popular posts</p><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/web-design-tools-and-resources" data-component-name="blog-popular-post-Web Design Tools and Resources">Web Design Tools and Resources</a></span><a href="/id/partners/blog/93130630-10-beautiful-ecommerce-website-color-schemes" data-component-name="blog-popular-post-93130630-10-beautiful-ecommerce-website-color-schemes"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">10 Beautiful Ecommerce Website Color Schemes</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/shopify-app-development" data-component-name="blog-popular-post-Shopify App Development">Shopify App Development</a></span><a href="/id/partners/blog/how-to-build-a-shopify-app" data-component-name="blog-popular-post-how-to-build-a-shopify-app"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">How to Build a Shopify App: The Complete Guide </span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/web-design-tools-and-resources" data-component-name="blog-popular-post-Web Design Tools and Resources">Web Design Tools and Resources</a></span><a href="/id/partners/blog/79940998-15-funny-lorem-ipsum-generators-to-shake-up-your-design-mockups" data-component-name="blog-popular-post-79940998-15-funny-lorem-ipsum-generators-to-shake-up-your-design-mockups"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">15 Funny Lorem Ipsum Generators to Shake Up Your Design Mockups</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/inspiration-creativity" data-component-name="blog-popular-post-Inspiration & Creativity">Inspiration & Creativity</a></span><a href="/id/partners/blog/web-design-portfolio-inspiration" data-component-name="blog-popular-post-web-design-portfolio-inspiration"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">20 Memorable Web Design Portfolio Examples to Inspire Your Own Website</span></a></span></div><div class="font-aktivgroteskextended mt-[640px]" data-priority="0"><p class="richtext text-base uppercase mb-6">popular posts</p><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/web-design" data-component-name="blog-popular-post-Web Design">Web Design</a></span><a href="/id/partners/blog/inclusive-design" data-component-name="blog-popular-post-inclusive-design"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">Inclusive Design: 12 Ways to Design for Everyone</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/learning-liquid" data-component-name="blog-popular-post-Learning Liquid">Learning Liquid</a></span><a href="/id/partners/blog/img-url-filter" data-component-name="blog-popular-post-img-url-filter"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">How to Manipulate Images with the img_url Filter</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/shopify-news" data-component-name="blog-popular-post-Shopify News">Shopify News</a></span><a href="/id/partners/blog/shopify-marketplace-kit" data-component-name="blog-popular-post-shopify-marketplace-kit"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">Create a Marketplace in Less than 8 Minutes with Shopify’s Marketplace Kit</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-link-light-hover"><a href="/id/partners/blog/topics/shopify-news" data-component-name="blog-popular-post-Shopify News">Shopify News</a></span><a href="/id/partners/blog/shopify-online-store" data-component-name="blog-popular-post-shopify-online-store"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal">Introducing Online Store 2.0: What it Means For Developers</span></a></span></div></div></div></div></div></div><div itemProp="publisher" itemscope="" itemType="https://schema.org/Organization"><meta itemProp="name" content="Shopify"/><div itemProp="logo" itemscope="" itemType="https://schema.org/ImageObject"><meta itemProp="url" content="https://cdn.shopify.com/assets/images/logos/shopify_logo_black.png"/><meta itemProp="width" content="210"/><meta itemProp="height" content="60"/></div></div></article><div class="py-10 tablet-xl:py-16 overflow-hidden lg:hidden tablet-xl:pt-0 pt-0 [&_h5]:uppercase [&_.popular-posts]:border-t-2"><div class="container"><div class="flex justify-between items-center mb-9"><h5 class="richtext tracking-[-.02em] blog-section-header text-[26px] leading-[30px] tablet:text-[24px] tablet:leading-[32px] font-bold tablet:font-medium">popular posts</h5></div></div><div class="container max-lg:!mr-0"><div class="flex justify-start flex-nowrap max-w-full overflow-x-auto snap-x snap-mandatory gap-x-gutter pr-[var(--margin)] lg:flex-wrap lg:justify-center lg:overflow-hidden lg:gap-y-gutter lg:mb-gutter lg:mx-auto lg:py-4 lg:pr-0"><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/web-design-tools-and-resources" class="no-underline">Web Design Tools and Resources</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/93130630-10-beautiful-ecommerce-website-color-schemes" rel="" target="_self">10 Beautiful Ecommerce Website Color Schemes</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2019-08-20</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/shopify-app-development" class="no-underline">Shopify App Development</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/how-to-build-a-shopify-app" rel="" target="_self">How to Build a Shopify App: The Complete Guide </a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2021-02-24</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/web-design-tools-and-resources" class="no-underline">Web Design Tools and Resources</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/79940998-15-funny-lorem-ipsum-generators-to-shake-up-your-design-mockups" rel="" target="_self">15 Funny Lorem Ipsum Generators to Shake Up Your Design Mockups</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2019-04-17</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/inspiration-creativity" class="no-underline">Inspiration & Creativity</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/web-design-portfolio-inspiration" rel="" target="_self">20 Memorable Web Design Portfolio Examples to Inspire Your Own Website</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2019-05-01</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/web-design" class="no-underline">Web Design</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/inclusive-design" rel="" target="_self">Inclusive Design: 12 Ways to Design for Everyone</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2018-03-23</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/learning-liquid" class="no-underline">Learning Liquid</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/img-url-filter" rel="" target="_self">How to Manipulate Images with the img_url Filter</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2018-01-04</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/shopify-news" class="no-underline">Shopify News</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/shopify-marketplace-kit" rel="" target="_self">Create a Marketplace in Less than 8 Minutes with Shopify’s Marketplace Kit</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2022-05-13</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/id/partners/blog/topics/shopify-news" class="no-underline">Shopify News</a></div><div class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl"><a class="tracking-[-.02em] font-normal pb-4 hover:underline font-aktivgroteskextended text-shade-100 text-base desktop:text-xl" href="/id/partners/blog/shopify-online-store" rel="" target="_self">Introducing Online Store 2.0: What it Means For Developers</a></div><p class="richtext text-body-sm font-shopifysans font-normal text-shade-60">2021-01-29</p></div></article></div></div><div class="mobile-indicators mt-6 flex justify-center gap-x-2 lg:hidden"><div class="rounded-full box-content w-2 h-2 bg-black w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2"></div></div></div></div><div class="grid md:grid-cols-2"><div class="relative overflow-hidden"><img class="h-full w-full object-cover absolute top-0 left-0 bottom-0" src="https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040" alt="subscription banner" loading="lazy" decoding="async" width="1420" height="1040" srcSet="https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=200 200w, https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=400 400w, https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=600 600w, https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=800 800w, https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=1000 1000w, https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=1200 1200w, https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420&originalHeight=1040&width=1400 1400w"/></div><div class="flex bg-black"><div class="text-left desktop:mx-10 self-center py-16 md:py-28 mx-10 md:mx-0 md:px-4 desktop:px-8"><div class="text-left text-section-dark-text [&_span]:font-aktivgroteskextended [&_span]:text-left tablet-xl:[&_span]:text-[40px] [&_span]:leading-[48px] [&_span]:font-medium [&_span]:tracking-normal [&_p]:text-white [&_p]:text-left [&_p]:text-lg [&_p]:leading-[26px] [&_p]:font-normal [&_p]:tracking-tight [&_p]:pb-6" data-mode="dark" data-component-name="heading-group"><span class="richtext text-t2">Let’s grow your digital business</span><p class="richtext text-body-lg pt-sm">Get design inspiration, development tips, and practical takeaways delivered straight to your inbox.</p></div><div class="[&_p]:text-left [&_p]:text-xs [&_p]:leading-[18px] [&_p]:pt-xs [&_button]:mt-[3px]" data-mode="dark" data-center="false"><form method="post" action="/id/blog/api/subscribe" class="flex w-full flex-col justify-center sm:w-[406px] [&_button]:bg-[#7BE986] items-start text-white"><div id=":Ruh5n5:" data-component-name="waitlist-form-input-wrapper" class="box-border flex h-14 w-full justify-between rounded-full border border-shades-60 border-[#52525B] pl-6 pr-1 items-start text-white bg-white"><label for="email-input-:Ruh5n5H1:" class="sr-only">Email here</label><input id="email-input-:Ruh5n5H1:" class="text-shade-70 h-14 w-full bg-transparent outline-none placeholder:text-black placeholder:font-normal" type="email" spellcheck="false" autoComplete="email" name="email" placeholder="Email here"/><input type="hidden" name="subscriptionId" value="DE84EF61-2A02-4778-8807-F01B108DE974"/><input type="hidden" name="signup_page" value="/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"/><input type="hidden" name="locale" value="en-ID"/><input type="hidden" name="blogHandle" value="partners"/><input type="hidden" name="form_type" value="subscribe"/><div class="hidden sm:block"><button type="submit" class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none" data-component-name="join-waitlist-form-button">Get updates</button></div></div><div class="block w-full sm:hidden"><button type="submit" class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none" data-component-name="join-waitlist-form-button">Get updates</button></div><input class="sr-only" id=":Reauh5n5:" name="address" aria-label="address"/></form><p class="richtext text-body-sm pt-sm sm:w-[406px] w-full items-left text-white">No charge. Unsubscribe anytime.</p></div></div></div></div></section><div class="relative overflow-hidden bg-partners-conversionBg bg-no-repeat tablet-xl:bg-partners-bottom-converion tablet-xl:bg-cover tablet-xl:bg-center bg-partners-bottom-converion-mobile bg-contain bg-left-bottom" data-component-name="cta-footer-banner"><div class="container relative flex flex-col items-center text-center py-[54px] tablet-xl:py-32"><span class="richtext normal-case font-light text-white font-sans text-[42px] tablet-xl:text-[64px] max-w-[800px] mb-9">Grow your business with the Shopify Partner Program</span><div data-component-name="button-group" class="text-base relative z-20 [&_a]:bg-partners-conversionButton [&_a]:text-partners-conversionButtonText [&_a]:font-ibmmono [&_a]:text-base [&_a]:font-medium [&_a]:hover:bg-[#62ba6b] [&_a]:hover:text-black [&_a]:px-5 [&_a]:py-[10px]" data-mode="light"><div class="flex gap-y-sm flex-wrap gap-x-sm justify-center"><a href="/id/partners" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline md:px-button-lg-px md:py-button-lg-py md:text-button-lg-size border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled" data-component-name="button" data-mode="light" target="">Join Today</a></div></div></div></div></main><div class="bg-black text-white"><div class="container"><div class="border-b border-[#151516] flex flex-col items-start md:flex-row pt-14 pb-4 md:pb-6"><a href="/id/about" class="text-base font-bold mb-4 md:mr-5">About</a><a href="/careers" class="text-base font-bold mb-4 md:mr-5">Careers</a><a href="https://www.shopify.com/news" class="text-base font-bold mb-4 md:mr-5">Press and Media</a><a href="/id/plus" class="text-base font-bold mb-4 md:mr-5">Shopify Plus</a><a href="/id/sitemap" class="text-base font-bold mb-4 md:mr-5">Sitemap</a></div></div><div class="border-b border-[#151516] pt-8 md:pt-5"><div class="container flex flex-row"><div class="md:flex md:flex-row md:mb-6 w-1/2 md:w-4/6"><div class="mb-16 md:mb-0 md:w-3/4"><div class="text-sm uppercase font-extrabold mb-4">Online Store</div><div class="md:columns-3"><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/online">Sell Online</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/examples">Examples</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/website/builder">Website Builder</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/tour">Online Retail</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/tour/ecommerce-website">Ecommerce Website</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/domains">Domain Names</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/tour/shopping-cart">Shopping Cart</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/tour/ecommerce-hosting">Ecommerce Hosting</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/mobile">Mobile Commerce</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/online-store">Online Store Builder</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/dropshipping">Dropshipping Business</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://themes.shopify.com/">Store Themes</a></div></div></div><div class="mb-16 md:mb-0 md:w-1/4"><div class="text-sm uppercase font-extrabold mb-4">Point of Sale</div><div class="columns-1"><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/pos">Point of Sale</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/pos/features">Features</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/pos/store">Hardware</a></div></div></div></div><div class="md:flex md:flex-row md:mb-6 w-1/2 md:w-2/6"><div class="mb-16 md:mb-0 md:w-1/2"><div class="text-sm uppercase font-extrabold mb-4">Support</div><div class="columns-1"><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://help.shopify.com/en/questions">24/7 support</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://help.shopify.com/en/">Shopify Help Center</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://community.shopify.com/c/Shopify-Community/ct-p/en?utm_campaign=footer&utm_content=en&utm_medium=web&utm_source=shopify">Shopify Community</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://shopify.dev/docs/api">API Documentation</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/tools">Free Tools</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/stock-photos">Free Stock Photos</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/tools/logo-maker">Logo Maker</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/tools/business-name-generator">Business Name Generator </a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/plus/commerce-trends">Research</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/legal">Legal</a></div></div></div><div class="mb-16 md:mb-0 md:w-1/2"><div class="text-sm uppercase font-extrabold mb-4">Shopify</div><div class="columns-1"><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/contact">Contact</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/partners">Partner Program</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/affiliates">Affiliate Program</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://shopify.dev/?shpxid=a8997906-5385-4535-23F8-D9928E4EE397">App Developers</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://shopifyinvestors.com/Home/default.aspx">Investors</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/blog/topics">Blog Topics</a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="https://community.shopify.com/c/events/eb-p/events_en/home?utm_campaign=homepage&utm_content=en&utm_medium=web&utm_source=shopify"></a></div><div class="mb-3 pr-4"><a class="text-sm text-[#B6BABF] hover:text-white" href="/id/fulfillment">Fulfillment</a></div></div></div></div></div></div><div class="container flex flex-col-reverse md:flex-row items-center justify-between pt-8 pb-16 md:py-10"><ul class="flex gap-4 md:gap-6 mt-5 md:mt-0" data-component-name="social"><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.facebook.com/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-facebook" aria-label="External source: Facebook (Opens in a new window)"><svg viewBox="0 0 30 30"><path d="M15.6 30V19.4h5V15h-5v-3.1c0-1 .6-1.9 1.3-1.9h3.8V5.6h-3.8c-3.1 0-5.6 2.8-5.6 6.3V15H7.5v4.4h3.8v10.1C4.8 27.9 0 22 0 15 0 6.7 6.7 0 15 0s15 6.7 15 15c0 8.1-6.4 14.7-14.4 15z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://twitter.com/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-twitter" aria-label="External source: Twitter (Opens in a new window)"><svg viewBox="0 0 19 19"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.5C19 14.7467 14.7467 19 9.5 19C4.25329 19 0 14.7467 0 9.5C0 4.25329 4.25329 0 9.5 0C14.7467 0 19 4.25329 19 9.5ZM8.18721 10.0675L3.64633 3.99603H7.14609L10.123 7.97639L13.8073 3.99603H14.8358L10.5825 8.59099L15.379 15.0039H11.8792L8.64689 10.6819L4.6462 15.0039H3.61771L8.18721 10.0675ZM6.76655 4.75353H5.15877L12.2586 14.2464H13.8663L6.76655 4.75353Z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.youtube.com/user/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-youtube" aria-label="External source: YouTube (Opens in a new window)"><svg viewBox="0 0 30 30"><path d="M30 15c0 8.3-6.7 15-15 15S0 23.3 0 15 6.7 0 15 0s15 6.7 15 15zm-5.6 0c0-6.9 0-6.9-9.4-6.9s-9.4 0-9.4 6.9 0 6.9 9.4 6.9 9.4 0 9.4-6.9zm-11.9-3.7 6.3 3.8-6.3 3.8v-7.6z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.instagram.com/shopify/" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-instagram" aria-label="External source: Instagram (Opens in a new window)"><svg viewBox="0 0 18 18"><path clip-rule="evenodd" d="M9 0c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9zM6.7 3.5h4.7c1.8 0 3.2 1.4 3.2 3.1v4.7c0 1.7-1.4 3.1-3.2 3.1H6.7c-1.8 0-3.2-1.4-3.2-3.1V6.7c0-1.8 1.4-3.2 3.2-3.2zM9 6.2c1.6 0 2.9 1.3 2.9 2.9S10.6 12 9 12s-3-1.3-3-2.9 1.3-2.9 3-2.9zm0 1.2c.9 0 1.7.8 1.7 1.7 0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7 0-.9.7-1.7 1.7-1.7zm2.8-1.7c.3 0 .6.2.6.6 0 .3-.2.6-.6.6-.3 0-.6-.2-.6-.6 0-.4.3-.6.6-.6zm-4.6-1h3.7c1.4 0 2.5 1.1 2.5 2.5v3.7c0 1.4-1.1 2.5-2.5 2.5H7.2c-1.4 0-2.5-1.1-2.5-2.5V7.2c-.1-1.4 1.1-2.5 2.5-2.5z" fill-rule="evenodd"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.tiktok.com/@shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-tiktok" aria-label="External source: TikTok (Opens in a new window)"><svg viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30ZM17.9679 11.937C19.1423 12.7643 20.551 13.2076 21.9952 13.2041V10.3838C21.2138 10.3841 20.4497 10.1579 19.7979 9.73365C19.3398 9.44298 18.9467 9.06336 18.6427 8.61802C18.3387 8.17268 18.1302 7.67098 18.0299 7.1436C17.9873 6.90737 17.9669 6.66779 17.9689 6.42789H15.0829V17.7069C15.0829 18.2146 14.92 18.7094 14.6173 19.1206C14.3146 19.5317 13.8877 19.8382 13.3975 19.9962C12.9073 20.1543 12.3789 20.1558 11.8878 20.0006C11.3966 19.8454 10.9679 19.5414 10.6627 19.1321C10.3576 18.7227 10.1916 18.2289 10.1886 17.7211C10.1856 17.2134 10.3456 16.7177 10.6458 16.3048C10.946 15.8919 11.3711 15.583 11.8604 15.4221C12.3496 15.2612 12.878 15.2566 13.37 15.409V12.5068C12.2944 12.3595 11.1987 12.539 10.2295 13.0213C9.26031 13.5037 8.46383 14.2658 7.94658 15.2058C7.42933 16.1458 7.21597 17.2188 7.33504 18.2814C7.4541 19.344 7.89992 20.3455 8.61286 21.1519C9.3258 21.9583 10.2719 22.5312 11.3246 22.794C12.3772 23.0568 13.4863 22.997 14.5035 22.6225C15.5207 22.2479 16.3975 21.5766 17.0166 20.6983C17.6357 19.82 17.9676 18.7766 17.9679 17.7075V11.937Z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.linkedin.com/company/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-linkedin" aria-label="External source: LinkedIn (Opens in a new window)"><svg viewBox="0 0 30 30"><path d="M30 15c0 8.3-6.7 15-15 15S0 23.3 0 15 6.7 0 15 0s15 6.7 15 15zM11.3 7.8c0-1.2-1-2.2-2.5-2.2s-2.5.9-2.5 2.2c0 1.2 1 2.2 2.5 2.2s2.5-1 2.5-2.2zm-.7 4.1H6.9v10.6h3.8V11.9zm13.8 5c0-3.4-1.7-5.6-4.4-5.6-1.5 0-2.6.9-3.1 2.3l-.1-1.6H13c0 .4.1 2.5.1 2.5v8.1h3.8V17c0-1.5.7-2.5 1.8-2.5s1.9.6 1.9 2.5v5.6h3.8v-5.7z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.pinterest.com/shopify/" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-pinterest" aria-label="External source: Pinterest (Opens in a new window)"><svg viewBox="0 0 30 30"><path d="M15 30c-1.5 0-2.9-.2-4.3-.6.6-.9 1.2-2 1.5-3.2.2-.7 1-4.1 1-4.1.5 1 2 1.9 3.7 1.9 4.8 0 8.1-4.4 8.1-10.3 0-4.4-3.8-8.6-9.5-8.6-7.1-.1-10.6 5-10.6 9.3 0 2.6 1 4.9 3.1 5.7.3.1.7 0 .8-.4.1-.2.2-.9.3-1.2.1-.4 0-.5-.2-.8-.6-.7-1-1.6-1-3 0-3.8 2.8-7.2 7.4-7.2 4 0 6.2 2.5 6.2 5.8 0 4.3-1.9 8-4.8 8-1.6 0-2.7-1.3-2.4-2.9.5-1.9 1.3-4 1.3-5.3 0-1.2-.7-2.3-2-2.3-1.6 0-2.9 1.7-2.9 3.9 0 1.4.5 2.4.5 2.4S9.5 24 9.3 25.3c-.3 1.1-.4 2.4-.3 3.5-5.3-2.4-9-7.7-9-13.8C0 6.7 6.7 0 15 0s15 6.7 15 15-6.7 15-15 15z"></path></svg></a></li></ul><div class="flex flex-col md:flex-row items-center"><a href="/idhttps://www.shopify.com/legal/terms" class="text-white text-15 ml-0 md:ml-6 mb-3 md:mb-[2px]">Terms of Service</a><a href="/idhttps://www.shopify.com/legal/privacy" class="text-white text-15 ml-0 md:ml-6 mb-[2px]">Privacy Policy</a><div class="relative hidden sm:block" data-click-outside="dismiss" data-component-name="regions"><button aria-controls="regionSelector" aria-expanded="false" aria-haspopup="true" class="bg-transparent mx-auto md:inline-block py-3" type="button" data-component-name="region-selector-open" tabindex="0" aria-label="Region Navigation. Current: Indonesia"><span class="inline-flex items-center"><svg viewBox="0 0 45 45" aria-hidden="true" focusable="false" class="mr-1 h-4 w-4 fill-black"><path d="M22.5 2A20.5 20.5 0 1 0 43 22.5 20.52 20.52 0 0 0 22.5 2zm-4.23 28.79A33.67 33.67 0 0 0 22 31a34.54 34.54 0 0 0 4.76-.33 30.45 30.45 0 0 1-4.26 9 30.41 30.41 0 0 1-4.23-8.88zM22 28a29.86 29.86 0 0 1-4.47-.34A31 31 0 0 1 17 22a29.87 29.87 0 0 1 .36-4.64A30.13 30.13 0 0 1 22 17a31 31 0 0 1 5.66.53A29.85 29.85 0 0 1 28 22a31 31 0 0 1-.5 5.5 31 31 0 0 1-5.5.5zm-7.64-1a25.22 25.22 0 0 1-9.15-4.5 24.89 24.89 0 0 1 9-4.48A33.56 33.56 0 0 0 14 22a34.61 34.61 0 0 0 .36 5zM22.5 5.21a25.25 25.25 0 0 1 4.5 9.15 34.61 34.61 0 0 0-5-.36 33.58 33.58 0 0 0-4 .24 25.24 25.24 0 0 1 4.5-9.03zm8.29 13.06a30.41 30.41 0 0 1 8.89 4.23 30.46 30.46 0 0 1-9 4.26A34.54 34.54 0 0 0 31 22a33.67 33.67 0 0 0-.21-3.73zm8.82.59A33.75 33.75 0 0 0 30.26 15a29.2 29.2 0 0 0-3.89-9.56 17.54 17.54 0 0 1 13.24 13.42zm-21-13.41a29.16 29.16 0 0 0-3.85 9.35 29.16 29.16 0 0 0-9.35 3.85A17.54 17.54 0 0 1 18.64 5.44zM5.44 26.36a29.2 29.2 0 0 0 9.56 3.9 33.75 33.75 0 0 0 3.86 9.36A17.54 17.54 0 0 1 5.44 26.36zm20.7 13.25a33.73 33.73 0 0 0 3.91-9.56 33.73 33.73 0 0 0 9.56-3.91 17.55 17.55 0 0 1-13.47 13.47z"></path></svg><span class="break-keep">Indonesia</span><svg viewBox="0 0 10 5" aria-hidden="true" focusable="false" class="ml-2 h-3 w-3 fill-black"><path d="m0 0 5 5 5-5H0z"></path></svg></span></button><div aria-hidden="true" class="w-128 absolute bottom-[calc(100%+5em)] z-50 rounded-lg leading-8 bg-white text-black shadow-soft-2xl right-0" id="regionSelector" data-component-name="region-selector" style="display:none"><ul class="columns-2 px-5 py-8 md:px-14 md:py-10" data-component-name="region-nav" id="region-nav"><li class="flex"><a class="flex hover:underline text-black" href="/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" data-component-name="en-0" aria-current="true">Indonesia<svg viewBox="0 0 10 8" fill="none" aria-hidden="true" focusable="false" class="ml-2 w-3"><path d="M0.75 4.75L3 7.25L9.25 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></li><li class="flex"><a class="flex hover:underline text-black" href="/au/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-1" aria-current="false">Australia</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ca/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-2" aria-current="false">Canada (English)</a></li><li class="flex"><a class="flex hover:underline text-black" href="/hk-en/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-3" aria-current="false">Hong Kong SAR</a></li><li class="flex"><a class="flex hover:underline text-black" href="/in/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-4" aria-current="false">India</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ie/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-5" aria-current="false">Ireland</a></li><li class="flex"><a class="flex hover:underline text-black" href="/my/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-6" aria-current="false">Malaysia</a></li><li class="flex"><a class="flex hover:underline text-black" href="/nz/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-7" aria-current="false">New Zealand</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ng/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-8" aria-current="false">Nigeria</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ph/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-9" aria-current="false">Philippines</a></li><li class="flex"><a class="flex hover:underline text-black" href="/sg/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-10" aria-current="false">Singapore</a></li><li class="flex"><a class="flex hover:underline text-black" href="/za/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-11" aria-current="false">South Africa</a></li><li class="flex"><a class="flex hover:underline text-black" href="/uk/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-12" aria-current="false">United Kingdom</a></li><li class="flex"><a class="flex hover:underline text-black" href="/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-13" aria-current="false">USA</a></li></ul></div></div><div class="relative block sm:hidden" data-click-outside="dismiss" data-component-name="regions"><div aria-hidden="true" class="fixed top-0 left-0 z-50 h-full w-full text-[1.1428571429em] will-change-auto transition-opacity motion-reduce:transition-none bg-white pointer-events-none opacity-0"></div><button class="bg-transparent mx-auto md:inline-block py-3" type="button" data-component-name="region-selector-open" tabindex="0" aria-label="Region Navigation. Current: Indonesia"><span class="inline-flex items-center"><svg viewBox="0 0 45 45" aria-hidden="true" focusable="false" class="mr-1 h-4 w-4 fill-black"><path d="M22.5 2A20.5 20.5 0 1 0 43 22.5 20.52 20.52 0 0 0 22.5 2zm-4.23 28.79A33.67 33.67 0 0 0 22 31a34.54 34.54 0 0 0 4.76-.33 30.45 30.45 0 0 1-4.26 9 30.41 30.41 0 0 1-4.23-8.88zM22 28a29.86 29.86 0 0 1-4.47-.34A31 31 0 0 1 17 22a29.87 29.87 0 0 1 .36-4.64A30.13 30.13 0 0 1 22 17a31 31 0 0 1 5.66.53A29.85 29.85 0 0 1 28 22a31 31 0 0 1-.5 5.5 31 31 0 0 1-5.5.5zm-7.64-1a25.22 25.22 0 0 1-9.15-4.5 24.89 24.89 0 0 1 9-4.48A33.56 33.56 0 0 0 14 22a34.61 34.61 0 0 0 .36 5zM22.5 5.21a25.25 25.25 0 0 1 4.5 9.15 34.61 34.61 0 0 0-5-.36 33.58 33.58 0 0 0-4 .24 25.24 25.24 0 0 1 4.5-9.03zm8.29 13.06a30.41 30.41 0 0 1 8.89 4.23 30.46 30.46 0 0 1-9 4.26A34.54 34.54 0 0 0 31 22a33.67 33.67 0 0 0-.21-3.73zm8.82.59A33.75 33.75 0 0 0 30.26 15a29.2 29.2 0 0 0-3.89-9.56 17.54 17.54 0 0 1 13.24 13.42zm-21-13.41a29.16 29.16 0 0 0-3.85 9.35 29.16 29.16 0 0 0-9.35 3.85A17.54 17.54 0 0 1 18.64 5.44zM5.44 26.36a29.2 29.2 0 0 0 9.56 3.9 33.75 33.75 0 0 0 3.86 9.36A17.54 17.54 0 0 1 5.44 26.36zm20.7 13.25a33.73 33.73 0 0 0 3.91-9.56 33.73 33.73 0 0 0 9.56-3.91 17.55 17.55 0 0 1-13.47 13.47z"></path></svg><span class="break-keep">Indonesia</span><svg viewBox="0 0 10 5" aria-hidden="true" focusable="false" class="ml-2 h-3 w-3 fill-black"><path d="m0 0 5 5 5-5H0z"></path></svg></span></button><div aria-hidden="true" class="webkit-overflow-scrolling-touch fixed overflow-hidden z-[999] box-content will-change-auto w-full inset-0 mt-16 rounded-t-lg leading-[3rem] duration-300 ease-in-out motion-reduce:animation-none motion-reduce:transition-none bg-white text-black shadow-soft-2xl invisible translate-y-full" id="mobileRegionSelector" aria-label="Region Navigation" aria-modal="true" role="dialog"><div class="border-shade-30 border-b"><div class="flex items-center justify-between px-5 py-4"><h3 class="text-lg font-medium">Country/region</h3><button class="h-[1.2em] w-[1.2em] fill-current" type="button" data-component-name="region-selector-close"><svg viewBox="0 0 20 20" aria-label="Close Region Navigation" class="h-[1.2em] w-[1.2em] fill-current fill-black"><path d="m11.414 10 6.293-6.293a1 1 0 0 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 0 0 1.414 1.414L10 11.414l6.293 6.293a.996.996 0 0 0 1.414 0 1 1 0 0 0 0-1.414L11.414 10z"></path></svg></button></div></div><div class="h-full overflow-y-scroll pb-4"><ul class="columns-2 px-5 py-8 md:px-14 md:py-10" data-component-name="region-nav" id="region-nav"><li class="flex"><a class="flex hover:underline text-black" href="/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" data-component-name="en-0" aria-current="true">Indonesia<svg viewBox="0 0 10 8" fill="none" aria-hidden="true" focusable="false" class="ml-2 w-3"><path d="M0.75 4.75L3 7.25L9.25 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></li><li class="flex"><a class="flex hover:underline text-black" href="/au/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-1" aria-current="false">Australia</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ca/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-2" aria-current="false">Canada (English)</a></li><li class="flex"><a class="flex hover:underline text-black" href="/hk-en/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-3" aria-current="false">Hong Kong SAR</a></li><li class="flex"><a class="flex hover:underline text-black" href="/in/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-4" aria-current="false">India</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ie/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-5" aria-current="false">Ireland</a></li><li class="flex"><a class="flex hover:underline text-black" href="/my/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-6" aria-current="false">Malaysia</a></li><li class="flex"><a class="flex hover:underline text-black" href="/nz/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-7" aria-current="false">New Zealand</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ng/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-8" aria-current="false">Nigeria</a></li><li class="flex"><a class="flex hover:underline text-black" href="/ph/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-9" aria-current="false">Philippines</a></li><li class="flex"><a class="flex hover:underline text-black" href="/sg/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-10" aria-current="false">Singapore</a></li><li class="flex"><a class="flex hover:underline text-black" href="/za/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-11" aria-current="false">South Africa</a></li><li class="flex"><a class="flex hover:underline text-black" href="/uk/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-12" aria-current="false">United Kingdom</a></li><li class="flex"><a class="flex hover:underline text-black" href="/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language" lang="en" data-component-name="en-13" aria-current="false">USA</a></li></ul></div></div></div></div></div></div></div><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/entry.client-CTuCHl1M.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/components-60B5pb4k.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/I18N-BmnmoWJU.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Wrapper-BJS5F588.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Image-DQuLW4bT.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Section-Bv1m84ju.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/SideBySide-Csvp0IIu.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Provider-HFzBeLPW.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/HeadingGroup-IVgVfgzw.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/root-C-mg5gkk.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/layout-YhaZ_g6D.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/PageLayout-q0mBv8hU.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/XIcon.svg-BsjI1VIY.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/NavigationSearch-vw4CYqxh.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/index-CRXFT8nJ.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BlogCard-D7XHZ9da.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Conversion-CPGsCYBt.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/constants-Cm4ZPFll.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Image-Dqn2JlFF.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/constants-Cs9nQPfb.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/partnersHelpers-BlRjfC34.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BaseInput-DxnbX8Hr.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/utils-DbZwQWK5.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/ArticleCarousel-_1IofRan.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/article-BLvhnj4S.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BlogConversion-BbdjKmrS.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/LatestSection-D2JzJPNN.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/blog-CO8llDlK.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/PartnersFooter-BRU1EM0A.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/useBlogPageTitle-CGuzOVmV.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/handle-BeFHnPVi.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/route-DSm-KK0x.js"/><script>window.__remixContext = {"url":"/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","basename":"/","future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false,"v3_throwAbortReason":false,"unstable_singleFetch":false,"unstable_fogOfWar":true},"isSpaMode":false,"state":{"loaderData":{"pages/shopify.com/($locale)~~layout":{"mainNavData":[{"content":"Solutions","data":{"gaEvent":"Main Nav","gaAction":"Online Solutions"},"navItems":[{"content":"Start","data":{"gaEvent":"Main Nav","gaAction":"Build Nav"},"columnStart":1,"columnSpan":3,"icon":"build","navItems":[{"content":"Start your business","url":"/id/start","separated":true,"data":{"gaEvent":"Main Nav","gaAction":"Start"},"description":"Build your brand"},{"content":"Create your website","url":"/id/website/builder","data":{"gaEvent":"Main Nav","gaAction":"Create your website"},"description":"Online store editor"},{"content":"Customize your store","url":"https://themes.shopify.com/","data":{"gaEvent":"Main Nav","gaAction":"Customize your store"},"description":"Store themes"},{"content":"Find business apps","url":"https://apps.shopify.com/","data":{"gaEvent":"Main Nav","gaAction":"Find business apps"},"description":"Shopify app store"},{"content":"Own your site domain","url":"/id/domains","data":{"gaEvent":"Main Nav","gaAction":"Own your site domain"},"description":"Domains \u0026 hosting"},{"content":"Explore free business tools","url":"/id/tools","data":{"gaEvent":"Main Nav","gaAction":"Explore free business tools"},"description":"Tools to run your business"}]},{"content":"Sell","data":{"gaEvent":"Main Nav","gaAction":"Sell Nav"},"columnStart":4,"columnSpan":3,"icon":"sell","navItems":[{"content":"Sell your products","url":"/id/sell","separated":true,"data":{"gaEvent":"Main Nav","gaAction":"Sell your products"},"description":"Sell online or in person"},{"content":"Sell online","url":"/id/online","data":{"gaEvent":"Main Nav","gaAction":"Sell online"},"description":"Grow your business online"},{"content":"Sell across channels","url":"/id/channels","data":{"gaEvent":"Main Nav","gaAction":"Sell on across channels"},"description":"Reach millions of shoppers and boost sales"},{"content":"Sell in person","url":"/id/pos","data":{"gaEvent":"Main Nav","gaAction":"Sell in person"},"description":"Point of Sale (POS)"},{"content":"Sell globally","url":"/id/markets","data":{"gaEvent":"Main Nav","gaAction":"Sell globally"},"description":"International sales"},{"content":"Sell wholesale \u0026 direct","url":"/id/plus/solutions/b2b-ecommerce","data":{"gaEvent":"Main Nav","gaAction":"Sell wholesale and direct"},"description":"Business-to-business (B2B)"}]},{"content":"Market","data":{"gaEvent":"Main Nav","gaAction":"Market Nav"},"columnStart":7,"columnSpan":3,"icon":"market","navItems":[{"content":"Market your business","url":"/id/marketing","separated":true,"data":{"gaEvent":"Main Nav","gaAction":"Market your business"},"description":"Reach \u0026 retain customers"},{"content":"Market across social","url":"/id/facebook-instagram","data":{"gaEvent":"Main Nav","gaAction":"Market across social"},"description":"Social media integrations"},{"content":"Chat with customers","url":"/id/inbox","data":{"gaEvent":"Main Nav","gaAction":"inbox"},"description":"Shopify Inbox"},{"content":"Nurture customers","url":"/id/email-marketing","data":{"gaEvent":"Main Nav","gaAction":"Shopify Email"},"description":"Shopify Email"},{"content":"Know your audience","url":"/id/segmentation","data":{"gaEvent":"Main Nav","gaAction":"Know your customers"},"description":"Gain customer insights"}]},{"content":"Manage","data":{"gaEvent":"Main Nav","gaAction":"Manage Nav"},"columnStart":10,"columnSpan":3,"icon":"manage","navItems":[{"content":"Manage your business","url":"/id/manage","separated":true,"data":{"gaEvent":"Main Nav","gaAction":"Manage your business"},"description":"Track sales, orders \u0026 analytics"},{"content":"Measure your performance","url":"/id/analytics","data":{"gaEvent":"Main Nav","gaAction":"Measure your Performance"},"description":"Analytics and Reporting"},{"content":"Manage your stock \u0026 orders","url":"/id/orders","data":{"gaEvent":"Main Nav","gaAction":"Organize inventory and orders"},"description":"Inventory \u0026 order management"},{"content":"Automate your business","url":"/id/flow","data":{"gaEvent":"Main Nav","gaAction":"Automate your business"},"description":"Shopify Flow"}]},{"aside":true,"columnStart":1,"columnSpan":12,"navItems":[{"content":"Shopify Developers","url":"https://shopify.dev","data":{"gaEvent":"Main Nav","gaAction":"Shopify Developers"},"description":"Build with Shopify's powerful APIs","columnSpan":3},{"content":"Plus","url":"/id/plus","data":{"gaEvent":"Main Nav","gaAction":"Shopify Plus"},"description":"A commerce solution for growing digital brands","columnSpan":3},{"content":"All Products","url":"/id/products","data":{"gaEvent":"Main Nav","gaAction":"All products"},"description":"Explore all Shopify products \u0026 features","columnSpan":3}]}]},{"content":"Pricing","url":"/id/pricing","data":{"gaEvent":"Main Nav","gaAction":"Pricing Nav"}},{"content":"Resources","data":{"gaEvent":"Main Nav","gaAction":"Resources Nav"},"navItems":[{"content":"Help and support","data":{"gaEvent":"Main Nav","gaAction":"Help and support Nav"},"columnStart":1,"columnSpan":3,"icon":"helpAndSupport","navItems":[{"content":"Help and support","url":"https://help.shopify.com/en/","data":{"gaEvent":"Main Nav","gaAction":"Help and support"},"description":"Get 24/7 support"},{"content":"How-to guides","url":"/id/blog/topics/guides","data":{"gaEvent":"Main Nav","gaAction":"How-to guides"},"description":"Read in-depth business guides"},{"content":"Business courses","url":"https://academy.shopify.com","data":{"gaEvent":"Main Nav","gaAction":"Business courses"},"description":"Learn from proven experts"},{"content":"Shopify blog","url":"/id/blog","data":{"gaEvent":"Main Nav","gaAction":"Shopify blog"},"description":"Business strategy tips"}]},{"content":"Popular topics","data":{"gaEvent":"Main Nav","gaAction":"Popular topics Nav"},"columnStart":4,"columnSpan":6,"splitColumns":true,"icon":"popularTopics","navItems":[{"content":"What is Shopify?","url":"/id/blog/what-is-shopify","data":{"gaEvent":"Main Nav","gaAction":"What is Shopify?"},"description":"How our commerce platform works"},{"content":"Shopify Editions","url":"/id/editions","data":{"gaEvent":"Main Nav","gaAction":"Editions"},"description":"New, innovative Shopify products"},{"content":"Founder stories","url":"/id/blog/topics/founder-stories","data":{"gaEvent":"Main Nav","gaAction":"Founder Stories"},"description":"Learn from successful merchants"},{"content":"Branding","url":"/id/blog/how-to-build-a-brand","data":{"gaEvent":"Main Nav","gaAction":"Branding"},"description":"Build your brand from scratch"},{"content":"Marketing","url":"/id/blog/marketing-plan","data":{"gaEvent":"Main Nav","gaAction":"Marketing"},"description":"Build a marketing plan"},{"content":"Ecommerce SEO","url":"/id/blog/ecommerce-seo-beginners-guide","data":{"gaEvent":"Main Nav","gaAction":"Ecommerce SEO"},"description":"Improve your search ranking"},{"content":"Social media strategy","url":"/blog/social-media-marketing-strategy","data":{"gaEvent":"Main Nav","gaAction":"Social media strategy"},"description":"Turn social into sales"},{"content":"Business growth","url":"/id/blog/how-to-scale-small-business","data":{"gaEvent":"Main Nav","gaAction":"Business growth"},"description":"Scale your business"}]},{"content":"Essential tools","data":{"gaEvent":"Main Nav","gaAction":"Essential tools Nav"},"columnStart":10,"columnSpan":3,"aside":true,"icon":"essentialTools","navItems":[{"content":"Logo maker","url":"/tools/logo-maker","data":{"gaEvent":"Main Nav","gaAction":"Logo maker"}},{"content":"Stock photography","url":"https://www.shopify.com/stock-photos","data":{"gaEvent":"Main Nav","gaAction":"Stock photography"}},{"content":"Business plan template","url":"/id/blog/business-plan-template","data":{"gaEvent":"Main Nav","gaAction":"Business plan template"}},{"content":"Link in bio tool","url":"https://www.linkpop.com/","data":{"gaEvent":"Main Nav","gaAction":"Link in bio tool"}},{"content":"QR code generator","url":"/tools/qr-code-generator","data":{"gaEvent":"Main Nav","gaAction":"QR code generator"}}]}]},{"content":"Enterprise","url":"/id/enterprise","data":{"gaEvent":"Main Nav","gaAction":"Upmarket Enterprise CTA"}},{"content":"What’s new","data":{"gaEvent":"Main Nav","gaAction":"What's New"},"navItems":[{"simple":true,"columnStart":1,"columnSpan":12,"navItems":[{"content":"Changelog","url":"https://changelog.shopify.com","data":{"gaEvent":"Main Nav","gaAction":"Changelog"},"description":"Your source for recent updates","columnSpan":3,"icon":"changelog"},{"content":"Summer ’24 Edition","url":"/id/editions/summer2024","data":{"gaEvent":"Main Nav","gaAction":"Editions"},"description":"The latest 100+ product updates","columnSpan":3,"icon":"editions"},{"content":"All Editions","url":"/editions/all","data":{"gaEvent":"Main Nav","gaAction":"All Editions"},"description":"Archive of past Shopify Editions","columnSpan":3,"icon":"allEditions"},{"content":"Newsroom","url":"https://shopify.com/news","data":{"gaEvent":"Main Nav","gaAction":"Newsroom"},"description":"All company news and press releases","columnSpan":3,"icon":"newsroom"}]}]}]},"pages/shopify.com/($locale)/partners/blog/$article":{"article":{"__typename":"Article","authorV2":{"__typename":"ArticleAuthor","name":"Keir Whitaker","avatarUrl":"https://www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=200\u0026d=404","isDisabledAuthor":true},"id":"gid://shopify/Article/115244038","handle":"115244038-an-overview-of-liquid-shopifys-templating-language","title":"An Overview of Liquid: Shopify's Templating Language","publishedAt":"2020-01-30T03:00:00Z","image":null,"tags":["Shopify Theme Development"],"contentHtml":"\u003cimg src=\"//cdn.shopify.com/s/files/1/0533/2089/files/Shopify-liquid.jpg?v=1585598279\" alt=\"Shopify liquid\"\u003e\n\u003cp\u003eIf you are new to the Shopify platform and read through our content, you might be wondering what all the references to Liquid actually refer to. In this article, we'll explain all you need to know about Liquid, how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates. Let's begin with a little history.\u003c/p\u003e\n\u003cp\u003eLiquid was developed by Shopify co-founder and CEO Tobias Lütke and is now available as an \u003ca href=\"https://github.com/Shopify/liquid\"\u003eopen source project on GitHub\u003c/a\u003e. Today, it's used in many different software projects, from content management systems to static site generators—and of course, Shopify.\u003c/p\u003e\n\u003cdiv class=\"marketing-block marketing-block--light marketing-block--padded grid-container leadpage-container gutter-bottom\"\u003e\n\u003cdiv class=\"leadpage__image\"\u003e\u003cimg class=\"hide--mobile gutter-bottom--reset\" alt=\"Template Icon\" src=\"https://cdn.shopify.com/s/files/1/0070/7032/files/oie_25213653uBHZT6fw.gif\"\u003e\u003c/div\u003e\n\u003cdiv class=\"js-subscribe subscribe \"\u003e\n\u003cdiv class=\"subscribe__content-wrapper\"\u003e\n\u003cdiv class=\"subscribe__content\"\u003e\n\u003cp class=\"heading--4\"\u003eLearning Liquid: Getting Started with Shopify Theming\u003c/p\u003e\n\u003cp\u003eGet this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.\u003c/p\u003e\n\u003cform class=\"subscribe__form marketing-form marketing-form--inline\" novalidate=\"novalidate\" accept-charset=\"UTF-8\" method=\"post\" action=\"/content-services/subscribers\"\u003e\n\u003cinput name=\"utf8\" type=\"hidden\" value=\"✓\"\u003e\u003cinput type=\"hidden\" name=\"authenticity_token\" value=\"Bjwq3S+ZU2sBAegLlXZF7me0EiLRtu8oiVng/wyX/F/ZTWHRe80Vhi+iJ0lJy+NzykhNiDVfmzljVSGzmaeVkg==\"\u003e \u003clabel class=\"marketing-input-wrapper marketing-input-button-pair\"\u003e\u003clabel class=\"marketing-input-wrapper marketing-input-button-pair\"\u003e\u003cspan class=\"marketing-label marketing-label--hidden visuallyhidden\"\u003eEmail\u003c/span\u003e\u003c/label\u003e\u003c/label\u003e\n\u003cdiv class=\"marketing-input-button__field-wrapper\"\u003e\n\u003cinput name=\"email\" placeholder=\"Enter your email address\" class=\"marketing-input-button-pair__input marketing-input subscribe__email\" type=\"email\" id=\"subscribe_email\"\u003e\u003cbutton name=\"button\" type=\"submit\" class=\"marketing-button marketing-form__button marketing-input-button-pair__button subscribe__submit \" data-ga-event=\"content_upgrades\" data-ga-action=\"learning_liquid\" data-ga-label=\"email_signup\"\u003eGet free copy\u003c/button\u003e\n\u003c/div\u003e\n\u003cinput type=\"hidden\" name=\"data_extension_key\" id=\"data_extension_key\" value=\"3A3467BB-6C76-4BFC-857E-E1371284F954\"\u003e \u003cinput type=\"hidden\" name=\"partner_lead_recent_activity_source\" id=\"partner_lead_recent_activity_source\" value=\"CU-LIQUID\"\u003e \u003cinput type=\"hidden\" name=\"partner_lead_recent_activity_channel\" id=\"partner_lead_recent_activity_channel\" value=\"Blog\"\u003e \u003cinput type=\"hidden\" name=\"source_url\" id=\"source_url\" value=\"partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language\"\u003e\n\u003c/form\u003e\n\u003cp\u003e\u003cspan size=\"1\" style=\"font-size: xx-small;\"\u003e\u003ci\u003eBy entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.\u003c/i\u003e\u003c/span\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"text-center subscribe__success\" aria-hidden=\"true\"\u003e\n\u003ch4 class=\"subscribe__success__heading \"\u003eOur virtual cogs are turning. \u003cbr\u003ePlease note that it can take up\u003cbr\u003eto 15 minutes for our email\u003cbr\u003e to reach your inbox.\u003c/h4\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003ch2\u003eLiquid: language or engine?\u003c/h2\u003e\n\u003cp\u003eSome refer to Liquid as a template language, while others may call it a template engine. It doesn't really matter which label you apply—in many ways both are right. Personally, I like to call it a template language. It has a syntax (like traditional programming languages), has concepts such as output, logic, and loops, and it interacts with variables (data), just as you would with a web-centric language such as PHP.\u003c/p\u003e\n\u003cp\u003eHowever, that's really where the similarities end. There's a lot you can't do with Liquid—by design. For example, it has no concept of \"state,\" it doesn't let you get deep under the covers of the platform, and can occasionally seem counter intuitive for seasoned coders. However, it has been very well thought out and what might at first seem like a limitation is usually intended, and for good reason.\u003c/p\u003e\n\u003cdiv class=\"marketing-block marketing-block--light marketing-block--padded\"\u003e\n\u003cp class=\"heading--4\"\u003eExplore Shopify Liquid Code Examples\u003c/p\u003e\n\u003cp\u003eVisit our searchable library of Liquid code examples based around theme components. Learn how various Liquid objects, properties, and filters work together as part of components within a theme. Add them directly into themes to build and customize themes faster and more reliably.\u003c/p\u003e\n\u003ca class=\"marketing-button marketing-button--small\" target=\"_blank\" href=\"https://shopify.github.io/liquid-code-examples/\" rel=\"noopener noreferrer\"\u003eVisit Shopify Liquid Code Examples\u003c/a\u003e\n\u003c/div\u003e\n\u003ch2\u003eLiquid's function\u003c/h2\u003e\n\u003cp\u003eLiquid, like any template language, creates a bridge between an HTML file and a data store—in our context, the data is of course a Shopify store. It does this by allowing us to access variables from within a template, or Liquid file, with a simple to use and readable syntax.\u003c/p\u003e\n\u003cp\u003eIn Shopify, each Liquid file allows us to access certain variables without having to do any heavy lifting. For example, the \u003ccode class=\"marketing-code\"\u003eproduct.liquid\u003c/code\u003e template allows us access to all the details relating to the currently viewed product. Liquid, in turn, allows us to output this data without having to know anything about the actual product itself. These variables are known as template variables. You can also use Liquid to retrieve data that isn't made available to us. For example, you can ask Shopify to populate a variable you create with all the products in a particular collection.\u003c/p\u003e\n\u003cp\u003eOnce we know the names of the variables we have access to or create, we can use Liquid constructs such as \"output\" and \"loops\" to display the data in our Liquid files.\u003c/p\u003e\n\u003cp\u003eThe Shopify platform understands what data to retrieve, and how to display it depending on the Liquid code you have in your theme. It might be a simple case of displaying the name of a product or something slightly more complex, such as showcasing a series of product images.\u003c/p\u003e\n\u003cp\u003eThe great benefit of a template language such as Liquid is that you, as the designer, don't need to know anything about the store data itself. As such, your themes are 100 percent agnostic and can be applied to multiple stores without any knowledge of the stores content.\u003c/p\u003e\n\u003cp class=\"marketing-block marketing-block--light marketing-block--padded\"\u003e\u003cstrong\u003eYou might also like:\u003c/strong\u003e \u003ca target=\"_blank\" href=\"https://www.shopify.com/partners/blog/front-end-development-tools\" rel=\"noopener noreferrer\"\u003eThe 8 Best Free Shopify Resources and Tools for Front-End Developers\u003c/a\u003e.\u003c/p\u003e\n\u003ch2\u003eLiquid's file extension and delimiters\u003c/h2\u003e\n\u003cp\u003eLiquid files have the extension of \u003ccode class=\"marketing-code\"\u003e.liquid\u003c/code\u003e. A liquid file is a mix of standard HTML code and Liquid constructs. It's an easy to read syntax, and is easy to distinguish from HTML when working with a Liquid file. This is made even easier thanks to the use of two sets of delimiters.\u003c/p\u003e\n\u003cp\u003eThe double curly brace delimiters \u003ccode class=\"marketing-code\"\u003e{{ }}\u003c/code\u003e denote output, and the curly brace percentage delimiters \u003ccode class=\"marketing-code\"\u003e{% %}\u003c/code\u003e denote logic. You'll become very familiar with these as every Liquid construct begins with one or the other.\u003c/p\u003e\n\u003cp\u003eAnother way of thinking of delimiters is as \"placeholders.\" A placeholder can be viewed as a piece of code that will ultimately be replaced by data when the compiled theme is sent to the browser. This data is determined entirely by the theme designer as a result of the Liquid code in the Liquid file. As such, Liquid themes, much like templates that inter splice PHP and HTML, serve as representations of what will be rendered.\u003c/p\u003e\n\u003ch3\u003eOutput\u003c/h3\u003e\n\u003cp\u003eLet's examine the syntax for \"output.\" As the name suggests, output in Liquid will literally output a piece of data from our store onto a page.\u003c/p\u003e\n\u003cp\u003eHere's a quick example of an output placeholder that you will typically find in the \u003ccode class=\"marketing-code\"\u003eproduct.liquid\u003c/code\u003e file:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;h2\u0026gt;{{ product.title }}\u0026lt;/h2\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eWhen rendered, this would output the name of the currently viewed product in place of the \u003ccode class=\"marketing-code\"\u003e{{ }}\u003c/code\u003e, for example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;h2\u0026gt;American Diner Mug\u0026lt;/h2\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eOutput, unless manipulated with a filter (which we will look at shortly) is simply a case of replacing the entire placeholder with a text string from your store.\u003c/p\u003e\n\u003cdiv data-partners-signup=\"service_partner\"\u003e\u003c/div\u003e\n\u003ch2\u003eObjects and properties\u003c/h2\u003e\n\u003cp\u003eThis example also introduces us to the Liquid dot syntax. This is common in many template and server side languages. Taking our \u003ccode class=\"marketing-code\"\u003eshop.name\u003c/code\u003e example we can break it up into two parts.\u003c/p\u003e\n\u003cp\u003eThe first element preceding the \u003ccode class=\"marketing-code\"\u003e.\u003c/code\u003e is the object—in this case, it is the \u003ccode class=\"marketing-code\"\u003eshop\u003c/code\u003e object. This is a variable that represents all the data relating to the shop that we have defined in the Shopify admin. These data items include:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.city\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.country\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.country_upper\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.province\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.province_code\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.street\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.summary\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.zip\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.collections_count\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.currency\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.description\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.domain\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.email\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.enabled_currencies\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.enabled_payment_types\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.metafields\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.money_format\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.money_with_currency_format\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.name\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.password_message\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.permanent_domain\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.phone\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.policies\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.privacy_policy\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.products_count\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.published_locales\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.refund_policy\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.shipping_policy\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.terms_of_service\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.secure_url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.taxes_included\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.types\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.vendors\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe items following the \u003ccode class=\"marketing-code\"\u003e.\u003c/code\u003e represent properties of the shop object. A property could be as simple as the name of the store (as per our example above) or it could be a list of items, such as the kinds of payment types enabled in the store.\u003c/p\u003e\n\u003cp class=\"marketing-block marketing-block--light marketing-block--padded\"\u003e\u003cstrong\u003eYou might also like:\u003c/strong\u003e \u003ca target=\"_blank\" href=\"https://www.shopify.com/partners/blog/the-ultimate-list-of-resources-for-shopify-theme-developers\" rel=\"noopener noreferrer\"\u003eThe Essential List of Resources for Shopify Theme Development\u003c/a\u003e.\u003c/p\u003e\n\u003ch2\u003eCollection properties\u003c/h2\u003e\n\u003cp\u003eYou will notice from the list above that a number of the properties are plural, e.g:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.enabled_payment_types\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.metafields\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.types\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThese properties represent Liquid collections. Instead of returning a string of data such as the name of the shop they will return an array of data — in other words, a list of items we can access via a Liquid loop.\u003c/p\u003e\n\u003cp\u003eWhen first using Shopify and Liquid, it's easy to get confused by collections—I certainly did. I will therefore refer to \"product collections\" and \"Liquid collections.\" The former being a logical grouping of products defined in the Shopify Admin, and the latter being a list of items we can access in Liquid code.\u003c/p\u003e\n\u003cp\u003eFinally, it's worth saying that each one of the list items in our Liquid collection can also have properties. A good example of this is \u003ccode class=\"marketing-code\"\u003eproduct.images\u003c/code\u003e. This represents a list of all the images that have been added to a particular product.\u003c/p\u003e\n\u003cp\u003eEach of the images in the list has multiple properties associated with it:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.alt\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.aspect_ratio\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.attached_to_variant?\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.height\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.id\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.media_type\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.position\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.preview_image\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.product_id\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.src\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.variants\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.width\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eIn order to access these properties, we have to use a Liquid loop.\u003c/p\u003e\n\u003ch2\u003eLiquid loops\u003c/h2\u003e\n\u003cp\u003eLoops are used extensively in Shopify themes, and are thankfully very easy to understand. If you have done any form of basic programming, the concept of loops will likely be very familiar to you.\u003c/p\u003e\n\u003cp\u003eUsing a loop, often known as a \u003ccode class=\"marketing-code\"\u003efor loop\u003c/code\u003e, allows us to output the same piece of code a known number of times in our Liquid file. As mentioned above, a typical example would be to output all the images associated with a product.\u003c/p\u003e\n\u003cp\u003eLet's have a look at an example using the \u003ccode class=\"marketing-code\"\u003eproduct.images\u003c/code\u003e Liquid collection I discussed earlier.\u003c/p\u003e\n\u003cp\u003eOur aim with this loop is to output all of the images for a particular product. Here's a very simplistic loop that will output each image inline:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% for image in product.images %}\u003cbr\u003e \u0026lt;img src=\"{{ image | img_url: '300x300' }}\"\u0026gt;\u003cbr\u003e{% endfor %}\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eLet's break it down into steps to fully understand it.\u003c/p\u003e\n\u003cdiv class=\"marketing-block marketing-block--light marketing-block--padded grid-container leadpage-container gutter-bottom\"\u003e\n\u003cdiv class=\"leadpage__image\"\u003e\u003cimg class=\"hide--mobile gutter-bottom--reset\" alt=\"Template Icon\" src=\"https://cdn.shopify.com/s/files/1/0070/7032/files/oie_25213653uBHZT6fw.gif\"\u003e\u003c/div\u003e\n\u003cdiv class=\"js-subscribe subscribe \"\u003e\n\u003cdiv class=\"subscribe__content-wrapper\"\u003e\n\u003cdiv class=\"subscribe__content\"\u003e\n\u003cp class=\"heading--4\"\u003eLearning Liquid: Getting Started with Shopify Theming\u003c/p\u003e\n\u003cp\u003eGet this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.\u003c/p\u003e\n\u003cform class=\"subscribe__form marketing-form marketing-form--inline\" novalidate=\"novalidate\" accept-charset=\"UTF-8\" method=\"post\" action=\"/content-services/subscribers\"\u003e\n\u003cinput name=\"utf8\" type=\"hidden\" value=\"✓\"\u003e\u003cinput type=\"hidden\" name=\"authenticity_token\" value=\"Bjwq3S+ZU2sBAegLlXZF7me0EiLRtu8oiVng/wyX/F/ZTWHRe80Vhi+iJ0lJy+NzykhNiDVfmzljVSGzmaeVkg==\"\u003e \u003clabel class=\"marketing-input-wrapper marketing-input-button-pair\"\u003e\u003clabel class=\"marketing-input-wrapper marketing-input-button-pair\"\u003e\u003cspan class=\"marketing-label marketing-label--hidden visuallyhidden\"\u003eEmail\u003c/span\u003e\u003c/label\u003e\u003c/label\u003e\n\u003cdiv class=\"marketing-input-button__field-wrapper\"\u003e\n\u003cinput name=\"email\" placeholder=\"Enter your email address\" class=\"marketing-input-button-pair__input marketing-input subscribe__email\" type=\"email\" id=\"subscribe_email\"\u003e\u003cbutton name=\"button\" type=\"submit\" class=\"marketing-button marketing-form__button marketing-input-button-pair__button subscribe__submit \" data-ga-event=\"content_upgrades\" data-ga-action=\"learning_liquid\" data-ga-label=\"email_signup\"\u003eGet free copy\u003c/button\u003e\n\u003c/div\u003e\n\u003cinput type=\"hidden\" name=\"data_extension_key\" id=\"data_extension_key\" value=\"3A3467BB-6C76-4BFC-857E-E1371284F954\"\u003e \u003cinput type=\"hidden\" name=\"partner_lead_recent_activity_source\" id=\"partner_lead_recent_activity_source\" value=\"CU-LIQUID\"\u003e \u003cinput type=\"hidden\" name=\"partner_lead_recent_activity_channel\" id=\"partner_lead_recent_activity_channel\" value=\"Blog\"\u003e \u003cinput type=\"hidden\" name=\"source_url\" id=\"source_url\" value=\"partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language\"\u003e\n\u003c/form\u003e\n\u003cp\u003e\u003cspan size=\"1\" style=\"font-size: xx-small;\"\u003e\u003ci\u003eBy entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.\u003c/i\u003e\u003c/span\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"text-center subscribe__success\" aria-hidden=\"true\"\u003e\n\u003ch4 class=\"subscribe__success__heading \"\u003eOur virtual cogs are turning. \u003cbr\u003ePlease note that it can take up\u003cbr\u003eto 15 minutes for our email\u003cbr\u003e to reach your inbox.\u003c/h4\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003ch3\u003eStep 1\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% for image in product.images %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe first line introduces us to the second style of delimiter, the curly brace percentage syntax \u003ccode class=\"marketing-code\"\u003e{% %}\u003c/code\u003e. Here, we are using a Liquid \u003ccode class=\"marketing-code\"\u003efor\u003c/code\u003e loop. Loops work with Liquid collections, and allow us to iterate over each item in our list in turn. If the product we are currently viewing had six images associated with it, our \u003ccode class=\"marketing-code\"\u003efor\u003c/code\u003e loop would loop six times, if it had 10 then it would loop 10 times, and so on. Only once every list item has been looked at (or unless we instruct it otherwise), will the next part of the page be considered.\u003c/p\u003e\n\u003cp\u003eIt's worth noting that unless we specifically ask how big our loop will be, we don't know how many loops will occur—only that Liquid will go through every item in our list, in turn. The loop will finish after the last iteration, and it's at this point that the page will carry on with its processing.\u003c/p\u003e\n\u003cp\u003eIn order to access the properties of each list item, we designate a variable to represent the current item in the loop. In our example above it is \u003ccode class=\"marketing-code\"\u003eimage\u003c/code\u003e. While this is an obvious choice, and will help other designers understand your logic in the future, it can literally be anything. For example, we could use \u003ccode class=\"marketing-code\"\u003ealltheimagesintheworld\u003c/code\u003e, in which case it would look as follows:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% for alltheimagesintheworld in product.images %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis is of course a silly example to make a point—image makes much more sense, but I just wanted to emphasize the fact that this variable has no relation to the Liquid collection.\u003c/p\u003e\n\u003ch3\u003eStep 2\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;img src=\"{{ image | img_url: '300x300' }}\" /\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe second line of our code example consists of part HTML and part Liquid. You'll also notice that the \u003ccode class=\"marketing-code\"\u003esrc\u003c/code\u003e attribute is populated with a Liquid output tag.\u003c/p\u003e\n\u003cp\u003eThis introduces us to the concept of filters which are denoted by the \u003ccode class=\"marketing-code\"\u003e|\u003c/code\u003e (pipe) character—we'll look at these in more detail shortly. In our example, the filter is taking the image variable (the current item in our loop) and is specifying the dimensions, in pixels, the image should be displayed. \u003c/p\u003e\n\u003cp\u003eWe'll look at filters, denoted by the | character, next, but suffice to say that the parameters we define will populate the \u003ccode class=\"marketing-code\"\u003esrc\u003c/code\u003e attribute with a fully qualified URL to the current image in our list. The filter does all the work of creating the \u003ccode class=\"marketing-code\"\u003esrc\u003c/code\u003e attribute for us.\u003c/p\u003e\n\u003ch3\u003eStep 3\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% endfor %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe final line of our example is our closing \u003ccode class=\"marketing-code\"\u003eendfor\u003c/code\u003e statement. This tells the template to carry on after all the loops have been executed.\u003c/p\u003e\n\u003cp\u003eIf we had three images in our \u003ccode class=\"marketing-code\"\u003eproduct.images\u003c/code\u003e object, the final output would look something like this:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;img src=\"//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-clay-pot_300x300.jpg\" alt=\"plant-in-clay-pot\" /\u0026gt;\u003cbr\u003e\u0026lt;img src=\"//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-green-pot_300x300.jpg\" alt=\"plant-in-green-pot\" /\u0026gt;\u003cbr\u003e\u0026lt;img src=\"//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-white-pot_300x300.jpg\" alt=\"plant-in-white-pot\" /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eLoops are really useful and something you will encounter daily in your theme development. Outputting images and product variants are two commonly found examples.\u003c/p\u003e\n\u003cp class=\"marketing-block marketing-block--light marketing-block--padded\"\u003e\u003cstrong\u003eYou might also like:\u003c/strong\u003e \u003ca target=\"_blank\" href=\"https://www.shopify.com/partners/blog/shopify-mobile-logos\" rel=\"noopener noreferrer\"\u003eHow to Use Shopify Theme Settings to Create Mobile-Specific Logos\u003c/a\u003e.\u003c/p\u003e\n\u003ch3\u003eLiquid filters\u003c/h3\u003e\n\u003cp\u003eAnother very powerful feature of Liquid are output filters, which I used in the code example above. Filters serve three main purposes:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eThey manipulate output data in some way\u003c/li\u003e\n\u003cli\u003eThey allow our themes to be agnostic\u003c/li\u003e\n\u003cli\u003eThey save theme designers time by reducing the amount of code we need to write\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eFilters are always used in conjunction with a Liquid output. Let's have a look at some filters starting with the \u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e filter.\u003c/p\u003e\n\u003cp\u003eWhen outputting a blog post, you'll likely want to let the reader know when it was published:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;p class=\"date-time\"\u0026gt;{{ article.published_at | date: '%d %B %Y' }}\u0026lt;/p\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eAs before you'll notice the \u003ccode class=\"marketing-code\"\u003e|\u003c/code\u003e character (often referred to as a pipe) in the middle of the output tag. On the left side of the pipe, we have the \u003ccode class=\"marketing-code\"\u003earticle\u003c/code\u003e object with its associated \u003ccode class=\"marketing-code\"\u003epublished_at\u003c/code\u003e property, and on the right we have the \u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e filter with an argument to denote the date format—in this case \u003ccode class=\"marketing-code\"\u003e'%d %B %Y'\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eWithout the filter, Shopify would simply output the date the blog article was published at in the format it is stored in the database—which may not be humanly readable. However, by adding in the \u003ccode class=\"marketing-code\"\u003e|\u003c/code\u003e and including the \u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e filter, we can manipulate the format so it outputs in a format we want.\u003c/p\u003e\n\u003cp\u003ePut simply, filters allow us to take a piece of data from our store and change it. What we start with on the left hand side gets \"piped\" through our filter and emerges on the right hand sized changed. It's this final manipulated data that is then output on the front end of the theme.\u003c/p\u003e\n\u003cp\u003eHere's another example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{{ 'style.css' | asset_url | stylesheet_tag }}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eHere we are using two filters with the ultimate aim of creating a fully formed style element in a layout file.\u003c/p\u003e\n\u003cp\u003eWe start on the left with the name of the our CSS file, which resides in the assets folder. Next we apply our first filter—in this case the \u003ccode class=\"marketing-code\"\u003easset_url\u003c/code\u003e filter. This is an incredibly useful filter and one you'll use a lot. \u003c/p\u003e\n\u003cp\u003eI mentioned before how Shopify themes, thanks to Liquid, are agnostic. They don't need to have any knowledge of the store they are working against and the same theme can be applied to multiple stores. However, this can cause issues when trying to reference assets as we need a way of knowing where a certain asset (image, JS file, CSS file) is on the network.\u003c/p\u003e\n\u003cp\u003eThankfully the \u003ccode class=\"marketing-code\"\u003easset_url\u003c/code\u003e comes to our rescue. By using this filter, Shopify will return the fully qualified path to the assets folder for the theme and append the name of our asset at the end. Just remember it won't actually check that the file exists—it's up to us to ensure that the first part of the tag, in our case \u003ccode class=\"marketing-code\"\u003estyle.css\u003c/code\u003e is in the assets folder.\u003c/p\u003e\n\u003cp\u003eHere's how that might look when output:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e//cdn.shopify.com/s/files/1/0222/9076/assets/style.css\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe final filter in the chain, \u003ccode class=\"marketing-code\"\u003estylesheet_tag\u003c/code\u003e, takes the URL and wraps it in a style element which is then output in our layout file. Here's the final result:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;link href= \"//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/style.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThere are many really useful filters, here are just a few you'll find yourself using:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003easset_url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003estylesheet_tag\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003escript_tag\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003epluralize\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003ereplace\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003ehandle\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003emoney\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003emoney_with_currency\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimg_url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003elink_to\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eLiquid logic\u003c/h2\u003e\n\u003cp\u003eThe final aspect of Liquid we need to look at is logic. Here's an example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% if product.available %}\u003cbr\u003e \u0026lt;h2\u0026gt;Price: £99.99\u0026lt;/h2\u0026gt;\u003cbr\u003e{% else %}\u003cbr\u003e \u0026lt;h2 class=\"sold-out\"\u0026gt;Sorry - sold out\u0026lt;/h2\u0026gt;\u003cbr\u003e{% endif %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIn this snippet, we are controlling the output to our liquid file using a simple \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e, \u003ccode class=\"marketing-code\"\u003eelse\u003c/code\u003e, \u003ccode class=\"marketing-code\"\u003eendif\u003c/code\u003e statement. In many ways, \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e statements are like questions. Depending on the answer to the question a different piece of markup will be output—or in some cases no markup at all.\u003c/p\u003e\n\u003cp\u003eIn the above example, if the answer to our \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e statement question is true (\u003ccode class=\"marketing-code\"\u003eproduct.available\u003c/code\u003e returns true or false), we render the words \"This product is available.\" If it's false, our Liquid file carries on and outputs the text following our \u003ccode class=\"marketing-code\"\u003e{% else %}\u003c/code\u003e clause—in this case \"Sorry, this product is sold out.\"\u003c/p\u003e\n\u003cp\u003eAnother way of looking at logic is that it allows us to control the flow of a page and ultimately make decisions on which data is displayed. It's worth noting that unlike output tags, the inclusion of logic tags in your Liquid files does not result in anything being directly rendered—rather they allow us to control exactly what is rendered.\u003c/p\u003e\n\u003cp\u003eYou will find yourself using \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e statements a lot in Shopify theme development. Here's another example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% if cart.item_count \u0026gt; 0 %}\u003cbr\u003e \u0026lt;p\u0026gt;You have {{ cart.item_count }} item(s) in your cart\u0026lt;/p\u0026gt;\u003cbr\u003e{% else %}\u003cbr\u003e \u0026lt;p\u0026gt;There's nothing in your cart :( Why not have a \u0026lt;a href= \"/products\"\u0026gt; look at our product range\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\u003cbr\u003e{% endif %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis snippet demonstrates how you can either display the number of items in a visitor’s cart or output a link to your products.\u003c/p\u003e\n\u003ch2\u003eOperators\u003c/h2\u003e\n\u003cp\u003eYou'll notice in this example we are using the greater than \u003ccode class=\"marketing-code\"\u003e\u0026gt;\u003c/code\u003e operator. As the \u003ccode class=\"marketing-code\"\u003ecart.item_count\u003c/code\u003e variable returns the number of items in the current users cart, we can check to see if it is greater than zero, i.e. it has items in it.\u003c/p\u003e\n\u003cp\u003eIf this returns \u003ccode class=\"marketing-code\"\u003etrue\u003c/code\u003e we can output the message with the current item count, if not we can output:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;p\u0026gt;There's nothing in your cart :( Why not have a \u0026lt;a href= \"/products\"\u0026gt;look at our product range\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt; instead.\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eWe could actually refactor our example with a filter. By using the pluralize filter we can output \"item\" or \"items\" depending on the number of items in the cart. The bonus here is that we don't have to know the count in order for Shopify to output the right designation:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% if cart.item_count \u0026gt; 0 %}\u003cbr\u003e \u0026lt;p\u0026gt;You have {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} in your cart\u0026lt;/p\u0026gt;\u003cbr\u003e{% else %}\u003cbr\u003e \u0026lt;p\u0026gt;There's nothing in your cart :( Why not have a \u0026lt;a href= \"/products\"\u0026gt;look at our product range\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\u003cbr\u003e{% endif %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eYou'll notice that the refactored example now includes the \u003ccode class=\"marketing-code\"\u003epluralize\u003c/code\u003e filter which takes two parameters. The first is the singular word and the second the plural.\u003c/p\u003e\n\u003cp\u003eWhile we have used the \u003ccode class=\"marketing-code\"\u003e\u0026gt;\u003c/code\u003e operator in the above example, there are a wide range of \u003ca href=\"https://help.shopify.com/en/themes/liquid/basics/operators\"\u003ecomparison operators\u003c/a\u003e in Liquid including:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e==\u003c/code\u003e equal to\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e!=\u003c/code\u003e not equal to\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026gt;\u003c/code\u003e greater than\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026lt;\u003c/code\u003e less than\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026gt;=\u003c/code\u003e bigger or equal\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026lt;=\u003c/code\u003e less or equal\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003eor\u003c/code\u003e this or that\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003eand\u003c/code\u003e must be this and that\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003econtains\u003c/code\u003e includes the substring if used on a string, or element if used on an array\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eBy default, even if your Liquid code doesn’t have output, Liquid in a template will still render an empty line in the final HTML. Whitespace control in Liquid enables you to remove this. By using a hyphen in your tag syntax, \u003ccode class=\"marketing-code\"\u003e{{-\u003c/code\u003e , \u003ccode class=\"marketing-code\"\u003e-}}\u003c/code\u003e , \u003ccode class=\"marketing-code\"\u003e{%-\u003c/code\u003e , and \u003ccode class=\"marketing-code\"\u003e-%}\u003c/code\u003e, you can strip whitespace from the left or right side of a rendered tag.\u003c/p\u003e\n\u003ch2\u003eLiquid cheat sheet\u003c/h2\u003e\n\u003cp\u003eIf you are anything like me, you'll have a hard time committing all these Liquid filters, operators, and structures to memory. Thankfully, the \u003ca href=\"https://www.shopify.com/partners/shopify-cheat-sheet\"\u003eShopify Liquid Cheat Sheet\u003c/a\u003e is available to search all the Liquid objects, tags, and filters, view simple examples, and visit the reference documentation. It's an indispensable resource, which I strongly encourage you to bookmark and become familiar with.\u003c/p\u003e\n\u003ch2\u003eLiquid code examples\u003c/h2\u003e\n\u003cp\u003eVery often we learn through example, so seeing how to implement popular theme components is a great way to learn about how Shopify themes work. The \u003ca href=\"https://shopify.github.io/liquid-code-examples/\"\u003eShopify Liquid Code Examples\u003c/a\u003e is a library of theme components that help to inform how various Liquid objects, properties, and filters work together as part of elements within a store.\u003c/p\u003e\n\u003ch2\u003eSummary\u003c/h2\u003e\n\u003cp\u003eWe've covered a lot of ground in this article, but hopefully it has given you a solid introduction to Liquid. Here's a reminder of what we covered:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eLiquid is a template language that allows us to display data in a template\u003c/li\u003e\n\u003cli\u003eLiquid has constructs such as output, logic, loops and deals with variables\u003c/li\u003e\n\u003cli\u003eLiquid files are a mixture of HTML and Liquid code, and have the \u003ccode class=\"marketing-code\"\u003e.liquid\u003c/code\u003e file extension\u003c/li\u003e\n\u003cli\u003eLiquid files used in a Shopify theme are agnostic and have no concept of the store they are currently being used in\u003c/li\u003e\n\u003cli\u003eThe two types of delimiters used in Liquid\u003c/li\u003e\n\u003cli\u003eHow to output data from a store in a Liquid file\u003c/li\u003e\n\u003cli\u003eHow to manipulate data with filters\u003c/li\u003e\n\u003cli\u003eHow to loop over a Liquid collection to output multiple items\u003c/li\u003e\n\u003cli\u003eThe use of logic in a Liquid file\u003c/li\u003e\n\u003cli\u003eThe different types of operators used for comparison\u003c/li\u003e\n\u003cli\u003eHow to control whitespace in Liquid\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWant to learn more about building themes for Shopify or your clients? You can learn more about Liquid concepts and how to use it in your own theme development in the \u003ca href=\"https://help.shopify.com/themes/liquid\"\u003eShopify docs\u003c/a\u003e. \u003c/p\u003e\n\u003cdiv data-partners-signup=\"service_partner\"\u003e\u003c/div\u003e\n\u003cp\u003e \u003c/p\u003e","excerpt":"Liquid is Shopify’s templating language. In this article, learn how to get started with Liquid, including how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates.","excerptHtml":"\u003ca href=\"https://www.shopify.com/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language?utm_source=exacttarget\u0026amp;utm_medium=email\u0026amp;utm_campaign=blog\u0026amp;utm_content=partner_blog-2020-01-29\"\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154\" alt=\"Shopify liquid\"\u003e\u003c/a\u003e\n\u003cp\u003eLiquid is Shopify’s templating language. In this article, learn how to get started with Liquid, including how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates.\u003c/p\u003e","seo":{"__typename":"SEO","title":null,"description":"Liquid is Shopify's templating language. Learn how it fits into Shopify theme building, and the core concepts that will help you build ecommerce templates.\n"},"metafields":[null,null,null,null,{"__typename":"Metafield","value":"[{\"title\":\"How to Build a Shopify App: The Complete Guide\",\"url\":\"partners/blog/how-to-build-a-shopify-app\"},{\"title\":\"Introducing Online Store 2.0: What it Means For Developers\",\"url\":\"partners/blog/shopify-online-store\"},{\"title\":\"How to Use Liquid to Create Custom Landing Page Templates\",\"url\":\"partners/blog/landing-page\"},{\"title\":\"How to Build a Shopify App as a Front End Developer\",\"url\":\"partners/blog/front-end-app\"},{\"title\":\"Using JavaScript To Super Power Your Client's Shopify Site\",\"url\":\"partners/blog/28500611-using-javascript-to-super-power-your-clients-shopify-site\"},{\"title\":\"Introduction to Shopify Theming for WordPress Theme Developers\",\"url\":\"partners/blog/introduction-to-shopify-theming-for-wordpress-theme-developers\"},{\"title\":\"Top Tips for Building Themes That Are Fully Featured, Like Customizing Shopify’s Best Free Themes\",\"url\":\"partners/blog/best-free-themes\"},{\"title\":\"How the Routes and Page_Image Liquid Objects Can Help You Build More Robust Themes\",\"url\":\"partners/blog/liquid-objects\"}]","key":"interlinkings_json"},null,{"__typename":"Metafield","value":"[{\"title\":\"10 Beautiful Ecommerce Website Color Schemes\",\"tags\":[\"Web Design Tools and Resources\"],\"handle\":\"93130630-10-beautiful-ecommerce-website-color-schemes\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/website-color-schemes_aa512fdf-91cb-4a30-8fa2-3d2c88d28cf1.jpg?v=1566309308\u0026width=1024\",\"imageAltText\":\"website color schemes\",\"modifiedAt\":\"2019-08-20\"},{\"title\":\"How to Build a Shopify App: The Complete Guide\\n\",\"tags\":[\"Shopify App Development\"],\"handle\":\"how-to-build-a-shopify-app\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/how-to-build-a-shopify-app.jpg?v=1614173396\u0026width=1024\",\"imageAltText\":\"How to build a Shopify app\",\"modifiedAt\":\"2021-02-24\"},{\"title\":\"15 Funny Lorem Ipsum Generators to Shake Up Your Design Mockups\",\"tags\":[\"Web Design Tools and Resources\"],\"handle\":\"79940998-15-funny-lorem-ipsum-generators-to-shake-up-your-design-mockups\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/lorem-ipsum-generator.jpg?v=1555505887\u0026width=1024\",\"imageAltText\":\"lorem ipsum generator\",\"modifiedAt\":\"2019-04-17\"},{\"title\":\"20 Memorable Web Design Portfolio Examples to Inspire Your Own Website\",\"tags\":[\"Inspiration \u0026 Creativity\"],\"handle\":\"web-design-portfolio-inspiration\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/web-design-portfolio-inspiration.jpg?v=1503509907\u0026width=1024\",\"imageAltText\":\"Web design portfolio inspiration\",\"modifiedAt\":\"2019-05-01\"},{\"title\":\"Inclusive Design: 12 Ways to Design for Everyone\",\"tags\":[\"Web Design\"],\"handle\":\"inclusive-design\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/inclusive-design.jpg?v=1521725383\u0026width=1024\",\"imageAltText\":\"inclusive design\",\"modifiedAt\":\"2018-03-23\"},{\"title\":\"How to Manipulate Images with the img_url Filter\",\"tags\":[\"Learning Liquid\"],\"handle\":\"img-url-filter\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/img-url-filter.jpg?v=1515074624\u0026width=1024\",\"imageAltText\":\"img url filter\",\"modifiedAt\":\"2018-01-04\"},{\"title\":\"Create a Marketplace in Less than 8 Minutes with Shopify’s Marketplace Kit\",\"tags\":[\"Shopify News\"],\"handle\":\"shopify-marketplace-kit\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/Partner_blog_hero_image.png?format=webp\u0026v=1655890916\u0026width=1024\",\"imageAltText\":\"Shopify Marketplace Kit hero image\",\"modifiedAt\":\"2022-05-13\"},{\"title\":\"Introducing Online Store 2.0: What it Means For Developers\",\"tags\":[\"Shopify News\"],\"handle\":\"shopify-online-store\",\"imageUrl\":\"https://cdn.shopify.com/s/files/1/0533/2089/files/shopify-online-store.jpg?v=1624557750\u0026width=1024\",\"imageAltText\":\"shopify online store\",\"modifiedAt\":\"2021-01-29\"}]","key":"popular_blog_post_json"}],"imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154","imageAltText":"Shopify liquid","modifiedAt":"30 Jan 2020","modifiedAtRaw":"2020-01-30T03:00:00Z"},"metaDescription":"Liquid is Shopify's templating language. Learn how it fits into Shopify theme building, and the core concepts that will help you build ecommerce templates.\n","contentHtml":"\u003cimg src=\"//cdn.shopify.com/s/files/1/0533/2089/files/Shopify-liquid.jpg?v=1585598279\" alt=\"Shopify liquid\" href=\"https://cdn.shopify.com/s/files/1/0533/2089/files/Shopify-liquid.jpg?v=1585598279\"\u003e\n\u003cp\u003eIf you are new to the Shopify platform and read through our content, you might be wondering what all the references to Liquid actually refer to. In this article, we'll explain all you need to know about Liquid, how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates. Let's begin with a little history.\u003c/p\u003e\n\u003cp\u003eLiquid was developed by Shopify co-founder and CEO Tobias Lütke and is now available as an \u003ca href=\"https://github.com/Shopify/liquid\" rel=\"nofollow noopener noreferrer\" target=\"_blank\"\u003eopen source project on GitHub\u003c/a\u003e. Today, it's used in many different software projects, from content management systems to static site generators—and of course, Shopify.\u003c/p\u003e\n\n\u003ch2\u003eLiquid: language or engine?\u003c/h2\u003e\n\u003cp\u003eSome refer to Liquid as a template language, while others may call it a template engine. It doesn't really matter which label you apply—in many ways both are right. Personally, I like to call it a template language. It has a syntax (like traditional programming languages), has concepts such as output, logic, and loops, and it interacts with variables (data), just as you would with a web-centric language such as PHP.\u003c/p\u003e\n\u003cp\u003eHowever, that's really where the similarities end. There's a lot you can't do with Liquid—by design. For example, it has no concept of \"state,\" it doesn't let you get deep under the covers of the platform, and can occasionally seem counter intuitive for seasoned coders. However, it has been very well thought out and what might at first seem like a limitation is usually intended, and for good reason.\u003c/p\u003e\n\u003cdiv class=\"marketing-block marketing-block--light marketing-block--padded border-t-2 px-8 py-10 my-12 [\u0026amp;_h2]:!mt-0 [\u0026amp;_h2]:mb-6 [\u0026amp;_h2]:text-t5 [\u0026amp;_h3]:!mt-0 [\u0026amp;_h3]:mb-6 [\u0026amp;_h3]:text-t7 [\u0026amp;_h4]:!mt-0 [\u0026amp;_h4]:mb-6 [\u0026amp;_h4]:text-t8 [\u0026amp;_img]:my-auto [\u0026amp;_p]:!mt-0 [\u0026amp;_p]:mb-6 [\u0026amp;_p]:text-body-sm [\u0026amp;_.heading--4]:text-t6 [\u0026amp;_.marketing-button]:text-white [\u0026amp;_.marketing-button]:no-underline border-partners-highlight\" data-component-name=\"blog-cta-marketing\"\u003e\n\u003cp class=\"heading--4\"\u003eExplore Shopify Liquid Code Examples\u003c/p\u003e\n\u003cp\u003eVisit our searchable library of Liquid code examples based around theme components. Learn how various Liquid objects, properties, and filters work together as part of components within a theme. Add them directly into themes to build and customize themes faster and more reliably.\u003c/p\u003e\n\u003ca class=\"marketing-button marketing-button--small\" target=\"_blank\" href=\"https://shopify.github.io/liquid-code-examples\" rel=\"nofollow noopener noreferrer\"\u003eVisit Shopify Liquid Code Examples\u003c/a\u003e\n\u003c/div\u003e\n\u003ch2\u003eLiquid's function\u003c/h2\u003e\n\u003cp\u003eLiquid, like any template language, creates a bridge between an HTML file and a data store—in our context, the data is of course a Shopify store. It does this by allowing us to access variables from within a template, or Liquid file, with a simple to use and readable syntax.\u003c/p\u003e\n\u003cp\u003eIn Shopify, each Liquid file allows us to access certain variables without having to do any heavy lifting. For example, the \u003ccode class=\"marketing-code\"\u003eproduct.liquid\u003c/code\u003e template allows us access to all the details relating to the currently viewed product. Liquid, in turn, allows us to output this data without having to know anything about the actual product itself. These variables are known as template variables. You can also use Liquid to retrieve data that isn't made available to us. For example, you can ask Shopify to populate a variable you create with all the products in a particular collection.\u003c/p\u003e\n\u003cp\u003eOnce we know the names of the variables we have access to or create, we can use Liquid constructs such as \"output\" and \"loops\" to display the data in our Liquid files.\u003c/p\u003e\n\u003cp\u003eThe Shopify platform understands what data to retrieve, and how to display it depending on the Liquid code you have in your theme. It might be a simple case of displaying the name of a product or something slightly more complex, such as showcasing a series of product images.\u003c/p\u003e\n\u003cp\u003eThe great benefit of a template language such as Liquid is that you, as the designer, don't need to know anything about the store data itself. As such, your themes are 100 percent agnostic and can be applied to multiple stores without any knowledge of the stores content.\u003c/p\u003e\n\u003cp class=\"marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [\u0026amp;_h2]:!mt-0 [\u0026amp;_h2]:mb-6 [\u0026amp;_h2]:text-t5 [\u0026amp;_h3]:!mt-0 [\u0026amp;_h3]:mb-6 [\u0026amp;_h3]:text-t7 [\u0026amp;_h4]:!mt-0 [\u0026amp;_h4]:mb-6 [\u0026amp;_h4]:text-t8 [\u0026amp;_ul]:!mt-0 [\u0026amp;_ul]:mb-6 [\u0026amp;_ul:last-child]:mb-0 [\u0026amp;_ol]:!mt-0 [\u0026amp;_ol]:mb-6 [\u0026amp;_ol:last-child]:mb-0 [\u0026amp;_p]:!mt-0 [\u0026amp;_p]:mb-6 [\u0026amp;_p:last-child]:mb-0 border-partners-highlight\"\u003e\u003cstrong\u003eYou might also like:\u003c/strong\u003e \u003ca target=\"_blank\" href=\"/id/partners/blog/front-end-development-tools\"\u003eThe 8 Best Free Shopify Resources and Tools for Front-End Developers\u003c/a\u003e.\u003c/p\u003e\n\u003ch2\u003eLiquid's file extension and delimiters\u003c/h2\u003e\n\u003cp\u003eLiquid files have the extension of \u003ccode class=\"marketing-code\"\u003e.liquid\u003c/code\u003e. A liquid file is a mix of standard HTML code and Liquid constructs. It's an easy to read syntax, and is easy to distinguish from HTML when working with a Liquid file. This is made even easier thanks to the use of two sets of delimiters.\u003c/p\u003e\n\u003cp\u003eThe double curly brace delimiters \u003ccode class=\"marketing-code\"\u003e{{ }}\u003c/code\u003e denote output, and the curly brace percentage delimiters \u003ccode class=\"marketing-code\"\u003e{% %}\u003c/code\u003e denote logic. You'll become very familiar with these as every Liquid construct begins with one or the other.\u003c/p\u003e\n\u003cp\u003eAnother way of thinking of delimiters is as \"placeholders.\" A placeholder can be viewed as a piece of code that will ultimately be replaced by data when the compiled theme is sent to the browser. This data is determined entirely by the theme designer as a result of the Liquid code in the Liquid file. As such, Liquid themes, much like templates that inter splice PHP and HTML, serve as representations of what will be rendered.\u003c/p\u003e\n\u003ch3\u003eOutput\u003c/h3\u003e\n\u003cp\u003eLet's examine the syntax for \"output.\" As the name suggests, output in Liquid will literally output a piece of data from our store onto a page.\u003c/p\u003e\n\u003cp\u003eHere's a quick example of an output placeholder that you will typically find in the \u003ccode class=\"marketing-code\"\u003eproduct.liquid\u003c/code\u003e file:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;h2\u0026gt;{{ product.title }}\u0026lt;/h2\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eWhen rendered, this would output the name of the currently viewed product in place of the \u003ccode class=\"marketing-code\"\u003e{{ }}\u003c/code\u003e, for example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;h2\u0026gt;American Diner Mug\u0026lt;/h2\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eOutput, unless manipulated with a filter (which we will look at shortly) is simply a case of replacing the entire placeholder with a text string from your store.\u003c/p\u003e\n\u003cdiv data-partners-signup=\"service_partner\"\u003e\u003c/div\u003e\n\u003ch2\u003eObjects and properties\u003c/h2\u003e\n\u003cp\u003eThis example also introduces us to the Liquid dot syntax. This is common in many template and server side languages. Taking our \u003ccode class=\"marketing-code\"\u003eshop.name\u003c/code\u003e example we can break it up into two parts.\u003c/p\u003e\n\u003cp\u003eThe first element preceding the \u003ccode class=\"marketing-code\"\u003e.\u003c/code\u003e is the object—in this case, it is the \u003ccode class=\"marketing-code\"\u003eshop\u003c/code\u003e object. This is a variable that represents all the data relating to the shop that we have defined in the Shopify admin. These data items include:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.city\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.country\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.country_upper\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.province\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.province_code\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.street\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.summary\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.address.zip\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.collections_count\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.currency\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.description\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.domain\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.email\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.enabled_currencies\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.enabled_payment_types\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.metafields\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.money_format\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.money_with_currency_format\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.name\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.password_message\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.permanent_domain\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.phone\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.policies\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.privacy_policy\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.products_count\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.published_locales\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.refund_policy\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.shipping_policy\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.terms_of_service\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.secure_url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.taxes_included\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.types\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.vendors\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe items following the \u003ccode class=\"marketing-code\"\u003e.\u003c/code\u003e represent properties of the shop object. A property could be as simple as the name of the store (as per our example above) or it could be a list of items, such as the kinds of payment types enabled in the store.\u003c/p\u003e\n\u003cp class=\"marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [\u0026amp;_h2]:!mt-0 [\u0026amp;_h2]:mb-6 [\u0026amp;_h2]:text-t5 [\u0026amp;_h3]:!mt-0 [\u0026amp;_h3]:mb-6 [\u0026amp;_h3]:text-t7 [\u0026amp;_h4]:!mt-0 [\u0026amp;_h4]:mb-6 [\u0026amp;_h4]:text-t8 [\u0026amp;_ul]:!mt-0 [\u0026amp;_ul]:mb-6 [\u0026amp;_ul:last-child]:mb-0 [\u0026amp;_ol]:!mt-0 [\u0026amp;_ol]:mb-6 [\u0026amp;_ol:last-child]:mb-0 [\u0026amp;_p]:!mt-0 [\u0026amp;_p]:mb-6 [\u0026amp;_p:last-child]:mb-0 border-partners-highlight\"\u003e\u003cstrong\u003eYou might also like:\u003c/strong\u003e \u003ca target=\"_blank\" href=\"/id/partners/blog/the-ultimate-list-of-resources-for-shopify-theme-developers\"\u003eThe Essential List of Resources for Shopify Theme Development\u003c/a\u003e.\u003c/p\u003e\n\u003ch2\u003eCollection properties\u003c/h2\u003e\n\u003cp\u003eYou will notice from the list above that a number of the properties are plural, e.g:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.enabled_payment_types\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.metafields\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eshop.types\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThese properties represent Liquid collections. Instead of returning a string of data such as the name of the shop they will return an array of data — in other words, a list of items we can access via a Liquid loop.\u003c/p\u003e\n\u003cp\u003eWhen first using Shopify and Liquid, it's easy to get confused by collections—I certainly did. I will therefore refer to \"product collections\" and \"Liquid collections.\" The former being a logical grouping of products defined in the Shopify Admin, and the latter being a list of items we can access in Liquid code.\u003c/p\u003e\n\u003cp\u003eFinally, it's worth saying that each one of the list items in our Liquid collection can also have properties. A good example of this is \u003ccode class=\"marketing-code\"\u003eproduct.images\u003c/code\u003e. This represents a list of all the images that have been added to a particular product.\u003c/p\u003e\n\u003cp\u003eEach of the images in the list has multiple properties associated with it:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.alt\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.aspect_ratio\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.attached_to_variant?\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.height\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.id\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.media_type\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.position\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.preview_image\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.product_id\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.src\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.variants\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimage.width\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eIn order to access these properties, we have to use a Liquid loop.\u003c/p\u003e\n\u003ch2\u003eLiquid loops\u003c/h2\u003e\n\u003cp\u003eLoops are used extensively in Shopify themes, and are thankfully very easy to understand. If you have done any form of basic programming, the concept of loops will likely be very familiar to you.\u003c/p\u003e\n\u003cp\u003eUsing a loop, often known as a \u003ccode class=\"marketing-code\"\u003efor loop\u003c/code\u003e, allows us to output the same piece of code a known number of times in our Liquid file. As mentioned above, a typical example would be to output all the images associated with a product.\u003c/p\u003e\n\u003cp\u003eLet's have a look at an example using the \u003ccode class=\"marketing-code\"\u003eproduct.images\u003c/code\u003e Liquid collection I discussed earlier.\u003c/p\u003e\n\u003cp\u003eOur aim with this loop is to output all of the images for a particular product. Here's a very simplistic loop that will output each image inline:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% for image in product.images %}\u003cbr\u003e \u0026lt;img src=\"{{ image | img_url: '300x300' }}\"\u0026gt;\u003cbr\u003e{% endfor %}\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eLet's break it down into steps to fully understand it.\u003c/p\u003e\n\n\u003ch3\u003eStep 1\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% for image in product.images %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe first line introduces us to the second style of delimiter, the curly brace percentage syntax \u003ccode class=\"marketing-code\"\u003e{% %}\u003c/code\u003e. Here, we are using a Liquid \u003ccode class=\"marketing-code\"\u003efor\u003c/code\u003e loop. Loops work with Liquid collections, and allow us to iterate over each item in our list in turn. If the product we are currently viewing had six images associated with it, our \u003ccode class=\"marketing-code\"\u003efor\u003c/code\u003e loop would loop six times, if it had 10 then it would loop 10 times, and so on. Only once every list item has been looked at (or unless we instruct it otherwise), will the next part of the page be considered.\u003c/p\u003e\n\u003cp\u003eIt's worth noting that unless we specifically ask how big our loop will be, we don't know how many loops will occur—only that Liquid will go through every item in our list, in turn. The loop will finish after the last iteration, and it's at this point that the page will carry on with its processing.\u003c/p\u003e\n\u003cp\u003eIn order to access the properties of each list item, we designate a variable to represent the current item in the loop. In our example above it is \u003ccode class=\"marketing-code\"\u003eimage\u003c/code\u003e. While this is an obvious choice, and will help other designers understand your logic in the future, it can literally be anything. For example, we could use \u003ccode class=\"marketing-code\"\u003ealltheimagesintheworld\u003c/code\u003e, in which case it would look as follows:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% for alltheimagesintheworld in product.images %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis is of course a silly example to make a point—image makes much more sense, but I just wanted to emphasize the fact that this variable has no relation to the Liquid collection.\u003c/p\u003e\n\u003ch3\u003eStep 2\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;img src=\"{{ image | img_url: '300x300' }}\" /\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe second line of our code example consists of part HTML and part Liquid. You'll also notice that the \u003ccode class=\"marketing-code\"\u003esrc\u003c/code\u003e attribute is populated with a Liquid output tag.\u003c/p\u003e\n\u003cp\u003eThis introduces us to the concept of filters which are denoted by the \u003ccode class=\"marketing-code\"\u003e|\u003c/code\u003e (pipe) character—we'll look at these in more detail shortly. In our example, the filter is taking the image variable (the current item in our loop) and is specifying the dimensions, in pixels, the image should be displayed.\u0026nbsp;\u003c/p\u003e\n\u003cp\u003eWe'll look at filters, denoted by the | character, next, but suffice to say that the parameters we define will populate the \u003ccode class=\"marketing-code\"\u003esrc\u003c/code\u003e attribute with a fully qualified URL to the current image in our list. The filter does all the work of creating the \u003ccode class=\"marketing-code\"\u003esrc\u003c/code\u003e attribute for us.\u003c/p\u003e\n\u003ch3\u003eStep 3\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% endfor %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe final line of our example is our closing \u003ccode class=\"marketing-code\"\u003eendfor\u003c/code\u003e statement. This tells the template to carry on after all the loops have been executed.\u003c/p\u003e\n\u003cp\u003eIf we had three images in our \u003ccode class=\"marketing-code\"\u003eproduct.images\u003c/code\u003e object, the final output would look something like this:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;img src=\"//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-clay-pot_300x300.jpg\" alt=\"plant-in-clay-pot\" /\u0026gt;\u003cbr\u003e\u0026lt;img src=\"//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-green-pot_300x300.jpg\" alt=\"plant-in-green-pot\" /\u0026gt;\u003cbr\u003e\u0026lt;img src=\"//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-white-pot_300x300.jpg\" alt=\"plant-in-white-pot\" /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eLoops are really useful and something you will encounter daily in your theme development. Outputting images and product variants are two commonly found examples.\u003c/p\u003e\n\u003cp class=\"marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [\u0026amp;_h2]:!mt-0 [\u0026amp;_h2]:mb-6 [\u0026amp;_h2]:text-t5 [\u0026amp;_h3]:!mt-0 [\u0026amp;_h3]:mb-6 [\u0026amp;_h3]:text-t7 [\u0026amp;_h4]:!mt-0 [\u0026amp;_h4]:mb-6 [\u0026amp;_h4]:text-t8 [\u0026amp;_ul]:!mt-0 [\u0026amp;_ul]:mb-6 [\u0026amp;_ul:last-child]:mb-0 [\u0026amp;_ol]:!mt-0 [\u0026amp;_ol]:mb-6 [\u0026amp;_ol:last-child]:mb-0 [\u0026amp;_p]:!mt-0 [\u0026amp;_p]:mb-6 [\u0026amp;_p:last-child]:mb-0 border-partners-highlight\"\u003e\u003cstrong\u003eYou might also like:\u003c/strong\u003e \u003ca target=\"_blank\" href=\"/id/partners/blog/shopify-mobile-logos\"\u003eHow to Use Shopify Theme Settings to Create Mobile-Specific Logos\u003c/a\u003e.\u003c/p\u003e\n\u003ch3\u003eLiquid filters\u003c/h3\u003e\n\u003cp\u003eAnother very powerful feature of Liquid are output filters, which I used in the code example above. Filters serve three main purposes:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eThey manipulate output data in some way\u003c/li\u003e\n\u003cli\u003eThey allow our themes to be agnostic\u003c/li\u003e\n\u003cli\u003eThey save theme designers time by reducing the amount of code we need to write\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eFilters are always used in conjunction with a Liquid output. Let's have a look at some filters starting with the \u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e filter.\u003c/p\u003e\n\u003cp\u003eWhen outputting a blog post, you'll likely want to let the reader know when it was published:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;p class=\"date-time\"\u0026gt;{{ article.published_at | date: '%d %B %Y' }}\u0026lt;/p\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eAs before you'll notice the \u003ccode class=\"marketing-code\"\u003e|\u003c/code\u003e character (often referred to as a pipe) in the middle of the output tag. On the left side of the pipe, we have the \u003ccode class=\"marketing-code\"\u003earticle\u003c/code\u003e object with its associated \u003ccode class=\"marketing-code\"\u003epublished_at\u003c/code\u003e property, and on the right we have the \u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e filter with an argument to denote the date format—in this case \u003ccode class=\"marketing-code\"\u003e'%d %B %Y'\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eWithout the filter, Shopify would simply output the date the blog article was published at in the format it is stored in the database—which may not be humanly readable. However, by adding in the \u003ccode class=\"marketing-code\"\u003e|\u003c/code\u003e and including the \u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e filter, we can manipulate the format so it outputs in a format we want.\u003c/p\u003e\n\u003cp\u003ePut simply, filters allow us to take a piece of data from our store and change it. What we start with on the left hand side gets \"piped\" through our filter and emerges on the right hand sized changed. It's this final manipulated data that is then output on the front end of the theme.\u003c/p\u003e\n\u003cp\u003eHere's another example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{{ 'style.css' | asset_url | stylesheet_tag }}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eHere we are using two filters with the ultimate aim of creating a fully formed style element in a layout file.\u003c/p\u003e\n\u003cp\u003eWe start on the left with the name of the our CSS file, which resides in the assets folder. Next we apply our first filter—in this case the \u003ccode class=\"marketing-code\"\u003easset_url\u003c/code\u003e filter. This is an incredibly useful filter and one you'll use a lot.\u0026nbsp;\u003c/p\u003e\n\u003cp\u003eI mentioned before how Shopify themes, thanks to Liquid, are agnostic. They don't need to have any knowledge of the store they are working against and the same theme can be applied to multiple stores. However, this can cause issues when trying to reference assets as we need a way of knowing where a certain asset (image, JS file, CSS file) is on the network.\u003c/p\u003e\n\u003cp\u003eThankfully the \u003ccode class=\"marketing-code\"\u003easset_url\u003c/code\u003e comes to our rescue. By using this filter, Shopify will return the fully qualified path to the assets folder for the theme and append the name of our asset at the end. Just remember it won't actually check that the file exists—it's up to us to ensure that the first part of the tag, in our case \u003ccode class=\"marketing-code\"\u003estyle.css\u003c/code\u003e is in the assets folder.\u003c/p\u003e\n\u003cp\u003eHere's how that might look when output:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e//cdn.shopify.com/s/files/1/0222/9076/assets/style.css\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe final filter in the chain, \u003ccode class=\"marketing-code\"\u003estylesheet_tag\u003c/code\u003e, takes the URL and wraps it in a style element which is then output in our layout file. Here's the final result:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;link href= \"//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/style.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThere are many really useful filters, here are just a few you'll find yourself using:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003easset_url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003estylesheet_tag\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003escript_tag\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003edate\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003epluralize\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003ereplace\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003ehandle\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003emoney\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003emoney_with_currency\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003eimg_url\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"marketing-code\"\u003elink_to\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eLiquid logic\u003c/h2\u003e\n\u003cp\u003eThe final aspect of Liquid we need to look at is logic. Here's an example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% if product.available %}\u003cbr\u003e \u0026lt;h2\u0026gt;Price: £99.99\u0026lt;/h2\u0026gt;\u003cbr\u003e{% else %}\u003cbr\u003e \u0026lt;h2 class=\"sold-out\"\u0026gt;Sorry - sold out\u0026lt;/h2\u0026gt;\u003cbr\u003e{% endif %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIn this snippet, we are controlling the output to our liquid file using a simple \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e, \u003ccode class=\"marketing-code\"\u003eelse\u003c/code\u003e, \u003ccode class=\"marketing-code\"\u003eendif\u003c/code\u003e statement. In many ways, \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e statements are like questions. Depending on the answer to the question a different piece of markup will be output—or in some cases no markup at all.\u003c/p\u003e\n\u003cp\u003eIn the above example, if the answer to our \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e statement question is true (\u003ccode class=\"marketing-code\"\u003eproduct.available\u003c/code\u003e returns true or false), we render the words \"This product is available.\" If it's false, our Liquid file carries on and outputs the text following our \u003ccode class=\"marketing-code\"\u003e{% else %}\u003c/code\u003e clause—in this case \"Sorry, this product is sold out.\"\u003c/p\u003e\n\u003cp\u003eAnother way of looking at logic is that it allows us to control the flow of a page and ultimately make decisions on which data is displayed. It's worth noting that unlike output tags, the inclusion of logic tags in your Liquid files does not result in anything being directly rendered—rather they allow us to control exactly what is rendered.\u003c/p\u003e\n\u003cp\u003eYou will find yourself using \u003ccode class=\"marketing-code\"\u003eif\u003c/code\u003e statements a lot in Shopify theme development. Here's another example:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% if cart.item_count \u0026gt; 0 %}\u003cbr\u003e \u0026lt;p\u0026gt;You have {{ cart.item_count }} item(s) in your cart\u0026lt;/p\u0026gt;\u003cbr\u003e{% else %}\u003cbr\u003e \u0026lt;p\u0026gt;There's nothing in your cart :( Why not have a \u0026lt;a href= \"/products\"\u0026gt; look at our product range\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\u003cbr\u003e{% endif %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis snippet demonstrates how you can either display the number of items in a visitor’s cart or output a link to your products.\u003c/p\u003e\n\u003ch2\u003eOperators\u003c/h2\u003e\n\u003cp\u003eYou'll notice in this example we are using the greater than \u003ccode class=\"marketing-code\"\u003e\u0026gt;\u003c/code\u003e operator. As the \u003ccode class=\"marketing-code\"\u003ecart.item_count\u003c/code\u003e variable returns the number of items in the current users cart, we can check to see if it is greater than zero, i.e. it has items in it.\u003c/p\u003e\n\u003cp\u003eIf this returns \u003ccode class=\"marketing-code\"\u003etrue\u003c/code\u003e we can output the message with the current item count, if not we can output:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e\u0026lt;p\u0026gt;There's nothing in your cart :( Why not have a \u0026lt;a href= \"/products\"\u0026gt;look at our product range\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt; instead.\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eWe could actually refactor our example with a filter. By using the pluralize filter we can output \"item\" or \"items\" depending on the number of items in the cart. The bonus here is that we don't have to know the count in order for Shopify to output the right designation:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"marketing-code marketing-code--block\"\u003e{% if cart.item_count \u0026gt; 0 %}\u003cbr\u003e \u0026lt;p\u0026gt;You have {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} in your cart\u0026lt;/p\u0026gt;\u003cbr\u003e{% else %}\u003cbr\u003e \u0026lt;p\u0026gt;There's nothing in your cart :( Why not have a \u0026lt;a href= \"/products\"\u0026gt;look at our product range\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\u003cbr\u003e{% endif %}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eYou'll notice that the refactored example now includes the \u003ccode class=\"marketing-code\"\u003epluralize\u003c/code\u003e filter which takes two parameters. The first is the singular word and the second the plural.\u003c/p\u003e\n\u003cp\u003eWhile we have used the \u003ccode class=\"marketing-code\"\u003e\u0026gt;\u003c/code\u003e operator in the above example, there are a wide range of \u003ca href=\"https://help.shopify.com/en/themes/liquid/basics/operators\"\u003ecomparison operators\u003c/a\u003e in Liquid including:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e==\u003c/code\u003e equal to\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e!=\u003c/code\u003e not equal to\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026gt;\u003c/code\u003e greater than\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026lt;\u003c/code\u003e less than\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026gt;=\u003c/code\u003e bigger or equal\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003e\u0026lt;=\u003c/code\u003e less or equal\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003eor\u003c/code\u003e this or that\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003eand\u003c/code\u003e must be this and that\u003c/li\u003e\n\u003cli\u003e\n\u003ccode class=\"marketing-code\"\u003econtains\u003c/code\u003e includes the substring if used on a string, or element if used on an array\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eBy default, even if your Liquid code doesn’t have output, Liquid in a template will still render an empty line in the final HTML. Whitespace control in Liquid enables you to remove this. By using a hyphen in your tag syntax, \u003ccode class=\"marketing-code\"\u003e{{-\u003c/code\u003e , \u003ccode class=\"marketing-code\"\u003e-}}\u003c/code\u003e , \u003ccode class=\"marketing-code\"\u003e{%-\u003c/code\u003e , and \u003ccode class=\"marketing-code\"\u003e-%}\u003c/code\u003e, you can strip whitespace from the left or right side of a rendered tag.\u003c/p\u003e\n\u003ch2\u003eLiquid cheat sheet\u003c/h2\u003e\n\u003cp\u003eIf you are anything like me, you'll have a hard time committing all these Liquid filters, operators, and structures to memory. Thankfully, the \u003ca href=\"/partners/shopify-cheat-sheet\"\u003eShopify Liquid Cheat Sheet\u003c/a\u003e is available to search all the Liquid objects, tags, and filters, view simple examples, and visit the reference documentation. It's an indispensable resource, which I strongly encourage you to bookmark and become familiar with.\u003c/p\u003e\n\u003ch2\u003eLiquid code examples\u003c/h2\u003e\n\u003cp\u003eVery often we learn through example, so seeing how to implement popular theme components is a great way to learn about how Shopify themes work. The \u003ca href=\"https://shopify.github.io/liquid-code-examples\" rel=\"nofollow noopener noreferrer\" target=\"_blank\"\u003eShopify Liquid Code Examples\u003c/a\u003e is a library of theme components that help to inform how various Liquid objects, properties, and filters work together as part of elements within a store.\u003c/p\u003e\n\u003ch2\u003eSummary\u003c/h2\u003e\n\u003cp\u003eWe've covered a lot of ground in this article, but hopefully it has given you a solid introduction to Liquid. Here's a reminder of what we covered:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eLiquid is a template language that allows us to display data in a template\u003c/li\u003e\n\u003cli\u003eLiquid has constructs such as output, logic, loops and deals with variables\u003c/li\u003e\n\u003cli\u003eLiquid files are a mixture of HTML and Liquid code, and have the \u003ccode class=\"marketing-code\"\u003e.liquid\u003c/code\u003e file extension\u003c/li\u003e\n\u003cli\u003eLiquid files used in a Shopify theme are agnostic and have no concept of the store they are currently being used in\u003c/li\u003e\n\u003cli\u003eThe two types of delimiters used in Liquid\u003c/li\u003e\n\u003cli\u003eHow to output data from a store in a Liquid file\u003c/li\u003e\n\u003cli\u003eHow to manipulate data with filters\u003c/li\u003e\n\u003cli\u003eHow to loop over a Liquid collection to output multiple items\u003c/li\u003e\n\u003cli\u003eThe use of logic in a Liquid file\u003c/li\u003e\n\u003cli\u003eThe different types of operators used for comparison\u003c/li\u003e\n\u003cli\u003eHow to control whitespace in Liquid\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWant to learn more about building themes for Shopify or your clients? You can learn more about Liquid concepts and how to use it in your own theme development in the \u003ca href=\"https://help.shopify.com/themes/liquid\"\u003eShopify docs\u003c/a\u003e.\u0026nbsp;\u003c/p\u003e\n\u003cdiv data-partners-signup=\"service_partner\"\u003e\u003c/div\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\u003cdiv id=\":R0:\" data-component-name=\"blog-read-more\" class=\"marketing-block marketing-block--light marketing-block--padded text-body-sm text-left my-8 tablet:my-16 p-8 bg-marketingBg border-t-2 [\u0026amp;_h2]:text-t5 border-partners-highlight\"\u003e\u003ch2 class=\"!mt-0 mb-6 font-aktivgroteskextended\"\u003eRead more\u003c/h2\u003e\u003cul class=\"!mt-0 !mb-0\"\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/how-to-build-a-shopify-app\"\u003eHow to Build a Shopify App: The Complete Guide\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/shopify-online-store\"\u003eIntroducing Online Store 2.0: What it Means For Developers\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/landing-page\"\u003eHow to Use Liquid to Create Custom Landing Page Templates\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/front-end-app\"\u003eHow to Build a Shopify App as a Front End Developer\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/28500611-using-javascript-to-super-power-your-clients-shopify-site\"\u003eUsing JavaScript To Super Power Your Client's Shopify Site\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/introduction-to-shopify-theming-for-wordpress-theme-developers\"\u003eIntroduction to Shopify Theming for WordPress Theme Developers\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/best-free-themes\"\u003eTop Tips for Building Themes That Are Fully Featured, Like Customizing Shopify’s Best Free Themes\u003c/a\u003e\u003c/li\u003e\u003cli class=\"mt-2\"\u003e\u003ca href=\"/id/partners/blog/liquid-objects\"\u003eHow the Routes and Page_Image Liquid Objects Can Help You Build More Robust Themes\u003c/a\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/div\u003e","latestArticles":[],"contentNavigationLinks":[],"blogHandle":"partners","settings":{"topSectionImages":[{"src":"https://cdn.shopify.com/b/shopify-brochure2-assets/2ecdaa09da44408d3c2a2b9cba3a2c07.png?originalWidth=1005\u0026originalHeight=1288"},{"src":"https://cdn.shopify.com/b/shopify-brochure2-assets/8262a99b5702f964162106b94a23ad2d.png?originalWidth=1005\u0026originalHeight=1288"},{"src":"https://cdn.shopify.com/b/shopify-brochure2-assets/16db235a9390238e6f9b8fd2a5c29680.png?originalWidth=1005\u0026originalHeight=1288"}],"images":{"guides-modal-default":"https://cdn.shopify.com/shopifycloud/brochure/assets/content-marketing/blog/guides/default-popup-small-507879111d55acdd759b202ab869ea0b8bd0f4af9f9aaa7c540efe59b8e046db.jpg","guides-modal-photography":"https://cdn.shopify.com/b/shopify-brochure2-assets/1bd4b072dc187a774c9af650d0f16d0b.jpg","guides-modal-seo":"https://cdn.shopify.com/b/shopify-brochure2-assets/63781344c2932de6e553a54b02291692.jpg","subscription":{"image":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420\u0026originalHeight=1040"}},"rightColSideBannerImg":"https://cdn.shopify.com/b/shopify-brochure2-assets/c8790c0f3c1fa91ccc845e45ce067bbe.png","articleNavigation":{"banner":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/e570727d45209fec56c410f802faa0fe.png"}}},"subscription":{"settings":{"subscriptionId":"DE84EF61-2A02-4778-8807-F01B108DE974"}}},"shareImage":"https://cdn.shopify.com/s/files/1/0533/2089/files/header.jpg?v=1580305154","availableRegions":["en-ID","en-ca","en-gb","en-au","en-id","en-nz","en-za","en-ng","en-ph","en-sg","en-hk","en-ie","en-my"],"popularArticles":[{"title":"10 Beautiful Ecommerce Website Color Schemes","tags":["Web Design Tools and Resources"],"handle":"93130630-10-beautiful-ecommerce-website-color-schemes","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/website-color-schemes_aa512fdf-91cb-4a30-8fa2-3d2c88d28cf1.jpg?v=1566309308\u0026width=1024","imageAltText":"website color schemes","modifiedAt":"2019-08-20"},{"title":"How to Build a Shopify App: The Complete Guide\n","tags":["Shopify App Development"],"handle":"how-to-build-a-shopify-app","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/how-to-build-a-shopify-app.jpg?v=1614173396\u0026width=1024","imageAltText":"How to build a Shopify app","modifiedAt":"2021-02-24"},{"title":"15 Funny Lorem Ipsum Generators to Shake Up Your Design Mockups","tags":["Web Design Tools and Resources"],"handle":"79940998-15-funny-lorem-ipsum-generators-to-shake-up-your-design-mockups","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/lorem-ipsum-generator.jpg?v=1555505887\u0026width=1024","imageAltText":"lorem ipsum generator","modifiedAt":"2019-04-17"},{"title":"20 Memorable Web Design Portfolio Examples to Inspire Your Own Website","tags":["Inspiration \u0026 Creativity"],"handle":"web-design-portfolio-inspiration","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/web-design-portfolio-inspiration.jpg?v=1503509907\u0026width=1024","imageAltText":"Web design portfolio inspiration","modifiedAt":"2019-05-01"},{"title":"Inclusive Design: 12 Ways to Design for Everyone","tags":["Web Design"],"handle":"inclusive-design","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/inclusive-design.jpg?v=1521725383\u0026width=1024","imageAltText":"inclusive design","modifiedAt":"2018-03-23"},{"title":"How to Manipulate Images with the img_url Filter","tags":["Learning Liquid"],"handle":"img-url-filter","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/img-url-filter.jpg?v=1515074624\u0026width=1024","imageAltText":"img url filter","modifiedAt":"2018-01-04"},{"title":"Create a Marketplace in Less than 8 Minutes with Shopify’s Marketplace Kit","tags":["Shopify News"],"handle":"shopify-marketplace-kit","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/Partner_blog_hero_image.png?format=webp\u0026v=1655890916\u0026width=1024","imageAltText":"Shopify Marketplace Kit hero image","modifiedAt":"2022-05-13"},{"title":"Introducing Online Store 2.0: What it Means For Developers","tags":["Shopify News"],"handle":"shopify-online-store","imageUrl":"https://cdn.shopify.com/s/files/1/0533/2089/files/shopify-online-store.jpg?v=1624557750\u0026width=1024","imageAltText":"shopify online store","modifiedAt":"2021-01-29"}],"hreflangs":[{"tagName":"link","rel":"alternate","hreflang":"en-ID","href":"https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-ca","href":"https://www.shopify.com/ca/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-gb","href":"https://www.shopify.com/uk/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-au","href":"https://www.shopify.com/au/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-id","href":"https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-nz","href":"https://www.shopify.com/nz/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-za","href":"https://www.shopify.com/za/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-ng","href":"https://www.shopify.com/ng/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-ph","href":"https://www.shopify.com/ph/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-sg","href":"https://www.shopify.com/sg/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-hk","href":"https://www.shopify.com/hk/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-ie","href":"https://www.shopify.com/ie/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"},{"tagName":"link","rel":"alternate","hreflang":"en-my","href":"https://www.shopify.com/my/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language"}],"url":"https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","canonicalUrl":"https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","rootDomain":"shopify.com","experimentVariationId":"","realCountryCode":"SG","geoCountryCode":"","regionCode":"","site":{"domain":"www.shopify.co.id","countryCode":"ID","hreflang":"en-ID","locale":"en-ID","baseEnDomain":true,"currencyCode":"IDR","features":["blog","editions","facebook_instagram","google","lite_plan","starter_plan","plus","localized_help_center","pos","sitemap_blog","sitemap_blog_retail","sitemap_enterprise","sitemap_tools","support_24_7","google_buy","global_page_title"],"pathPrefix":"id","languageCode":"en"},"fileRoutePath":"/partners/blog/$article","regions":[{"domain":"www.shopify.co.id","href":"https://www.shopify.com/au/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-AU","label":"Australia","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/be-de","hreflang":"de-BE","label":"Belgium","lang":"de","base":false,"selector":false,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/be-en","hreflang":"en-BE","label":"Belgium","lang":"en","base":false,"selector":false,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/be-fr","hreflang":"fr-BE","label":"Belgium","lang":"fr","base":false,"selector":false,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/be","hreflang":"nl-BE","label":"Belgium","lang":"nl","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/br","hreflang":"pt","label":"Brasil","lang":"pt","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/ca/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-CA","label":"Canada (English)","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/ca-fr","hreflang":"fr-CA","label":"Canada (Français)","lang":"fr","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/cz","hreflang":"cs","label":"Česká republika","lang":"cs","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/co","hreflang":"es-CO","label":"Colombia","lang":"es","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/dk","hreflang":"da","label":"Danmark","lang":"da","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/dk-en","hreflang":"en-DK","label":"Denmark","lang":"en","base":false,"selector":false,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/de","hreflang":"de","label":"Deutschland","lang":"de","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/es-es","hreflang":"es-ES","label":"España","lang":"es","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/es","hreflang":"es","label":"Español (Intl.)","lang":"es","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/fr","hreflang":"fr","label":"France","lang":"fr","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/hk-en/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-HK","label":"Hong Kong SAR","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/in/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-IN","label":"India","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/id/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-ID","label":"Indonesia","lang":"en","base":false,"selector":true,"isActive":true,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/ie/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-IE","label":"Ireland","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/it","hreflang":"it","label":"Italia","lang":"it","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/my/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-MY","label":"Malaysia","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/mx","hreflang":"es-MX","label":"México","lang":"es","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/nl","hreflang":"nl","label":"Nederland","lang":"nl","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/nz/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-NZ","label":"New Zealand","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/ng/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-NG","label":"Nigeria","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/no","hreflang":"nb","label":"Norge","lang":"nb","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/no-en","hreflang":"en-NO","label":"Norway (English)","lang":"en","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/ph/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-PH","label":"Philippines","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/pl","hreflang":"pl","label":"Polska","lang":"pl","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/pt","hreflang":"pt-PT","label":"Portugal","lang":"pt-PT","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/sg/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-SG","label":"Singapore","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/za/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-ZA","label":"South Africa","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/fi","hreflang":"fi","label":"Suomi","lang":"fi","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/se","hreflang":"sv","label":"Sverige","lang":"sv","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/tr","hreflang":"tr","label":"Türkiye","lang":"tr","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/uk/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en-GB","label":"United Kingdom","lang":"en","base":false,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","hreflang":"en","label":"USA","lang":"en","base":true,"selector":true,"isActive":false,"published":true},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/th","hreflang":"th","label":"ไทย","lang":"th","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/kr","hreflang":"ko","label":"대한민국","lang":"ko","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/tw","hreflang":"zh-Hant-TW","label":"台灣","lang":"zh-Hant","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/jp","hreflang":"ja-JP","label":"日本","lang":"ja","base":false,"selector":true,"isActive":false,"published":false},{"domain":"www.shopify.co.id","href":"https://www.shopify.com/zh","hreflang":"zh-Hans","label":"简体中文","lang":"zh-Hans","base":false,"selector":true,"isActive":false,"published":false}],"enPath":"/partners/blog/115244038-an-overview-of-liquid-shopifys-templating-language","handle":"partners-article","geoPricingIsEnabled":false,"editMode":false,"translations":{"en-ID":{"global":{},"pages/partners/blog/$article/settings":{},"pages/partners/blog/$article/content":{},"pages/partners/blog/blogSubNav":{}},"en":{"global":{"argoPlaceholder":"2","ariaLabels":{"close":"Close","carousel":{"name":"carousel","slide":"slide","xOfY":"{x} of {y}","play":"Play carousel","pause":"Pause carousel"},"footer":{"regionsNav":"Region Navigation","regionsClose":"Close Region Navigation","newWindow":"Opens an external site in a new window"},"header":{"mobileNavMenu":"Menu","mainNav":"Main","secondaryNav":"Related pages","skipToContent":"Skip to Content"},"headerLight":{"dismissIcon":"Dismiss banner"},"learnMore":"Learn more about {title}","link":{"external":"External source: ","newWindow":" (Opens in a new window)","label":"{{external}}{{title}}{{newWindow}}"},"logoGroup":"Logos","modal":{"close":"Close modal","pip":"Picture in picture"},"next":"Next","previous":"Previous","current":"Current","pagination":{"previous":"Previous page","next":"Next page"},"shopifyLogo":"Shopify logo","shopifyPartnersLogo":"Shopify partners logo","testimonial":{"controls":"Navigate testimonials","plural":"Testimonials","next":"Next Testimonial","previous":"Previous Testimonial","play":"Play Testimonial","pause":"Pause Testimonial"},"videoModal":"video","video":{"play":"Play video","pause":"Pause video"}},"incentivesPromoBanner":{"app_store_credit":"\u003ca href=\"{{signupUrl}}\"\u003eJoin Shopify and get $50 USD to use in the Shopify App Store. \u003c/a\u003e\u003ca id=\"incentivesTermsLink\" target=\"_blank\" data-component-name=\"acquisition-incentive-terms\" href=\"{{incentiveTerms}}\"/\u003eTerms apply\u003c/a\u003e","gpv_acquisition_incentive_flag":"Join today and get up to \u003ca id=\"showTermsLink\" target=\"_blank\" data-component-name=\"sales-bonus-terms\" href=\"{{incentiveTerms}}\"/ style=\"color: inherit; font-weight: normal\"\u003e$5,000 in cash rebates\u003c/a\u003e on your first six months of sales","retail":{"spRateTermsLink":"\u0026nbsp\u003ca id=\"spIncentivesTermsLink\" target=\"_blank\" class=\"!font-normal\" target=\"_blank\" data-component-name=\"sp-incentive-terms\" href=\"{{incentiveTerms}}\"/\u003eTerms apply\u003c/a\u003e","subscriptionIncentive":"Special offer: get 6 months of POS Pro for {{incentivePrice}}/month","spRateIncentive":"Get {{rate}}% card rates on up to {{gpvLimit}} USD of in-person sales during your first {{length}} months.","spRateIncentiveTerms":"Terms apply","cardReaderDiscountIncentive":"Get a free card reader when you pick a plan.","cardReaderDiscountIncentiveTerms":"Terms apply"},"gmv_rewards":"\u003ca href=\"{{signupUrl}}\" style=\"text-decoration: none; font-size: 16px\"\u003e\u003cb\u003eOffer: earn 1% of all sales\u003c/b\u003e as subscription credits, up to {{maxPayoutCap}}.\u003c/a\u003e \u003ca id=\"incentiveLearnMoreLink\" href=\"{{learnMore}}\" style=\"font-size: 16px\"\u003eLearn more\u003c/a\u003e"},"cookiesNotice":{"acceptAllButtonText":"Accept all","activeConsentContentHtml":"We use cookies (and other similar technologies) for many purposes, including to improve your experience on our site and for ads and analytics. Click \"Accept all\" to accept these uses. Read more in our \u003ca href=\"{{legalCookiesPath}}\"\u003eCookie Policy\u003c/a\u003e.","buttonText":"OK","contentHtml":"Shopify uses cookies to provide necessary site functionality and improve your experience. By using our website, you agree to our \u003ca href=\"{{legalPrivacyPath}}\"\u003ePrivacy Policy\u003c/a\u003e and our \u003ca href=\"{{legalCookiesPath}}\"\u003eCookie Policy\u003c/a\u003e.","rejectAllButtonText":"Reject all"},"countries":{"au":"Australia","be":"Belgium","br":"Brazil","ca":"Canada","cn":"China","co":"Colombia","cz":"Czech Republic","dk":"Denmark","en":"USA","es":"Spain","de":"Germany","fi":"Finland","fr":"France","gb":"UK","hk":"Hong Kong SAR","id":"Indonesia","ie":"Ireland","in":"India","it":"Italy","jp":"Japan","kr":"Korea","my":"Malaysia","mx":"Mexico","ng":"Nigeria","nl":"Netherlands","no":"Norway","nz":"New Zealand","ph":"Philippines","pl":"Poland","pt":"Portugal","se":"Sweden","sg":"Singapore","th":"Thailand","tr":"Turkey","tw":"Taiwan","vn":"Vietnam","za":"South Africa"},"downloadApp":{"androidAlt":"Get the Shopify app on Google Play","androidUrl":"https://shopify.com/install/android","iosAlt":"Download the Shopify app on the Apple App Store","iosUrl":"https://shopify.com/install/mobile","qrCodeAlt":"QR code to download from","qrTitle":"Scan to install"},"downloadposApp":{"androidAlt":"Get the Shopify POS Mobile app on Google Play","androidUrl":"https://play.google.com/store/apps/details?id=com.shopify.pos","iosAlt":"Download the Shopify POS Mobile app on the Apple App Store","iosUrl":"https://apps.apple.com/us/app/shopify-point-of-sale-pos/id686830644","qrCodeAlt":"QR code to download from","qrTitle":"Scan or click below to install"},"forms":{"fields":{"country":{"label":"Country","placeholder":"Select one","error":"Please select a country"}}},"globalNav":{"applyText":"Apply for early access","applyTextPlain":"Apply for access","getStarted":"Get started","headerPdfCta":"Download document","headerPdfCtaLink":"https://cdn.shopify.com/static/Shopify-Guide_PDF.pdf","homeUrl":"{{home}}","loginGetStartedText":"Log in to get started","loginText":"Log in","loginUrl":"/login","signinText":"Sign in","signupText":"Start free trial","signupTextFree":"Sign up free","signupTextPlain":"Sign up","searchText":"Search","searchPlaceholder":"Type something you're looking for","searchPlaceholderMobile":"Search","signUpButtonText":"Get in touch","sharedBottomBar":{"shopify":"Shopify","shopifyDesc":"Platform for entrepreneurs \u0026 SMBs","plus":"Plus","plusDesc":"A commerce solution for growing digital brands","enterprise":"Enterprise","enterpriseDesc":"Solutions for the world’s largest brands"}},"showLess":"Show less","showMore":"Show more","home":"{{home}}","learnMore":"Learn more","plans":{"pricingFaqAnswerWithDiscount":"We offer a 25% discount for yearly subscriptions if you choose the Basic, Shopify, or Advanced plans. If you choose a 3-year Shopify Plus plan, we offer a monthly discount and lower online variable platform fees."},"sell":{"header":"Explore your options","title":"Apps that help you sell {{vertical}}","subheading":"Some popular apps other merchants use","seeRecommendedApps":"See more recommended apps","by":"By {{partner}}"},"shopify":"Shopify","pagination":{"page":"Page"},"signup":{"buttonText":"Start free trial","plusButtonText":"Get in touch","buttonText_fr":"Launch your store","label":"Email address","placeholder":"Enter your email address","disclaimerHtml":"Try Shopify free for {{trialLength}} days, no credit card\u0026nbsp;required. By entering your email, you agree to receive marketing emails\u0026nbsp;from\u0026nbsp;Shopify.","disclaimerNoLengthHtml":"No credit card required. By entering your email, you agree to receive marketing emails\u0026nbsp;from\u0026nbsp;Shopify.","testimonialButtonText":"Try Shopify free for {{trialLength}} days","freeTrialCtaHtml":"Try Shopify for free, and explore all the tools and services you need to start, run, and grow your\u0026nbsp;business.","signupPaidTrialPromo":{"default_one":"Get {{trialLength}} days free then 1 month for {{paidTrialAmount}}.","default_other":"Start for free, then get your first {{count}} months for {{paidTrialAmount}}/mo.","disclaimer":"By entering your email, you agree to receive marketing emails\u0026nbsp;from\u0026nbsp;Shopify.","disclaimerNoEmail_one":"Don’t have a Shopify store? \u003ca href=\"{{deeplinkFreeTrial}}\" data-component-name=\"{{deeplinkFreeTrialName}}\"\u003eStart free, then get your first month for {{paidTrialAmount}}.\u003c/a\u003e","disclaimerNoEmail_other":"Don’t have a Shopify store? \u003ca href=\"{{deeplinkFreeTrial}}\" data-component-name=\"{{deeplinkFreeTrialName}}\"\u003eStart for free, then get your first {{count}} months for {{paidTrialAmount}}/mo.\u003c/a\u003e"}},"social":{"facebook":{"text":"Facebook","url":"https://www.facebook.com/shopify","url_de":"https://www.facebook.com/shopifyDE","url_jp":"https://www.facebook.com/ShopifyJP"},"twitter":{"text":"Twitter","url":"https://twitter.com/shopify","url_jp":"https://twitter.com/ShopifyJP"},"youtube":{"text":"YouTube","url":"https://www.youtube.com/user/shopify","url_de":"https://www.youtube.com/c/ShopifyDeutsch","url_fr":"https://www.youtube.com/c/ShopifyFrançais","url_it":"https://www.youtube.com/c/ShopifyItaliano","url_jp":"https://www.youtube.com/c/ShopifyJapan","url_nl":"https://www.youtube.com/c/ShopifyNederlands","url_br":"https://www.youtube.com/c/ShopifyBrasil"},"instagram":{"text":"Instagram","url":"https://www.instagram.com/shopify/"},"tiktok":{"text":"TikTok","url":"https://www.tiktok.com/@shopify"},"linkedin":{"text":"LinkedIn","url":"https://www.linkedin.com/company/shopify"},"pinterest":{"text":"Pinterest","url":"https://www.pinterest.com/shopify/","url_jp":"https://www.pinterest.com/shopifyjp/"},"email":{"text":"Email","url":"mailto:"}},"tableOfContents":"Table of Contents","totalApps":6000,"totalThemes":70,"supportedLanguages":50,"totalGateways":100,"totalStores":1700000,"uptime":99.98,"waitlistForm":{"errors":{"general":"Something went wrong, try again later","emailFormat":"Email is formatted incorrectly"},"successMessage":"Done","placeholder":"Enter your email address","buttonText":"Signup"},"editionsEyebrow":{"text":"Shopify Editions | Summer ’24 is live"},"sectionErrorBoundary":{"message":"This content is not loading due to a technical problem"},"nav":{"about":"About Shopify","academy":"Shopify Academy","allFeatures":"All features","allProducts":"All Products","allProductsDescription":"Explore all Shopify products \u0026 features","appStore":"Find business apps","appStoreDescription":"Shopify app store","b2b":"Sell wholesale \u0026 direct","b2bDescription":"Business-to-business (B2B)","balance":"Balance","banking":"Banking","billPay":"Bill Pay","blog":"Blog","blogEnterprise":"Enterprise Blog","blogMerchants":"Merchant Blog","blogRetail":"Retail Blog","borrowing":"Borrowing","branding":"Branding","brandingDescriptionV2":"Build your brand from scratch","brandingFlyoutDescription":"Look professional and help customers connect with your business","build":"Build","burst":"Free stock photos","businessEncyclopedia":"Business encyclopedia","businessFunding":"Secure business funding","businessFundingDescription":"Shopify Capital","businessGrowth":"Business growth","businessGrowthDescription":"Scale your business","businessNameGenerator":"Business name generator ","businessPlanTemplate":"Business plan template","businessTypes":"Business Types","buyButton":"Buy Button","buyButtonDescription":"Transform an existing website or blog into an online store","buyButtonSubnav":"Explore Buy Button","capital":"Capital","capitalLoansAndCashAdvances":"Large retailer funding","capitalSmallBusiness":"Small business funding","cdiscount":"Cdiscount","changelog":"Changelog","changelogDescription":"Your source for recent updates","checkout":"Checkout","checkoutDescription":"Provide fast, smooth checkout experiences","checkoutDescriptionV2":"World-class checkout","checkoutV2":"Check out customers","commerceComponents":"Enterprise","commerceComponentsDescription":"Solutions for the world's largest brands","community":"Community","communityEvents":"Community Events","compareToPlus":"Compare to Plus","compass":"Business courses","compassDescription":"Learn from proven experts","calculator":"Cost calculator","credit":"Credit","ctaAlt":"Free Trial","docs":"Docs","customerInsights":"Know your audience","customerInsightsDescription":"Gain customer insights","customization":"Customization","domains":"Domains","domainsAndHosting":"Own your site domain","domainsAndHostingDescription":"Domains \u0026 hosting","dropshipping":"Dropshipping","ecommerce":"Online store","ecommerceDescription":"Online store editor","ecommerceSeo":"Ecommerce SEO","ecommerceSeoDescription":"Improve your search ranking","ecommerceV2":"Create your website","editions":"Editions","editionsAll":"All Editions","editionsAllDescription":"Archive of past Shopify Editions","editionsCurrent":"Winter ’24 Edition","editionsLast":"Summer ’24 Edition","editionsLastDescription":"The latest 100+ product updates","emailMarketing":"Email marketing","encyclopedia":"Encyclopedia","essentialTools":"Essential tools","examples":"Examples","exchange":"Websites for sale","experts":"Experts","facebook":"Facebook Shops","facebookAds":"Facebook Ads","facebookInstagram":"Facebook \u0026 Instagram","faq":"FAQ","features":"Features","financesManagement":"Manage your finances \u0026 access funding","financesManagementDescription":"Shopify Finance","flow":"Ecommerce automation","flowDescription":"Shopify Flow","flowV2":"Automate your business","forums":"Shopify Community","founderStories":"Founder stories","founderStoriesDescription":"Learn from successful merchants","fraudProtection":"Fraud Protection","freeBusinessTools":"Explore free business tools","freeBusinessToolsDescription":"Tools to run your business","freeTools":"Free tools","fulfillment":"Fulfillment","fulfillmentDescription":"Shopify Fulfillment Network","fulfillmentV2":"Outsource fulfillment \u0026 returns","getStarted":"Start free trial","getInTouch":"Get in touch","google":"Google","googleSmart":"Google","googleYoutube":"Google \u0026 Youtube","guides":"Guides","hardware":"Hardware","hardwareStore":"Hardware store","helpAndSupport":"Help and support","helpAndSupportDescription":"Get 24/7 support","helpCenter":"Help Center","howToGuides":"How-to guides","howToGuidesDescription":"Read in-depth business guides","impressumGenerator":"Impressum-Generator","inbox":"Business chat","inboxDescription":"Turn browsers into buyers","inboxDescriptionV2":"Shopify Inbox","inboxV2":"Chat with customers","instagram":"Instagram","installments":"Installments","internationalSales":"International sales","internationalSalesDescription":"Sell globally","inventoryOrderManagement":"Manage your stock \u0026 orders","inventoryOrderManagementDescription":"Inventory \u0026 order management","joinNow":"Join Now","learn":"Learn","lending":"Lending","linkInBioTool":"Link in bio tool","login":"Log in","logoMaker":"Logo maker","manage":"Manage","manageEverything":"Manage everything","manageYourBusiness":"Manage your business","manageYourBusinessDescription":"Track sales, orders \u0026 analytics","market":"Market","marketDescription":"Market your business","marketDescriptionV2":"Reach \u0026 retain customers","marketing":"Marketing","marketingAutomation":"Marketing automation","marketingDescription":"Build a marketing plan","marketingTools":"Marketing tools","marketingToolsDescription":"Ads, email campaigns, and more","marketplaces":"Online marketplaces","markets":"International commerce","marketsDescription":"Reach buyers in new markets with international selling tools","measureYourPerformance":"Measure your performance","measureYourPerformanceDescription":"Analytics and Reporting","midMarket":"Mid-market","migrateToShopify":"Migrate to Shopify","migrateToShopifyDescription":"Compare to other platforms","mobileApp":"Mobile app","mobileAppDescription":"Respond in real time","moneyManagement":"Get paid faster","moneyManagementDescription":"Shopify Balance","more":"More","newsroom":"Newsroom","newsroomDescription":"All company news and press releases","onlineFlyoutDescription":"Find a domain, explore stock images, and amplify your brand","onlinePresence":"Online presence","onlineStoreDescription":"Sell online with an ecommerce website","omnichannel":"Omnichannel selling","orderManagementAndFulfillment":"Order management and delivery","overview":"Overview","partners":"Partners","payments":"Payment processing","paymentsDescription":"Set up forms of payment","paymentsOverview":"Overview","paymentsV2":"Accept online payments","pillarDropdownCta":"Get started","ping":"Shopify Ping","plus":"Plus","plusPricing":"Plus Pricing","podcasts":"Podcasts","pointOfSale":"Point of Sale","pointOfSaleDescription":"Point of Sale (POS)","pointOfSaleV2":"Sell in person","popularTopics":"Popular topics","pos":"Shopify POS","posPricing":"POS Pricing","posSystemSmallBusiness":"Small business POS","posMultiStore":"Multi-store POS","posInventorySystem":"POS inventory system","posAndroid":"Android POS","posIpad":"iPad POS","posApp":"POS App","posSoftware":"POS Software","pricing":"Pricing","pricingOverview":"Pricing overview","productSourcing":"Product sourcing","productSourcingDescription":"Find products to sell","productsToSell":"Products to sell","qrCodeGenerator":"QR code generator","rakuten":"Rakuten","research":"Research","resources":"Resources","retail":"Retail POS","retailDescription":"Sell at retail locations, pop-ups, and beyond","salesChannels":"Sales channels","salesChannelsDescription":"Reach millions of shoppers and boost sales","salesChannelsDescriptionV2":"Channels for social \u0026 marketplaces","salesChannelsV2":"Sell across channels","segmentation":"Customer groups","sell":"Sell","sellEverywhere":"Sell everywhere","sellOnline":"Sell online","sellOnlineDescription":"Grow your business online","sellYourProducts":"Sell your products","sellYourProductsDescription":"Sell online or in person","shipping":"Shipping","shippingDescription":"Fulfill orders faster","shippingDescriptionV2":"Shopify Shipping","shippingV2":"Ship orders faster","inventoryDescription":"Inventory management","shop":"Shop","shopPay":"Shop Pay","shopifyBlog":"Shopify blog","shopifyBlogDescription":"Business strategy tips","shopifyCaseStudies":"Case Studies","shopifyCaseStudiesDescription":"Learn from successful merchants","shopifyComparison":"Shopify comparison","shopifyComparisonDescription":"Comparison with other platforms","shopifyMigration":"Migrate to Shopify","shopifyMigrationDescription":"Migration checklists, guides and tools","shopifyDevelopers":"Shopify Developers","shopifyDevelopersDescription":"Build with Shopify's powerful APIs","shopifyEditions":"Shopify Editions","shopifyEditionsDescription":"New, innovative Shopify products","shopifyEmail":"Nurture customers","shopifyEmailDescription":"Shopify Email","shopifyFinance":"Shopify Finance","shopifyGold":"Enterprise","shopifyOnlineStore":"Shopify Online store","shopifyPlus":"Enterprise","shopifyPlusDescription":"A commerce solution for growing digital brands","shopifyPointOfSale":"Shopify Point of Sale","shopifySite":"shopify.com","shopifyVsBigCommerce":"Shopify vs. BigCommerce","shopifyVsSalesforce":"Shopify vs. Salesforce","shopifyVsSquare":"Shopify vs. Square","signup":"Sign up","social":"Social media","socialDescription":"Social media integrations","socialMediaStrategy":"Social media strategy","socialMediaStrategyDescription":"Turn social into sales","socialV2":"Market across social","solutions":"Solutions","staffManagement":"Staff management","start":"Start","startYourBusiness":"Start your business","startYourBusinessDescription":"Build your brand","stockPhotography":"Stock photography","storeSetup":"Store set up","storeSetupDescription":"Use Shopify’s powerful features to start selling","storeThemes":"Store themes","storeThemesDescription":"Customize your store","successStories":"Success stories","tax":"Tax","termLoans":"Term Loans","themeStore":"Theme store","themes":"Themes","tiktok":"TikTok","upgradeToPlus":"Upgrade to Plus","videos":"Videos","walmart":"Walmart Marketplace","waysToSell":"Ways to sell","webAddress":"Domain name","websiteBuilder":"Website Builder","whatIsShopify":"What is Shopify?","whatIsShopifyDescription":"How our commerce platform works","whatsNew":"What’s new","youtube":"YouTube"},"footer":{"about":"About","aboutShopify":"About Shopify","accessibility":"Accessibility","affiliateProgram":"Affiliate Program","affiliates":"Affiliates","apiDocs":"API Documentation","appDemo":"App Demo","appDeveloperProgram":"App Developers","appStore":"App Store","ar":"Shopify AR","blog":"Blog","blogTopics":"Blog Topics","brand":"Brand","buildBlack":"Build Black","buildNative":"Build Native","businessNameGenerator":"Business Name Generator ","burst":"Free Stock Photos","buyButton":"Buy Button","capital":"Capital","careers":"Careers","commerceComponents":"Commerce Components","company":"Company","companyInfo":"Company Info","contact":"Contact","contactShopify":"Contact Shopify","countrySelect":"Change your country or region.","countrySelectHeading":"Country/region","devDegree":"Dev Degree","developers":"Developers","documentation":"Shopify Help Center","domainNames":"Domain Names","domains":"Domains","dropshipping":"Dropshipping Business","ecommerce":"Online Store","ecommerceHosting":"Ecommerce Hosting","ecommerceSoftware":"Ecommerce Software","economicGrowth":"Economic Growth","email":"Email","examples":"Examples","experts":"Shopify Partners","featureTour":"Website Builder","features":"Features","forums":"Shopify Community","fulfillment":"Fulfillment","gaming":"Gaming","globalImpact":"Global Impact","hardware":"Hardware","hatchful":"Hatchful","heading":"More resources","helpCenter":"Help Center","hireAnExpert":"Hire a Partner","investors":"Investors","leadership":"Leadership","legal":"Legal","linkpop":"Linkpop","logoGenerator":"Logo Maker","managePrivacy":"Manage Privacy","merchantSupport":"Merchant Support","mobileCommerce":"Mobile Commerce","onlineStore":"Ecommerce Website","onlineStoreBuilder":"Online Store Builder","partnerProgram":"Partner Program","partners":"Partners","payments":"Payments","phoneNumber":"1-888-329-0139","platform":"Platform","pointOfSale":"Point of Sale","posFeatures":"Features","posSoftware":"POS Software","pressAndMedia":"Press and Media","pressReleases":"Press Releases","privacyChoices":"Privacy Choices","privacyPolicy":"Privacy Policy","products":"Products","research":"Research","resources":"Support","sellInStore":"Point of Sale","sellOnline":"Sell Online","sellOnlineTour":"Online Retail","serviceStatus":"Service Status","setUp":"Setup","sfn":"Shopify Fulfillment Network","shipping":"Shipping","shop":"Shop","shopPay":"Shop Pay","shopify":"Shopify","shopifyAcademy":"Shopify Academy","shopifyEvents":"Shopify Events","shopifyExperts":"Shopify Partners","shopifyForEnterprise":"Shopify for Enterprise","shopifyGold":"Enterprise","shopifyLite":"Shopify Lite","shopifyPlus":"Shopify Plus","shoppingCart":"Shopping Cart","sitemap":"Sitemap","social":"Social","socialImpact":"Social Impact","solutions":"Solutions","storeDesign":"Themes","storeThemes":"Store Themes","support":"24/7 support","supportLimited":"Customer Support","sustainability":"Sustainability","termsOfService":"Terms of Service","themeStore":"Theme Store","themeSupport":"Theme Support","themes":"Themes","tools":"Free Tools","topics":"Topics","trustSealsAccessibilityText":"Use Shopify with confidence. Our platform has been assessed and certified by:","video":"Video","videoTutorials":"Video Tutorials"}},"pages/partners/blog/$article/settings":{"images":{"guides-modal-default":"https://cdn.shopify.com/shopifycloud/brochure/assets/content-marketing/blog/guides/default-popup-small-507879111d55acdd759b202ab869ea0b8bd0f4af9f9aaa7c540efe59b8e046db.jpg","guides-modal-photography":"https://cdn.shopify.com/b/shopify-brochure2-assets/1bd4b072dc187a774c9af650d0f16d0b.jpg","guides-modal-seo":"https://cdn.shopify.com/b/shopify-brochure2-assets/63781344c2932de6e553a54b02291692.jpg","subscription":{"image":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420\u0026originalHeight=1040"}},"articleNavigation":{"banner":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/e570727d45209fec56c410f802faa0fe.png"}}}},"pages/partners/blog/$article/content":{"articleMetaTitle":"{{title}} ({{year}})","articleNavigation":{"title":"On this page","bannerTitle":"Earn more revenue as a Shopify Partner","bannerSubTitle":"Grow your Shopify expertise and unlock new ways to earn revenue for your own business with the Shopify Partner Program.","bannerHint":"Try Shopify for free, no credit card required.","buttonText":"Become a Partner"},"subscribeBanner":{"title":"Let’s grow your digital business","description":"Get design inspiration, development tips, and practical takeaways delivered straight to your inbox.","placeholder":"Enter email","buttonText":"Get updates","hint":"No charge. Unsubscribe anytime.","successMessage":{"heading":"Thank you for subscription!","contentHtml":"Check your email for instructions."}},"popularPostsTitle":"popular posts","subscribe":{"errors":{"email":"Please enter a valid email address."}},"readMoreLinks":{"title":"Read more"},"guidesCta":{"modal":{"subhead":"Almost there: please enter your email below to gain instant access.","disclaimer":"We'll also send you updates on new educational guides and success stories from the Shopify newsletter. We hate SPAM and promise to keep your email address safe.","submit":"Get updates","success":{"heading":"Thanks for subscribing.","subhead":"You’ll start receiving free tips and resources soon. In the meantime, start building your store with a free trial of Shopify.","cta":"Get started"},"error":"Something went wrong, please try again later!"},"analytics":{"heading":"Free Ebook: Ecommerce Analytics for Beginners","content":"Find out which metrics are the key to establishing and growing your online business. This free guide is the perfect first step in learning about ecommerce analytics.","cta":"Get the free ebook now","modal_headline":"Get Ecommerce Analytics for Beginners delivered right to your inbox."},"back_to_school":{"heading":"The Complete Guide to Back to School Marketing for Retail Stores","content":"Get an update on this year's back to school marketing trends, compare strategies, and build out your plan with this short guide.","cta":"Get your free guide now","modal_headline":"Get the Back to School Marketing Guide delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"brand_storytelling":{"heading":"Free Worksheet: Brand Storytelling","content":"Use this handy exercise as a guide to help you craft a compelling brand story and build a loyal audience through the power of storytelling.","cta":"Get the worksheet","modal_headline":"Get our free Brand Storytelling Worksheet delivered right to your inbox."},"branding":{"heading":"Free Reading List: How to Brand Your Business","content":"A great brand can help your products stand out from the crowd. Get a crash course in small business branding with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get our Branding reading list delivered right to your inbox."},"businessplan":{"heading":"Free: Business Plan Template","content":"Business planning is often used to secure funding, but plenty of business owners find writing a plan valuable, even if they never work with an investor. That’s why we put together a free business plan template to help you get started.","cta":"Get the template now","modal_headline":"Get the business plan template delivered right to your inbox."},"businessideas":{"heading":"Free: The Big List of Business Ideas","content":"To help you find the inspiration to start, we compiled a list of 100+ in-demand business ideas, broken down into categories like fitness, apparel, and gaming.","cta":"Get the list now","modal_headline":"Get the big list of business ideas delivered right to your inbox."},"case_studies":{"heading":"Free Video Series: Ecommerce Inspiration","content":"Feeling uninspired? Watch some of the world's most successful entrepreneurs share their best advice for new business owners.","cta":"Get the free video series","modal_headline":"Get our Ecommerce Inspiration video series delivered right to your inbox."},"competitive":{"heading":"Free: Competitive Analysis Template","content":"By evaluating the strengths and weaknesses of your competition, you can begin to formulate how to give your company an advantage. Download our free competitive analysis template and gain an edge over the competition.","cta":"Get the template now","modal_headline":"Get the competitive analysis template delivered right to your inbox."},"copywriting":{"heading":"Free Reading List: Copywriting Tactics for Entrepreneurs","content":"Is your website content costing you sales? Learn how to improve your website copy with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get our Copywriting Tactics reading list delivered right to your inbox."},"customerservice":{"heading":"Free Reading List: Customer Service Strategies","content":"Focusing on customer service can turn negative interactions into positive reviews (and repeat customers). Learn how with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get the reading list delivered right to your inbox."},"design":{"heading":"Free Reading List: Online Store Design Tips","content":"Your online store's appearance can have a big impact sales. Unleash your inner designer with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get our Store Design reading list delivered right to your inbox."},"email":{"heading":"Free Ebook: How to Grow Your Ecommerce Business with Email Marketing","content":"Whether you're just getting started or dreaming up your next big campaign, this email marketing guide will provide you with insights and ideas to help your business grow.","cta":"Get the free ebook now","modal_headline":"Get our Email Marketing guide delivered right to your inbox."},"googleshopping":{"heading":"Free Ebook: Google Shopping for Small Businesses","content":"Google Shopping ads are one of the leading traffic sources that can give you the ultimate edge. Discover this hidden gem often overlooked by your competition.","cta":"Get the free ebook now","modal_headline":"Get Google Shopping for Small Businesses delivered right to your inbox."},"hiring_questions":{"heading":"Free Guide: Interview Questions for Hiring Retail Employees","content":"Hiring competent retail employees is becoming increasingly challenging. Use this guide to ask the right questions during the interview process to ensure you hire the right people for your store.","cta":"Get the free guide now","modal_headline":"Get our guide Interview Questions for Hiring Retail Employees delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"holiday_selling_2021":{"heading":"Free Holiday Selling Guide: Top 10 Holiday Selling Tips for Retail Stores","content":"A sale can happen anywhere, at any time. Use our top 10 strategies to unify your customer touch points and set yourself up for holiday success.","cta":"Get the free guide now","modal_headline":"Get our Top 10 Holiday Selling Tips for Retail Stores delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"inventory_templates":{"heading":"5 Free Templates to Better Understand Your Inventory","content":"Calculate your businesses cost of goods sold, sell through rate, inventory turnover, saftey stock, economic order quantity, or reorder point with ease using these custom templates. (No math required!)","cta":"Get your free templates","modal_headline":"Get your Inventory Templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free templates soon. In the meantime, start building your store with a free trial of Shopify."},"opening_closing_checklist":{"heading":"Free Checklist for Opening and Closing Your Store","content":"Ensure all protocols and procedures are completed each time you open and close your store with this handy, easy-to-follow checklist.","cta":"Get the free checklist","modal_headline":"Get our Opening and Closing Checklist delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"optimization":{"heading":"Free Reading List: Conversion Optimization for Beginners","content":"Turn more website visitors into customers by getting a crash course in conversion optimization. Access our free, curated list of high-impact articles below.","cta":"Get the free reading list","modal_headline":"Get our Conversion Optimization reading list delivered right to your inbox."},"parentpreneur":{"heading":"Playbook for the Aspiring Parentpreneur","content":"Unleash your creativity and turn your passion into a thriving business with our Parentprenuer brainstorming guide. Discover new ideas, set realistic goals, and map out a plan for success.","cta":"Download now","modal_headline":"Check your inbox for your copy of the Parentpreneur Playbook."},"phonecases":{"heading":"Get a Free Phone Case Business in a Box","content":"Free high quality phone case stock photos and a list of some places you can look to find phone case suppliers to work with.","cta":"Download startup bundle","modal_headline":"Get our startup bundle delivered right to your inbox."},"photography":{"heading":"Free Guide: DIY Product Photography","content":"Learn how to take beautiful product photos on a budget with our free, comprehensive video guide.","cta":"Get your free guide","modal_headline":"Get our DIY Guide to Beautiful Product Photography delivered right to your inbox."},"popup_guide":{"heading":"Pop-Up Shop Quickstart Guide","content":"Thinking about hosting a Pop-Up Shop? This free guide includes 3 checklists that help frame what you're looking to accomplish through your Pop-Up Shop, different types of Pop-Up Shops, and design ideas to help get you started.","cta":"Get your free guide","modal_headline":"Get your Pop-Up Shop Quickstart Guide delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"pressrelease":{"heading":"Free: Press Release Template","content":"To help you get started, we put together this template to help you structure your story using a common press release format. You can replace each component with your own information and adapt it according to your needs.","cta":"Get the template now","modal_headline":"Get the press release template delivered right to your inbox."},"productivity":{"heading":"Free Reading List: Ecommerce Motivation","content":"Having trouble focusing on growing your small business? Get access to our free, curated list of high-impact productivity articles.","cta":"Get the free reading list","modal_headline":"Get our Ecommerce Motivation reading list delivered right to your inbox."},"products":{"heading":"Free Guide: How to Find a Profitable Product to Sell Online","content":"Excited about starting a business, but not sure where to start? This free, comprehensive guide will teach you how to find great, newly trending products with high sales potential.","cta":"Get the free guide","modal_headline":"Get How To Find A Product To Sell Online: The Definitive Guide PDF delivered right to your inbox."},"retail_marketing":{"heading":"Free Download: From Clicks to Customers: How to Measure Your Retail Store's Marketing Success","content":"Every marketing campaign is an investment of your time, energy, and money. Do you ever wonder if your efforts were worth it? Read this guide and build a framework to plan, track, and measure the success of retail marketing campaigns.","cta":"Get your free guide","modal_headline":"Get your free Retail Marketing Success PDF delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"retention_audit":{"heading":"Free Download: Retention Audit Checklist","content":"Struggling with customer retention? This free checklist will help you build a retention mindset throughout your company by auditing retention strategies at every level of your business.","cta":"Get your free checklist","modal_headline":"Get this free Retention Audit Checklist PDF delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"rotating_schedules":{"heading":"Free Download: Rotating Schedules Templates","content":"Struggling to keep your stores fully staffed and running smoothly? Consider implementing a rotating shift program. Download these free templates to find the right schedule for you and your employees.","cta":"Get your free templates","modal_headline":"Get these free Rotating Schedules Templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"seo":{"heading":"Free Download: SEO Checklist","content":"Want to rank higher in search results? Get access to our free, checklist on search engine optimization.","cta":"Get the free checklist","modal_headline":"Get our SEO Checklist delivered right to your inbox."},"sfn_interview":{"heading":"Free Checklist: How to Interview a Third Party Logistics Provider","content":"Outsourcing fulfillment is a significant investment. Here’s a checklist of questions to ask in preparation of choosing the right fulfillment provider and transitioning your business.","cta":"Get the free checklist","modal_headline":"Get the checklist delivered right to your inbox."},"sfn_outsource":{"heading":"Free Checklist: Are You Ready to Outsource Your Fulfillment?","content":"Trusting a third party logistics (3PL) provider with your inventory and your customer experience is a significant investment. These questions will help determine if it's time to outsource your fulfillment and take the next step in growing your business.","cta":"Get the free checklist","modal_headline":"Get the checklist delivered right to your inbox."},"shipping":{"heading":"The Shopify guide to shipping and fulfillment","content":"Boost customer satisfaction while driving sales growth for your ecommerce business with an effective shipping and fulfillment strategy. Use this guide to create a plan that covers all aspects of shipping and fulfillment, from how much to charge your customers to choosing the right fulfillment method.","cta":"Download now and start optimizing your operations","modal_headline":"Get our shipping and fulfillment guide delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"social":{"heading":"Social media strategy and planning templates","content":"Ready to get started with your social media strategy? These free, customizable templates give you tools to plan and execute a strategy that connects you with your target audience while keeping your content calendar organized.","cta":"Download now and start seeing results","modal_headline":"Get your social media strategy and planning templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"social_template":{"heading":"Social media strategy and planning templates","content":"Ready to get started with your social media strategy? These free, customizable templates give you tools to plan and execute a strategy that connects you with your target audience while keeping your content calendar organized.","cta":"Download now and start seeing results","modal_headline":"Get social media strategy and planning templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"store_layouts":{"heading":"Free Download: Store Layout Templates","content":"Trying to decide which layout is right for your store? Download these free templates to learn which types of layouts work best for different industries and draw inspiration for your own design.","cta":"Get your free templates","modal_headline":"Get these free templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"swot":{"heading":"Free: SWOT Analysis Template","content":"Get your free SWOT Analysis Template. Use this free PDF to future-proof your business by identifying your strengths, weaknesses, opportunities, and threats.","cta":"Get the template now","modal_headline":"Get the SWOT analysis template delivered right to your inbox."},"tax_season":{"heading":"Free Download: 6 Steps to Get Your Business Ready for Tax Season","content":"Tax season is stressful for any business owner. This guide will go through the process of filing income taxes in America and provide you with checklists to keep you organized and prepared.","cta":"Get your free guide now","modal_headline":"Get your free guide","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"trust":{"heading":"Free: Shopify Store Trust Checklist","content":"Shopify’s research team conducted a series of in-depth interviews with North American shoppers to learn how customer trust is formed in online stores. This checklist is a summary of their findings, created to help business owners understand what essential aspects of their online store experience creates trust among customers, along with the trust-busting mistakes to avoid.","cta":"Get the checklist now","modal_headline":"Get the checklist delivered right to your inbox."},"ttp_guide":{"heading":"Free Download: The Online Sellers Guide to In-Person Sales","content":"In-person selling is more approachable than ever. This guide covers why selling in person can reduce customer acquisition costs, how to build a plan that will scale with your business, and tactics from ecommerce sellers that made the move successfully.","cta":"Get your free guide now","modal_headline":"Get your free guide","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"twitter":{"heading":"Free Ebook: Twitter Marketing for Small Businesses","content":"This guide will teach you everything from earning your first followers to getting the most out of Twitter’s advertising platform. Claim your free download to get instant access.","cta":"Get the free ebook now","modal_headline":"Get Twitter Marketing for Small Businesses delivered right to your inbox."},"video":{"heading":"Free Reading List: Video Marketing Tips and Tricks","content":"Video marketing is a powerful tool you can’t afford to ignore. Get a crash course with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get the reading list delivered right to your inbox."}},"partnersSignup":{"service_partner":{"heading":"Grow your business with the Shopify Partner Program","content":"Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.","cta":"Sign up"},"app_developer":{"heading":"Build apps for Shopify merchants","content":"Whether you want to build apps for the Shopify App Store, offer custom app development services, or are looking for ways to grow your user base, the Shopify Partner Program will set you up for success. Join for free and access educational resources, developer preview environments, and recurring revenue share opportunities.","cta":"Sign up"},"affiliate":{"heading":"Become a Shopify Affiliate","content":"Use your voice to inspire entrepreneurship around the world. Whether you’re an existing partner or new to the Shopify Partner Program, apply to become a Shopify Affiliate and earn commission by referring your audience to Shopify.","cta":"Apply now"},"general":{"heading":"Grow your business with the Shopify Partner Program","content":"Whether you offer web design and development services or want to build apps for the Shopify App Store, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, developer preview environments, and educational resources.","cta":"Sign up"}},"authorSection":{"headingHtml":"Share article","updated":"Last updated","byAuthor":"by \u003cwrapper\u003e\u003cname\u003e{{authorName}}\u003c/name\u003e\u003c/wrapper\u003e","byAuthor_withLink":"by \u003cwrapper\u003e\u003curl\u003e\u003cname\u003e{{authorName}}\u003c/name\u003e\u003c/url\u003e\u003c/wrapper\u003e","reviewed":"Reviewed","written":"Written"},"articleHeader":{"blogLink":{"text":"blog"}},"hero":{"heading":"Become a Shopify Partner.","subhead":"Unlock business growth.","image":{"alt":"My alt."},"buttonText":"Join Today"},"subscription":{"heading":"Let’s grow your digital business","subhead":"Get design inspiration, development tips, and practical takeaways delivered straight to your inbox.","disclaimer":"No charge. Unsubscribe anytime.","conversionCta":{"text":"Get updates","emailPlaceholder":"Email here","successMessage":{"heading":"Thank you for subscription!","contentHtml":"Check your email for instructions."}}},"latestArticles":{"heading":"Latest from Shopify","link":{"text":"See all"}},"sellAnywhere":{"headingHtml":"Grow your business with the Shopify Partner Program","buttonText":"Join Today"},"textCta":{"href":"{{deeplinkFreeTrial}}","text":"Click here to start selling online now with Shopify"},"rightColSideBanner":{"title":"Imagine my business","subTitle":"100+ product updates to build more productive, creative, and powerful commerce experiences","buttonText":"Learn more"}},"pages/partners/blog/blogSubNav":{"subNav":{"title":"Blog","pageTitle":"Menu","overviewText":"Homepage","links":{"caseStudies":"Case Studies","shopifyNews":"Shopify News","latest":"Latest","more":"More"},"subLinks":{"appDevelopment":"App development","shopifyThemeDevelopment":"Shopify Theme Development","frontEndDevelopment":"Front End Development","inspirationCreativity":"Inspiration \u0026 Creativity","findingNewClients":"Finding New Clients","seeAllTopics":"See All topics"}}}}},"pricing":{"annualDiscountPercentage":25,"basicAnnualPrice":"\u003cspan\u003e$19.00 USD\u003c/span\u003e","googleCountryOffer":"Rp3,000,000","minimumMonthlyPrice":"$5","minimumMonthlyPriceCurrency":"USD","paidTrialAmount":"$1","paidTrialMonths":3,"posProPriceUsd":"$89","posRetailLocations":"1,000","promoAmount":{"amount":1,"currencyCode":"USD","currencySymbol":"$"},"signupTypes":["paid_trial_experience"],"trialLength":3,"usd":"USD"}},"root":null},"actionData":null,"errors":null}};</script><script type="module" async="">; import * as route0 from "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/root-C-mg5gkk.js"; import * as route1 from "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/layout-YhaZ_g6D.js"; import * as route2 from "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/route-DSm-KK0x.js"; window.__remixManifest = { "entry": { "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/entry.client-CTuCHl1M.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/components-60B5pb4k.js" ], "css": [] }, "routes": { "root": { "id": "root", "path": "", "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": true, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/root-C-mg5gkk.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/components-60B5pb4k.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/I18N-BmnmoWJU.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Wrapper-BJS5F588.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Image-DQuLW4bT.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Section-Bv1m84ju.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/SideBySide-Csvp0IIu.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Provider-HFzBeLPW.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/HeadingGroup-IVgVfgzw.js" ], "css": [] }, "pages/shopify.com/($locale)~~layout": { "id": "pages/shopify.com/($locale)~~layout", "parentId": "root", "path": ":locale?", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/layout-YhaZ_g6D.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/components-60B5pb4k.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/I18N-BmnmoWJU.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Provider-HFzBeLPW.js" ], "css": [] }, "pages/shopify.com/($locale)/partners/blog/$article": { "id": "pages/shopify.com/($locale)/partners/blog/$article", "parentId": "pages/shopify.com/($locale)~~layout", "path": "partners/blog/:article", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/route-DSm-KK0x.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/components-60B5pb4k.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/I18N-BmnmoWJU.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Wrapper-BJS5F588.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/PageLayout-q0mBv8hU.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/XIcon.svg-BsjI1VIY.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/NavigationSearch-vw4CYqxh.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/HeadingGroup-IVgVfgzw.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/index-CRXFT8nJ.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Image-DQuLW4bT.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BlogCard-D7XHZ9da.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Conversion-CPGsCYBt.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Section-Bv1m84ju.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/constants-Cm4ZPFll.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Image-Dqn2JlFF.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/constants-Cs9nQPfb.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/partnersHelpers-BlRjfC34.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BaseInput-DxnbX8Hr.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/utils-DbZwQWK5.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/ArticleCarousel-_1IofRan.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/article-BLvhnj4S.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BlogConversion-BbdjKmrS.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/LatestSection-D2JzJPNN.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/blog-CO8llDlK.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/PartnersFooter-BRU1EM0A.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/useBlogPageTitle-CGuzOVmV.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/handle-BeFHnPVi.js" ], "css": [] }, "pages/shopify.com/($locale)/partners/blog": { "id": "pages/shopify.com/($locale)/partners/blog", "parentId": "pages/shopify.com/($locale)~~layout", "path": "partners/blog", "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/route-hmd7L-55.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/components-60B5pb4k.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/I18N-BmnmoWJU.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Wrapper-BJS5F588.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/PageLayout-q0mBv8hU.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/XIcon.svg-BsjI1VIY.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/NavigationSearch-vw4CYqxh.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/constants-Cs9nQPfb.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/HeadingGroup-IVgVfgzw.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/index-CRXFT8nJ.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BlogCard-D7XHZ9da.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Conversion-CPGsCYBt.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/partnersHelpers-BlRjfC34.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/blog-CO8llDlK.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/BlogConversion-BbdjKmrS.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/PartnersFooter-BRU1EM0A.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/useBlogPageTitle-CGuzOVmV.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/Hero-tg8jyjj3.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/ArticleCarousel-_1IofRan.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/handle-BeFHnPVi.js" ], "css": [] }, "pages/shopify.com/$": { "id": "pages/shopify.com/$", "parentId": "root", "path": "*", "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/route-K6Dvbx-E.js", "imports": [], "css": [] } }, "url": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/manifest-6da66ae2.js", "version": "6da66ae2" }; window.__remixRouteModules = {"root":route0,"pages/shopify.com/($locale)~~layout":route1,"pages/shopify.com/($locale)/partners/blog/$article":route2}; import("https://cdn.shopify.com/shopifycloud/brochure-iii/production-blog/assets/entry.client-CTuCHl1M.js");</script></body></html>