Install Tapita for Shopify Hydrogen

Install Tapita for Shopify Hydrogen

Integrate Hydrogen frontend

Requirements:
  1. Node v14+
  2. Yarn

Create Shopify private app to get Storefront access token

Step 1: Log in to your Shopify store and navigate to the Apps section.



Step 2: Take yourself to the bottom of the page and click on ‘Manage Private Apps’.



Step 3: Now click on ‘Create New Private App’



Step 4: Enter the App details by Filling up the ‘Private App Name’ and ‘Emergency Developer Email’ (this can be your email address).



Step 5: Now, click on "Allow to access storefront data using the StoreFront API" 



Step 6: Check all boxes to give all permissions:



Now, click on ‘Save’ at the bottom of the list to create the app. In the Popup, Click on ‘Create App’ to end the creation.



Done! Now copy the Storefront access token to use in the next steps.



Clone Tapita Hydrogen repo

Run these commands:
  1. yarn
  2. yarn dev
Open the file shopify.config.js and update these lines with your store's domain and storefront token acquired above.
  1. storeDomain: 'simicartdemo.myshopify.com',
  2. storefrontToken: 'e42b8ee293c1f005d15c8760ca014220',

Previewing a production build

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:
  1. yarn build
  2. yarn preview

Building for production

  1. yarn build
Then, you can run a local server.js using the production build with:
  1. yarn serve

Synchronize Shopify backend

In your Tapita account, go to Synchronization tab. Enter your URL link and Token:
  1. URL link: your store's base URL
  2. Token: the Storefront access token that you got in the above step


Then, click Verify.



Then, go to Integration tab. Copy the Integration Token.

alt text

Open the file at src/components/NotFound.server.jsx
And change the value at this line:
  1. const integrationToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
to the Integration Token copied above.
Then, re-run the serve command
  1. yarn serve
Done!

    • Related Articles

    • Install Tapita for ScandiPWA

      Download Tapita Page Builder extension for ScandiPWA v5:  https://marketplace.scandipwa.com/tapita-page-builder-scandipwa-v5.html Then follow these steps to install: ...

    • Install Tapita for Vue Storefront

      From your Vue project folder, install vuera to use ReactJS in Vue yarn add vuera Install Tapita Page Builder module npm install --save simi-pagebuilder-react Install React npm install --save react react-dom Then run this command yarn install Now we ...

    • Install Tapita for Magento PWA Studio

      Integrate PWA Studio frontend Clone Tapita PWA Studio repo Scenario 1: If you use @magento/create-pwa package From the root directory of your PWA Studio project, clone the repository: git clone ...

    • Install SimiCart Mobile App Connector

      After purchasing SimiCart mobile app and logging into your account, click App Management to go to your Dashboard. To get started, on the navigation bar, click on Integration. The Connector needs to be installed in the Magento backend to sync your app ...

    • Install PWA Connector (free version)

      PWA only works on HTTPS sites. Download PWA Connector from GitHub: https://github.com/Simicart/pwacommerceformagento2 Extract the downloaded package Use an FTP client (such as FileZilla) to upload the extracted files to Magento root folder on your ...