{"componentChunkName":"component---src-templates-blog-template-js","path":"/docs/custom-products","result":{"data":{"markdownRemark":{"html":"<h2>Extending the Product Page</h2>\n<p>The sky's the limit! The beauty of building your own ecommerce site is that you are in full control of the data behind your products. (This is why I created this software in the first place! :) -Rachel)</p>\n<p>To give you an example, <a href=\"https://gpxjewelry.com\">GPX Jewelry</a> is running on top of Beluga. This site allows customers to upload a GPS file and get a custom necklace design, which is saved to an external database. Here's how the product page looks, once a GPX file has been uploaded:</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/fa29d79c55c4ece9f1e70b2cfc396f79/cd536/config6-make.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: 50.416666666666664%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACJklEQVQoz22SW08TQRiG+3uN8Q+YmJho4oUXXhlFwXhCS7YStRYqVKUWChQohRaEnjj0QIFdaHd39tTdx9m2JHj4kjczycz3zDvvTKRs9VC0Gp+7R6h9BwLo+wH9YCQ59+Voug6aMDB9j7MLjWKtTG6/SL72i6ap0bUFlusSObVNCr1TdkwVS25GNgfXNDhBlip0GvoFb5UoN27d5PbdO9x/+ojnM1HGE1Pk2vucGBqRkOoaIrQ1aAz+Ag6goUN52EzmB5nlLM8mX6L8nOXewwekawXi+TRP4u9oCQnUHYeeaYx88A/UD4Yre8d1YqkEDXHJVr3MZGKa7+UNNtoVCjKusS/vKR1VpEPLxtB1hBADudLx9fL9ofOlzRzK6jzV7gmqK3j8apz4doaCfsRqZ59kMUs6t0TEdlwMw6Bn6HQl2DRNbNvGsqwB/AqYLaxJ4Bzr51Xyap033z4xHo+SzC+ypR6QKq2QWVshYkqHjhlmKLv6AZ6EODKGUJ7njR4Gdo+r8gGmyGt1Vtt77LYPWN/ZZiqmcHjWYmJWGV5ZSFj4etlem3Vxjh34f1z5Ctixu7xIxohmZmhYGt4o9cXcMom5JK9TH2nJ7xORqXPat5jXm6SNNiLw+F819DMyrRITXxWUVJx8YZPN4hax6Q8sLCxQ0g456HakwzCn8MuExqQ8r48jr+oMxuHck+uqqVO/7NAUF+wcVtmrSlUqNDsng7RUs8e51G8kqd7oQZ34fgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config6 make\"\n        title=\"config6 make\"\n        src=\"/static/fa29d79c55c4ece9f1e70b2cfc396f79/d9199/config6-make.png\"\n        srcset=\"/static/fa29d79c55c4ece9f1e70b2cfc396f79/8ff5a/config6-make.png 240w,\n/static/fa29d79c55c4ece9f1e70b2cfc396f79/e85cb/config6-make.png 480w,\n/static/fa29d79c55c4ece9f1e70b2cfc396f79/d9199/config6-make.png 960w,\n/static/fa29d79c55c4ece9f1e70b2cfc396f79/cd536/config6-make.png 1114w\"\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>Each jewelry design is created from an SVG file, which is generated on the site's frontend. This SVG blob is then saved to the order item in localstorage, which allows the Cart and Checkout pages to render each design individually:</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/0983a2bb8dfea7a519d3d145ff8a417d/25260/config6-cart.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: 46.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0UlEQVQoz6WRMQ6DMAxFc/+z9AA9CRIqUweGtECXkDRO/GtDQKVDEe2XfobEfvp2zBie6IcBKWdk5r+sDONGj7ZtsUoe5MCeUkpTbRYIM5dWhiG5CCHAObdp0MdvJqIJtgC5pDQhRlRVhbquMcjo977HrevmBAX8KS7JVN77FT4nTBnWWjRNgyhwtRbsJVwAWqu74/eRUYqOjLx42rmE4jEgU5oTHgFsYCLijPPjipO9wMYRJpVd/CrF1n5A5Xu4TPopBJIPiGI66KUHmkmcZOQX+8DF2Mo6tEAAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config6 cart\"\n        title=\"config6 cart\"\n        src=\"/static/0983a2bb8dfea7a519d3d145ff8a417d/d9199/config6-cart.png\"\n        srcset=\"/static/0983a2bb8dfea7a519d3d145ff8a417d/8ff5a/config6-cart.png 240w,\n/static/0983a2bb8dfea7a519d3d145ff8a417d/e85cb/config6-cart.png 480w,\n/static/0983a2bb8dfea7a519d3d145ff8a417d/d9199/config6-cart.png 960w,\n/static/0983a2bb8dfea7a519d3d145ff8a417d/25260/config6-cart.png 1113w\"\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>The default product information is saved in <code>localstorage</code> in the <code>addToCart()</code> function in <code>src/product/Product.js</code>. The default code takes the first product image to use as a thumbnail (if available). To switch to an SVG, one would save the SVG string instead of the IMG path:</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/5fe66f58c06fef302a947ec696602a7c/46e51/config6-custom.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: 54.166666666666664%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB6UlEQVQoz4VTa5OaQBDkd8Sgng9ABHmzLMh7UYwx3lWSuqqk8v9/RmeWU6Opq7oPXewuOz09PbOKw1pE5QH54QVaXICVDfLuCLc6gomvyPsXZIczwnYHuxDQWI1VXEILt1DXAcamj7H8ElRaK36+A+9OsNMGTsIRcA4zEVgygbg9ItufsdkKBPUBSfcMKxVYZw10Sq7ekd0IrbjCJmngUvZVssXMSzD3UhikQPNTzByGzysPKmFyCZJ7CalOvZzdCG3eUOYTKdhRaSeEzR5p/4w1K2FEOZZEOrZCCn4LUO8VXUp+IDTJjy0RyOCJFeFpE2NqR/hkuP+U3JG8hwdCJ2vRnl+hBRlGRDK6EN2Xdj0bfZBgIJQd84s9XDJekq5I6ZR8k9DJx4XHBz/nbgKd/ksL1EuZ18S3NUHR/AxR84U87IbGWNRtb1shTAuklUBS90MFKfmc9WcETQc9okng1SDCJK8tXmNDcWZaQ1knFfxcXsqxCPPhwpI6PTU9gouZ5Q+ezkih9HfmxjQFbNjPr2dUzcLleHJiKIKy9z/+oPj2G/z4C+H+FXH/HdXpJ+KyAy8FDL7DIqph0FAH5R5OJjCn0m9e3/mtyAt21mERC+jsbaDXJN2jF6OzAhOHY7phFPjYqP+H+tqUv/NpXI4t23T2AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"config6 custom\"\n        title=\"config6 custom\"\n        src=\"/static/5fe66f58c06fef302a947ec696602a7c/d9199/config6-custom.png\"\n        srcset=\"/static/5fe66f58c06fef302a947ec696602a7c/8ff5a/config6-custom.png 240w,\n/static/5fe66f58c06fef302a947ec696602a7c/e85cb/config6-custom.png 480w,\n/static/5fe66f58c06fef302a947ec696602a7c/d9199/config6-custom.png 960w,\n/static/5fe66f58c06fef302a947ec696602a7c/46e51/config6-custom.png 1003w\"\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/custom-products","date":"2020-01-06T22:12:33.962Z","header":"Store Configuration","title":"Advanced: Custom Product Data 💫"}}},"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"]}