{"version":3,"sources":["webpack:///./src/img/help/shopify/shopify_1.png","webpack:///./src/img/help/shopify/shopify_3.png","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/pages/help/how-install-on-shopify.js","webpack:///./src/img/help/integrations/shopify.png","webpack:///./src/img/help/install-code/copy_button.png","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/shopify/shopify_4.png","webpack:///./src/img/help/install-code/gtm.png","webpack:///./src/components/help/installCodeInstruction/index.js","webpack:///./src/img/help/shopify/shopify_2.png","webpack:///./src/img/help/install-code/settings_menu.png","webpack:///./src/img/help/install-code/websites_menu.png","webpack:///./src/img/help/install-code/tracking_code_tab.png","webpack:///./src/img/help/shopify/shopify_5.png","webpack:///./src/img/help/shopify/shopify_6.png"],"names":["module","exports","Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","related","link","title","description","Wrapped","Article","src","img3","lazy","alt","img4","img5","img6","inline","img7","img8","href","role","frontmatter","metaTitle","metaDescription","logo","canonical","externalInstallLink","logoStyle","maxWidth","section","Container","Box","Close","span","ImageWrapped","img","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","imgStyle","imgModalStyle","modal","onClick","loading","React","Component","img1","img2","target","rel"],"mappings":"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","file":"component---src-pages-help-how-install-on-shopify-js-2a7a11e663005e4da2ab.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/shopify_1-6407020d6fb193b2cb23b39e8b602b89.png\";","module.exports = __webpack_public_path__ + \"static/shopify_3-58af5b4ec8521cd5b7751640e654a722.png\";","import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Card = styled.div`\n  margin: ${(props) => (props.setMarginBottom ? '2rem 0' : '2rem 0 3rem')};\n  border: none;\n\n  ${media.desktop} {\n    margin: ${(props) => (props.setMarginBottom ? '1.25rem 0' : '1.25rem 0 2rem')};\n  }\n`;\n\nexport const CardBody = styled.div`\n  box-shadow: 0px 0px 10px #00000029;\n  padding: 0;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImageModal from 'components/ui/image-modal';\nimport * as Styled from './styled';\n\nconst HelpImage = (props) => {\n  const { cardStyle, setMarginBottom } = props;\n  return (\n    <Styled.Card className=\"card\" style={cardStyle} setMarginBottom={setMarginBottom}>\n      <Styled.CardBody className=\"card-body\" style={cardStyle}>\n        <ImageModal {...props} />\n      </Styled.CardBody>\n    </Styled.Card>\n  );\n};\n\nexport default HelpImage;\n\nHelpImage.propTypes = {\n  cardStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  setMarginBottom: PropTypes.bool,\n};\n\nHelpImage.defaultProps = {\n  cardStyle: null,\n  setMarginBottom: false,\n};\n","import React from 'react';\n\nimport Article from 'components/help/helpArticle';\nimport Code from 'components/help/codeSnippet';\nimport Image from 'components/help/helpImage';\nimport CopyCodeSection from 'components/help/installCodeInstruction';\nimport Link from 'components/ui/link';\n\nimport img3 from 'img/help/shopify/shopify_1.png';\nimport img4 from 'img/help/shopify/shopify_2.png';\nimport img5 from 'img/help/shopify/shopify_3.png';\nimport img6 from 'img/help/shopify/shopify_4.png';\nimport img7 from 'img/help/shopify/shopify_5.png';\nimport img8 from 'img/help/shopify/shopify_6.png';\nimport logo from 'img/help/integrations/shopify.png';\n\nconst Content = () => {\n  return (\n    <div>\n      Using LiveSession requires placing a simple JavaScript code into your website. Read this\n      article to learn how to install our LiveSession tracking code on Shopify website.\n      <br />\n      <br />\n      <CopyCodeSection />\n      <ul className=\"list-unstyled\">\n        <li>\n          Open your Shopfiy dashboard and <strong>go to Online Store section</strong>.\n          <Image src={img3} lazy alt=\"Shopify integration\" title=\"Go to Online Store section\" />\n        </li>\n        <li>\n          Then open <strong>Themes</strong>.\n          <Image src={img4} lazy alt=\"Shopify integration\" title=\"Open Themes\" />\n        </li>\n        <li>\n          Find your current theme and click on <strong>Actions</strong>. After that choose{' '}\n          <strong>Edit code</strong>.\n          <Image src={img5} lazy alt=\"Shopify integration\" title=\"Edit code\" />\n        </li>\n        <li>\n          Open <strong>theme.liquid</strong> file\n          <Image src={img6} lazy alt=\"Shopify integration\" title=\"Open theme.liquid file\" />\n        </li>\n        <li>\n          Then please paste copied code into file before <Code inline>{'</head>'}</Code> closing tag\n          <Image src={img7} lazy alt=\"Shopify integration\" title=\"Paste code\" />\n        </li>\n        <li>\n          Click on <strong>Save</strong> button.\n          <Image src={img8} alt=\"Shopify integration\" title=\"Save\" />\n        </li>\n        <li>\n          After that you&apos;re ready to go! Check if your script works properly using{' '}\n          <Link href=\"/help/how-to-check-if-my-tracking-script-works/\"> this guide</Link>.\n        </li>\n      </ul>\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        Our tracking code doesn&apos;t work on checkout page, because of Shopify security measures.\n      </div>\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/how-to-install-livesession-script/',\n    title: 'How to install LiveSession script?',\n    description: 'Check how can you install LiveSession on any website.',\n  },\n  {\n    link: '/help/how-to-check-if-my-tracking-script-works/',\n    title: 'How to check if my tracking script works',\n    description: 'Check if your tracking code is installed correctly',\n  },\n];\n\nconst Wrapped = Article(Content);\n\nexport const frontmatter = {\n  metaTitle: 'How to install LiveSession on Shopify?',\n  metaDescription:\n    'Quick guide about the LiveSession installation process on store powered by Shopify.',\n  logo,\n  canonical: '/help/how-install-on-shopify/',\n  externalInstallLink: 'https://apps.shopify.com/livesession',\n  logoStyle: {\n    maxWidth: 160,\n  },\n};\n\nexport default () => (\n  <Wrapped title={frontmatter.metaTitle} related={related} section=\"Get Started\" {...frontmatter} />\n);\n","module.exports = __webpack_public_path__ + \"static/shopify-5701b3f808f01021d3986a112e384d67.png\";","module.exports = __webpack_public_path__ + \"static/copy_button-fff0c13eaa97f0ca289673d65f91e121.png\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n`;\n\nconst Box = styled.div`\n  background-color: transparent;\n  position: relative;\n  width: 95vw;\n  height: 95vh;\n  padding: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n`;\n\nconst Close = styled.span`\n  position: absolute;\n  font-size: 1.8rem;\n  right: 20px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 100px;\n  width: 40px;\n  height: 40px;\n  padding-bottom: 3px;\n  filter: drop-shadow(5px 1px 4px rgba(0, 0, 0, 0.2));\n  z-index: 10;\n`;\n\nconst ImageWrapped = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  margin: 0 auto;\n  border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Image = styled.img`\n  border: 1px solid #eaebec;\n  max-width: 100%;\n  height: auto;\n\n  @media (min-width: ${minWidthToShow}px) {\n    cursor: pointer;\n  }\n`;\n\nclass ImageModal extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n    };\n  }\n\n  componentDidMount() {\n    document.addEventListener('keydown', this.escFunction, false);\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener('keydown', this.escFunction, false);\n  }\n\n  escFunction = (event) => {\n    const { showModal } = this.state;\n\n    if (event.keyCode === 27 && showModal) {\n      this.closeModal();\n    }\n  };\n\n  closeModal = () => {\n    this.setState({ showModal: false });\n  };\n\n  openModal = () => {\n    if (window.innerWidth >= minWidthToShow) {\n      this.setState({ showModal: true });\n    }\n  };\n\n  render() {\n    const { showModal } = this.state;\n    const { src, imgStyle, imgModalStyle, alt, title, lazy } = this.props;\n\n    const modal = (\n      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <ImageWrapped\n            style={imgModalStyle}\n            src={src}\n            alt={alt}\n            title={title}\n            loading={lazy ? 'lazy' : null}\n          />\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Image\n          style={imgStyle}\n          onClick={this.openModal}\n          src={src}\n          alt={alt}\n          title={title}\n          loading={lazy ? 'lazy' : null}\n        />\n        {showModal && modal}\n      </>\n    );\n  }\n}\n\nexport default ImageModal;\n\nImageModal.propTypes = {\n  src: PropTypes.string.isRequired,\n  imgStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  imgModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  alt: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  lazy: PropTypes.bool,\n};\n\nImageModal.defaultProps = {\n  lazy: false,\n  imgStyle: null,\n  imgModalStyle: null,\n};\n","module.exports = __webpack_public_path__ + \"static/shopify_4-84bdc5f08ded6bc0a83c175c2943aa73.png\";","module.exports = __webpack_public_path__ + \"static/gtm-567442a92f1ee15381be3b98ab4a2444.png\";","import React from 'react';\nimport { SubTitle } from 'components/help/helpArticle';\nimport img1 from 'img/help/install-code/settings_menu.png';\nimport img2 from 'img/help/install-code/websites_menu.png';\nimport img3 from 'img/help/install-code/tracking_code_tab.png';\nimport img4 from 'img/help/install-code/copy_button.png';\nimport img5 from 'img/help/install-code/gtm.png';\nimport Code from 'components/help/codeSnippet';\nimport Image from '../helpImage';\n\nexport default () => (\n  <>\n    <SubTitle>Installing the code manually</SubTitle>\n    <p>\n      After logging in to LiveSession Application go to\n      <strong> Settings</strong>:\n    </p>\n    <Image\n      src={img1}\n      alt=\"Install code instruction\"\n      title=\"Go to settings on LiveSession Application.\"\n    />\n    <p>\n      Choose the website that you want to set up and click on the Tracking code. If you haven&apos;t\n      added a website yet, please click on Add website button and type in the website’s address\n      there:\n    </p>\n\n    <Image src={img2} lazy alt=\"Install code instruction\" title=\"Choose a website\" />\n    <p>\n      Open the <strong>Tracking code</strong> tab:\n    </p>\n    <Image src={img3} lazy alt=\"Install code instruction\" title=\"Click Tracking code tab\" />\n    <p>\n      And click on the button to <strong>Copy to clipboard</strong> button:\n    </p>\n    <Image src={img4} alt=\"Install code instruction\" title=\"Click to copy to clipboard\" />\n    <p>\n      Paste it into your website source code in the <Code inline>{'<head>'}</Code> section.\n    </p>\n    <SubTitle>Installing the code with Google Tag Manager</SubTitle>\n    <p>\n      If you want to install LiveSession tracking code using the Google Tag Manager, go to the\n      “Google Tag Manager” tab (1), click the “Connect Google Tag Manager” button (2) and follow the\n      on-screen instructions:\n    </p>\n    <Image src={img5} alt=\"Install code instruction\" title=\"Install with Google Tag Manager\" />\n    <p>\n      It&apos;s done! Now you can test if your code works correctly{' '}\n      <a\n        href=\"/help/how-to-check-if-my-tracking-script-works/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        using script debug mode\n      </a>\n      .\n    </p>\n  </>\n);\n","module.exports = __webpack_public_path__ + \"static/shopify_2-0045a9a5c89233cdcd088e3a2cf2561f.png\";","module.exports = __webpack_public_path__ + \"static/settings_menu-cd380aae18dc8baee602cd0ca5d8515a.png\";","module.exports = __webpack_public_path__ + \"static/websites_menu-24d9a33ac619057095c09ce7b248bdee.png\";","module.exports = __webpack_public_path__ + \"static/tracking_code_tab-a69df06ee7d179b611cb578fc6abd326.png\";","module.exports = __webpack_public_path__ + \"static/shopify_5-231ba6d0f334a5adfd1377bb390396ed.png\";","module.exports = __webpack_public_path__ + \"static/shopify_6-c43be12146959c5efd3b4a29c75bc566.png\";"],"sourceRoot":""}