diff --git a/components/Snipcart.js b/components/Snipcart.js
index cb1c876..951183b 100644
--- a/components/Snipcart.js
+++ b/components/Snipcart.js
@@ -7,7 +7,8 @@ var Snipcart = function Snipcart(_ref) {
       currency = _ref.currency,
       innerHTML = _ref.innerHTML,
       openCartOnAdd = _ref.openCartOnAdd,
-      useSideCart = _ref.useSideCart;
+      useSideCart = _ref.useSideCart,
+      templatesUrl = _ref.templatesUrl;
   return /*#__PURE__*/React.createElement("div", {
     hidden: true,
     id: "snipcart",
@@ -15,6 +16,7 @@ var Snipcart = function Snipcart(_ref) {
     "data-currency": currency,
     "data-config-add-product-behavior": openCartOnAdd === false ? "none" : null,
     "data-config-modal-style": useSideCart === true ? "side" : null,
+    "data-templates-url": {},
     dangerouslySetInnerHTML: {
       __html: "\n        " + innerHTML + "\n      "
     }
@@ -25,6 +27,7 @@ Snipcart.defaultProps = {
   currency: "usd",
   innerHTML: "",
   openCartOnAdd: true,
-  useSideCart: false
+  useSideCart: false,
+  templatesUrl: null
 };
 module.exports = Snipcart;
\ No newline at end of file
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 248cead..b8c8213 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -29,7 +29,8 @@ exports.onRenderBody = function (_ref, pluginOptions) {
     version: "3.0.19",
     innerHTML: "",
     openCartOnAdd: true,
-    useSideCart: false
+    useSideCart: false,
+    templatesUrl: null
   }, pluginOptions); // find public api key in options plugin or environment variable
 
 
@@ -50,7 +51,8 @@ exports.onRenderBody = function (_ref, pluginOptions) {
     ,
     currency: provideDefaultCurrency ? _options.currency : null,
     openCartOnAdd: _options.openCartOnAdd,
-    useSideCart: _options.useSideCart
+    useSideCart: _options.useSideCart,
+    templatesUrl: _options.templatesUrl
   }),
   /*#__PURE__*/
   // insert style
diff --git a/package.json b/package.json
index 0554420..7bc85f0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-snipcart-advanced",
   "main": "gatsby-ssr.js",
-  "version": "1.0.2-beta",
+  "version": "1.0.4-beta",
   "description": "Gatsby JS Plugin for Snipcart V3",
   "keywords": [
     "gatsby",
diff --git a/readme.md b/readme.md
index 1018a38..0511a7b 100644
--- a/readme.md
+++ b/readme.md
@@ -46,6 +46,8 @@ module.exports = {
             },
           },
         },
+        templatesUrl:
+          "path on your template file. Set file in the static folder, ex: '/snipcart/index.html'", // not work on dev. Gatsby not serve html file in dev https://github.com/gatsbyjs/gatsby/issues/13072
         innerHTML: `
             <billing section="bottom">
                 <!-- Customization goes here -->
@@ -69,6 +71,7 @@ Read the snipcart document [https://docs.snipcart.com/v3](https://docs.snipcart.
 - useSideCart : define if the "snipcart" library opens the cart in a side modal
 - locales : object of locales string. First level of keys is lang key. Example: {fr: {...}}
   localisation files is here => [https://github.com/snipcart/snipcart-l10n](https://github.com/snipcart/snipcart-l10n)
+- templatesUrl: template file for override snipcart element [https://docs.snipcart.com/v3/setup/customization#defining-templates-in-an-external-file](https://docs.snipcart.com/v3/setup/customization#defining-templates-in-an-external-file)
 - innerHTML : code for override snipcart element
   customization doc => [https://docs.snipcart.com/v3/setup/customization](https://docs.snipcart.com/v3/setup/customization))
 
@@ -79,6 +82,7 @@ Default values :
 - currency : "usd"
 - openCartOnAdd : true
 - useSideCart : false
+- templatesUrl: null
 - locales : {}
 - innerHTML : ''
 
diff --git a/src/components/Snipcart.jsx b/src/components/Snipcart.jsx
index 09dd7db..38c7836 100644
--- a/src/components/Snipcart.jsx
+++ b/src/components/Snipcart.jsx
@@ -1,6 +1,13 @@
 const React = require("react");
 
-const Snipcart = ({ publicApiKey, currency, innerHTML, openCartOnAdd, useSideCart }) => (
+const Snipcart = ({
+  publicApiKey,
+  currency,
+  innerHTML,
+  openCartOnAdd,
+  useSideCart,
+  templatesUrl,
+}) => (
   <div
     hidden
     id="snipcart"
@@ -8,6 +15,7 @@ const Snipcart = ({ publicApiKey, currency, innerHTML, openCartOnAdd, useSideCar
     data-currency={currency}
     data-config-add-product-behavior={openCartOnAdd === false ? "none" : null}
     data-config-modal-style={useSideCart === true ? "side" : null}
+    data-templates-url={templatesUrl}
     dangerouslySetInnerHTML={{
       __html: `
         ${innerHTML}
@@ -21,6 +29,7 @@ Snipcart.defaultProps = {
   innerHTML: "",
   openCartOnAdd: true,
   useSideCart: false,
+  templatesUrl: null,
 };
 
 module.exports = Snipcart;
diff --git a/src/gatsby-ssr.js b/src/gatsby-ssr.js
index dd6dbd4..7e9c0ec 100644
--- a/src/gatsby-ssr.js
+++ b/src/gatsby-ssr.js
@@ -16,6 +16,7 @@ exports.onRenderBody = ({ setPostBodyComponents }, pluginOptions = {}) => {
       innerHTML: "",
       openCartOnAdd: true,
       useSideCart: false,
+      templatesUrl: null,
     },
     ...pluginOptions,
   };
@@ -43,6 +44,7 @@ exports.onRenderBody = ({ setPostBodyComponents }, pluginOptions = {}) => {
       currency={provideDefaultCurrency ? _options.currency : null}
       openCartOnAdd={_options.openCartOnAdd}
       useSideCart={_options.useSideCart}
+      templatesUrl={_options.templatesUrl}
     />,
     // insert style
     <SnipcartStyles key="snipcart-style" version={_options.version} />,