{"componentChunkName":"component---src-templates-blog-template-js","path":"/docs/adding-collections","result":{"data":{"markdownRemark":{"html":"<h2>Collections</h2>\n<p>Collections are how you will organize the products on your site. Note that this is an <em>optional</em> step, it's entirely possible to have a store with a single or just a handful of products.</p>\n<p>If you do not add any additional collections, the <code>/shop</code> route in your store will display a list of all live products. Otherwise, if you do add collections, it will display a list of collections.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/c76ee4eb2eb85cdbbeee423bb099d2cd/73caa/config2-setup.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 35.416666666666664%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA5UlEQVQoz41R24rCMBT0/3/DBx+E/sCCi1+w0IdSWPogrm5xKTHNzTZpRyfdFiuCDpzkZMhMzjlZ9H0PoAP6gAEB3jcg33UdQhh47jwT3vuJ5737WJA8CYvdb41j5fC9P+Nwkgj/ZhQ/mjRNMzMcEQ25fH79YbX5wXp7wPJjj2yn8A5Gs1mFXC7OQKszrFEwuoaUAkII1DVzGXNjzFQxY2z/aYXOOcibWCkVTWigtYa1Nhpxvw9ybdtOVZVlGXVEnGFVVciyDHmeoyiK2avvIEkSpGk6GFLMVvgih81WHn/uVYyg9gqpqSHb46pJfQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config2 setup\"\n        title=\"config2 setup\"\n        src=\"/static/c76ee4eb2eb85cdbbeee423bb099d2cd/d9199/config2-setup.png\"\n        srcset=\"/static/c76ee4eb2eb85cdbbeee423bb099d2cd/8ff5a/config2-setup.png 240w,\n/static/c76ee4eb2eb85cdbbeee423bb099d2cd/e85cb/config2-setup.png 480w,\n/static/c76ee4eb2eb85cdbbeee423bb099d2cd/d9199/config2-setup.png 960w,\n/static/c76ee4eb2eb85cdbbeee423bb099d2cd/73caa/config2-setup.png 1110w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h2>Featured Products</h2>\n<p>Featured Products is the default collection that will display on your store's landing page.</p>\n<p>To change the collections on your landing page, open the component <code>src/components/Landing.js</code> and edit</p>\n<pre><code>const featuredProducts = getProductsFromCollection(config, \"featured-products\");\n</code></pre>\n<h2>Create a New Collection</h2>\n<p>Click the \"Create New Collection\" button on <code>config?tab=1</code>, and you will start the collection workflow.</p>\n<p>Set the name of your collection, and then add products.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 629px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/4798d6ca4420bd9d4500175172f7aea2/63a68/config2-step1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.33333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVQ4y51TO0/CUBTuP3H0D/gXnElMdFPjwuLoVCdNGNQ4kDg4uDjJoIRNd2PiooMuGgsFGXiU0kKh75ZPzgklpaYK3OT03Nx7z/c491YolUool8vo9XrodDpot9swDAM0RqMRxyJDqFarGAwG8H0fruvC8zwEQTADuEgIVEjqms0mK6SIVM0LMqOQ1JDFVqsFTdOgKAqrDcNwGkmCaB5lOh+FQAXD4ZBBVVVlUAqak9put4tGowFJklCr1VCv17nnlGVZZmdxMga0bRuWZcE0TQ7HcaZrlKnHuq6j3+8zMZFQm6K1uGK2TKBRjtuc95bj9lmhNVZBNomNWOm24zboDK0liZI9ZcDoidCgggnnL8XJy0l9h7T59vUNVTfgOy4UVYNuWqmF/7WA32H25Br3j68o3hZxnr/Ay0dlqjjN3p+ApzcP2D88wsb2Hg5EEVJFTrRggV+PPuJlASvrGaxmNrG2k8XT+ydvBssC5q7usCWeIZvLY/c4j+cJ4FIKSUXoe/Ace5z9uZufNn4ARLSCYcyIvI8AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config2 step1\"\n        title=\"config2 step1\"\n        src=\"/static/4798d6ca4420bd9d4500175172f7aea2/63a68/config2-step1.png\"\n        srcset=\"/static/4798d6ca4420bd9d4500175172f7aea2/8ff5a/config2-step1.png 240w,\n/static/4798d6ca4420bd9d4500175172f7aea2/e85cb/config2-step1.png 480w,\n/static/4798d6ca4420bd9d4500175172f7aea2/63a68/config2-step1.png 629w\"\n        sizes=\"(max-width: 629px) 100vw, 629px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h2>Collection Cover</h2>\n<p>Next, add a cover image for your collection. This will be displayed at <code>/shop</code>.</p>\n<p><em>(The example image comes from <a href=\"https://www.youtube.com/watch?v=SlwnrSM8RSA\">this video</a>)</em></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 660px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d9fa757a22d1eb0490d0e88fc01c1489/1f083/config2-step2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 71.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAACtUlEQVQ4y42Se0hTURzHz+69293upnOzufkiZqW1UEQI/9HIov+ChKAoIoLMoD+C6CUFBoXMfGVqiYqtIJTAVxRUhFFk+fhDl5CPrfIdjT1c/eOUzW/n3mksJesHn3vO73D4nO+595JAIIDevn7cuFWNoutWlFQ0oKK2GWV3mmCtvIfb9S1obu1GeXUTXbdJlNfcR1lNM6xVjai+a8PCQgBiLS8vg4iT4U+jUBjSkXeiCoeLOpCdXwwSY4HSlIPcozak5p4DIXEgipQIzHQtHqw2DV7fvCQMhUJh4Zu371B4uQ49kyHsOXINWfsKsfvAedS1TeNCZR/UpiwoY3dCMGRARVHG0dGYCVZvgcGcDd+8f0W4knCgfwBbMg+itM2JYxdtOHW1FTcbh1DV9QM5+VdA+ETwMTsgj06DXLsdnI7OdRYQzVbok7PWC+32YRpfwK79Z3D8UgvOlrzAyeLnOFRYC60xA0SZCFZjBqs2g9GkgInaBo5elQhm6BLS1wuHhuyQywUqlYHldJCxOrDyWNprQZhYMAoTGD4BnJAMRpkERtgMjh5A+CToTZYI4co7HBwchEzGSMIw4pyTUhOipmgoMRQ9hR7EbALhjFIfrUuBb+1HsdvtUAlqyBU8eKUAnldRxFENBR9FiYZKpacYKEa6NwGCOpHuN8AUn4r5tQmXFgOYnXRiZsKBmcm1ODH11YHR0bEIxiVGRsYw7nAiGAz++R96fy6h470Hnb1eOrrR3uNG5wc3umjfTte7P4YTbFSiTCxJ6PItoOHpZzQ9+4IHL6fxqPsbHr6alfr6J048fj0lpRCvFAyGpDGSVZmUcLWhrfT0ur/D6RjB7PTEX1NsVGT1ZbpcLiwuLsFaWoq8vL0oKDgtpRIVISqKTPFPobhJlIrl9/sxNzcHj8fzWxCW/J/wFw1tHlqVNmgXAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config2 step2\"\n        title=\"config2 step2\"\n        src=\"/static/d9fa757a22d1eb0490d0e88fc01c1489/1f083/config2-step2.png\"\n        srcset=\"/static/d9fa757a22d1eb0490d0e88fc01c1489/8ff5a/config2-step2.png 240w,\n/static/d9fa757a22d1eb0490d0e88fc01c1489/e85cb/config2-step2.png 480w,\n/static/d9fa757a22d1eb0490d0e88fc01c1489/1f083/config2-step2.png 660w\"\n        sizes=\"(max-width: 660px) 100vw, 660px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Click \"Finish\", and then navigate over to <code>/shop</code> to see your collection in action.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/c5ce619190aa74960ad105e7bdf16415/153c4/config2-collection.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 38.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABPUlEQVQoz42PTUsCYRSF31WfULioRQhF1KI2EVMtWrSJssAszKQ/YIsUlIiiRdEqKBeBiwT7hP5If8FQc6wMQWiTpOZUiOPTzIAhKOqBh3t4ec+5XHF4+8Tx/TMHNzJ7lzL7VzpxdkNxvMEYvosY7sAj2xruOlTed4IRPNoUeaVIIpkmHEsSkd8IR1+Qk+9EEymicgr5Nc1n/ofs129LCDSdBu6wu8+ZXd7C7gowKtnpH5qhxywhza2hKAqtyig8Ogni8IbwnT3g9Fwj2s20mcYRHcOMTMyTzeWNz6qqUi6Xa1CrvFG44XAihKC3b0ybnRpdGiaNbgYGJ8k1KNRV7Y1Cv9/P9JSEZXEBq3WVFes6NtsmliUHLpdXO/n7P1hPNYWFQoGPTIZisdgw0AyjsHqr7kulUg36qc2o5P8A0kEZMIVroHEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config2 collection\"\n        title=\"config2 collection\"\n        src=\"/static/c5ce619190aa74960ad105e7bdf16415/d9199/config2-collection.png\"\n        srcset=\"/static/c5ce619190aa74960ad105e7bdf16415/8ff5a/config2-collection.png 240w,\n/static/c5ce619190aa74960ad105e7bdf16415/e85cb/config2-collection.png 480w,\n/static/c5ce619190aa74960ad105e7bdf16415/d9199/config2-collection.png 960w,\n/static/c5ce619190aa74960ad105e7bdf16415/153c4/config2-collection.png 1361w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h2>Collection Displays</h2>\n<p>Clicking into your collection will display the product list, which for our example collection is viewable at <code>/collection/pelagic-magic</code></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/88ee4eae93b42661e12c67d668a26d94/77f8f/config2-view.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOUlEQVQoz52SvU7CUACFeSbCA3RpCAksZWLgLdjAxJ/F6MyoRsMgTEBMXCibEAmJJYRarCaEOJCqYKjo0vaT3kiDg6Ryk7Od891zcm/kuGxyVH7k8PKJ/ZLJQemBvQuD3XOD/IlO/jSc/MzO2T0Rz3X5+lwwm77xPpuy+LABD891tlJkmWY+nzMcDjFNE8uy8DxPKOxZdwqgpmnouo5t2wwGA6rVKpPJRBjc5YLVBWEkgKqq0mw2aTQaFAoFcrkchmEEwD+b/axYXySAo9GIYrFINpsVMB/a7/e3B/rhdDpNPB4nmUySSCRotVrC4DjO/4H+ZEmSUBSFTCYj1Ov1tm9YqVSIxWKkUilkWSYajVKr1YOGYR8kAI7Hz9Svrrlpd+h072jfdrFeXn+12Pht1oGbAv7csFqBvwHAryPcrEb4iwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config2 view\"\n        title=\"config2 view\"\n        src=\"/static/88ee4eae93b42661e12c67d668a26d94/d9199/config2-view.png\"\n        srcset=\"/static/88ee4eae93b42661e12c67d668a26d94/8ff5a/config2-view.png 240w,\n/static/88ee4eae93b42661e12c67d668a26d94/e85cb/config2-view.png 480w,\n/static/88ee4eae93b42661e12c67d668a26d94/d9199/config2-view.png 960w,\n/static/88ee4eae93b42661e12c67d668a26d94/77f8f/config2-view.png 1353w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Note that when you click in to a product, the breadcrumb navigation at the top of the product page will reflect the collection that it came from.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/2397e5fadcf23111f0f0082aa2d87db6/d0c2f/config2-product.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.083333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB50lEQVQoz52S0WtScRTH7x/SS0R/QK16KYqeeqkmqzaJEAom5MsyUNpiFbQ5onpwm91Zk16SMcXlClpz1IWBVJAUSIjNmy5HDheWpDTr3vvpXq9XFKKHvvD9/c7vd875/s6PcwTxiUzoWZ7gU5lAPKdT5t6ijHE/ubCGP2ZyciH3Twb0nOnHOQS6oKEpDX1X+F8IiqI2jenoCrNxiS+lLYobJSpbFYryJ96t5Ulm8nyrVPhc3KC0uYmiqqiaphNUfVF0qi0KhtOA0xfikHOcr99/sL5eJBpbZPymj7tTIvPSG35t/6RarVKv16nVak02Gg1dREXTxS0KaktwyD/HwKjI6usUvtt+LnmGGbl2g/uzIZ4nU80YM5m2baHTbgu6A1FGxTBXfbc41mfHNeTG7b3CZa+H5ZdSh6BZiYF0Ok0kEqFQKLT9gvFvAxPzLzg3PMER2xn22gbo6T3NvpN9nPeOkMp8/KtgNptFkiTK5bLZUvPLpjOcSHLY6WFP7yn2n3VwcPAiR50u7GN3eJhYbcYoLUEruWs+Wud2UwbHHiD02NnV72J3/wV22hzsOOFAOHCc68FwM+a30j1ORsWKftf5iGAdpLcfmJpbYiaaIBhbQYws6/YS/kdxXr3PmBUq3R21qHZU/gfxF7Ghw8YatgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config2 product\"\n        title=\"config2 product\"\n        src=\"/static/2397e5fadcf23111f0f0082aa2d87db6/d9199/config2-product.png\"\n        srcset=\"/static/2397e5fadcf23111f0f0082aa2d87db6/8ff5a/config2-product.png 240w,\n/static/2397e5fadcf23111f0f0082aa2d87db6/e85cb/config2-product.png 480w,\n/static/2397e5fadcf23111f0f0082aa2d87db6/d9199/config2-product.png 960w,\n/static/2397e5fadcf23111f0f0082aa2d87db6/d0c2f/config2-product.png 1362w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>","frontmatter":{"path":"/docs/adding-collections","date":"2020-01-06T19:12:33.962Z","header":"Store Configuration","title":"Adding Collections 📂"}}},"pageContext":{"pages":[{"path":"/docs/changelog","title":"Changelog & To Do's 📝","header":"Beluga Next Steps","date":"2020-01-11T17:12:33.962Z"},{"path":"/docs/seo-social","title":"SEO and Social Media 💻","header":"Launching Your Store","date":"2020-01-10T17:12:33.962Z"},{"path":"/docs/deploy-to-heroku","title":"Deploying To Heroku 🚀","header":"Launching Your Store","date":"2020-01-09T17:12:33.962Z"},{"path":"/docs/gmail-oauth","title":"Setting up Gmail Oauth2 📬","header":"Managing Orders","date":"2020-01-07T19:12:33.962Z"},{"path":"/docs/email-templates","title":"Email Templates 🧾","header":"Managing Orders","date":"2020-01-07T18:12:33.962Z"},{"path":"/docs/managing-orders","title":"Order Admin 📦","header":"Managing Orders","date":"2020-01-07T16:12:33.962Z"},{"path":"/docs/custom-products","title":"Advanced: Custom Product Data 💫","header":"Store Configuration","date":"2020-01-06T22:12:33.962Z"},{"path":"/docs/shipping","title":"Checkout & Shipping 🛒","header":"Store Configuration","date":"2020-01-06T21:12:33.962Z"},{"path":"/docs/additional-pages","title":"Adding Pages 📄","header":"Store Configuration","date":"2020-01-06T20:12:33.962Z"},{"path":"/docs/adding-collections","title":"Adding Collections 📂","header":"Store Configuration","date":"2020-01-06T19:12:33.962Z"},{"path":"/docs/adding-products","title":"Adding Products 🎁","header":"Store Configuration","date":"2020-01-06T18:12:33.962Z"},{"path":"/docs/theming-design","title":"Theming & Design 🎨","header":"Store Configuration","date":"2020-01-06T17:12:33.962Z"},{"path":"/docs/store-config","title":"Store Settings 🛠","header":"Store Configuration","date":"2020-01-05T16:12:33.962Z"},{"path":"/docs/stripe","title":"Setting up Stripe 💵","header":"Introduction","date":"2020-01-04T17:12:33.962Z"},{"path":"/docs/new-store","title":"Creating a New Store 🛍","header":"Introduction","date":"2020-01-03T17:12:33.962Z"},{"path":"/docs/dev-environment","title":"Setting up the Dev Environment 🧪","header":"Introduction","date":"2020-01-02T17:12:33.962Z"},{"path":"/docs/project-structure","title":"Overview of Project Structure 🏗","header":"Introduction","date":"2020-01-01T17:12:33.962Z"}]}},"staticQueryHashes":["45326706"]}