website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
SHIPPING - SETUP
Shipping Methods
Shipping Zones
Shipping Method Setup Examples
TAXES - Setup
Tax Automation with Stripe Tax
Tax Automation with Avalara
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by archbee 

Gatsby Starter

9min

Chord's Gatsby starter is fully functional Gatsby ecommerce site, powered by the Chord API and Contentful. The GitHub repo includes pages, templates, components, and GraphQL queries that work out of the box, but are fully editable so you can build something beautiful!

Here are some common CLI commands that you'll use to work with the starter:

Starting a development server

yarn
npm
|
yarn start


This command starts the development server. By default, your site will be available at http://localhost:8000, but if that port is already in use, you'll be prompted to choose another port. Hot reload is automatically enabled.

Running tests

yarn
npm
|
yarn test             # runs all tests
yarn test:watch       # runs all tests in watch mode


This starter uses Jest and react-testing-library to test React components.

You can run yarn test:watch as you're working on your tests to have the tests re-run automatically as you're editing them.

Building the production site

yarn
npm
|
yarn build


This command will compile the site and get it ready for deployment. It will result in a directory called public that contains your entire static site.

Previewing the production site

yarn
npm
|
yarn serve


You can run this command to serve the production site you've generated with npm run serve, usually for local testing.

Clearing your local cache

yarn
npm
|
yarn clean


You might try this command if your local project seems to have issues around not getting the correct content. It wipes out your local cache.

Product Merchant Feed

This starter generates a product RSS feed that should be compatible with Google Merchant and Facebook Ads. To get your products to show across Google, including Shopping Ads, you must upload a product feed to your Google Merchant Center. We will not cover configuring Google Merchant Center in this documentation. However, here is a few useful things to know about the feed:

  • The product feed is generated automatically every time the site is built (via npm run build or yarn build).
  • The product feed can be found in your default build folder, under products.rss.
    • Example: ./public/products.rss
  • The feed is also being served at the root of your web site (example: http://localhost/products.rss).
  • The feed is built using a local plugin located at ./plugins/gatsby-plugin-products-feed, which is configured in ./gatsby-config.js.
  • This plugin offers default feed options, and being a local plugin, it can be extended to suit your needs.
  • Please refer to the plugin's documentation located at ./plugins/gatsby-plugin-products-feed/README.md for more details.
  • Additionally, the documentation covering all Google Product data attributes can be found here.



Updated 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
Quick Start
NEXT
SDK Reference
Docs powered by archbee 
TABLE OF CONTENTS
Starting a development server
Running tests
Building the production site
Previewing the production site
Clearing your local cache
Product Merchant Feed