Build an Advanced Gatsby Theme Shopify

Instructor: [00:00] Now that we've built our first theme, Gatsby theme marketing, we'll take the concepts that we used building that theme and build a slightly more advanced theme. The next theme we're going to build is Gatsby theme Shopify, which we use the Shopify source to go out and get our product variance from Shopify, and then render them on our Gatsby site.

[00:19] We'll need to create a new directory for our Shopify theme, then Yarn in it to create the package.json file. We'll need to make the source and the pages directories again. We'll need to move the swag store into our theme.

[00:52] This leaves us with a package.json and source pagesswag.js. We'll use the theme the same way we did for the marketing theme, by adding it to our package.json and the Gatsby config. Remember, we also need to create the index.js file to avoid the not found error.

[01:18] We'll copy the components directory, the Gatsby browser, Gatsby SSR, theme context, and wrap root element files into our new theme, from the marketing theme. Since we already did this work in the marketing theme, we can take advantage of that work by copying the files over from there instead of copying the files from www and having to modify them again.

[01:42] Now that we've moved the files over, we'll change swiss, the funk in our theme.js file. This gives us a third set of tokens that contrast against our other theme and the tokens we used in www. Note that we'll copy over the dependencies that we introduced in Gatsby theme marketing into our Shopify theme as well.

[02:09] Our swag page's still using the JSX Pragma from theme UI. We'll change that to point to our context. We'll import use context from React. We'll also import my theme context from our context for some manual usage later.

[02:28] Also, remember to import the global component. This will take advantage of the same behavior as we did in our marketing theme. It introduces the global styles for our theme styles, per page, that we control. Inside the default export, get the theme from our context and introduce the global styles.

[02:48] Back in www, we have a number of dependencies from our package.json that we can now move over to our Shopify theme. This includes dependencies like gatsby-image, gatsby-source-Shopify, and Shopify buy.

[03:03] Note that as you move the gatsby-source-shopify and Shopify buy dependencies over from www, we can remove them from the original package.json. Note that also, because we used gatsby-image in the rest of the site, we won't remove it from the original package.json.

[03:20] This is also true for plug-ins like gatsby-transformer-sharp and gatsby-plugin-sharp, which are both used in other aspects of our site. Save both package.jsons and we'll move on to the gatsby-config.

[03:32] Open the gatsby-config for www and also create a new gatsby-config in gatsby-theme-Shopify. We'll take the two sharp plug-ins and copy them over. We'll also move the gatsby-source-Shopify plug-in over. The gatsby-config for www is now one plug-in shorter than it used to be.

[03:52] As we build out more themes, we'll see fewer and fewer plug-ins in the www gatsby-config, as they will be moved into our theme. Gatsby-source-shopify takes some options, which is pagination size for both and access token.

[04:06] The way we have this setup, doesn't allow us to pass any options in. The one exception is proccess.m.Shopify access token, which comes from the environment variables. If we wanted to allow the user to change the shop name, we have to change the module that exports declaration in gatsby-config to be a function.

[04:25] Be sure to return an object from this function, as if you don't use the parenthesis around this opening bracket, the function will be treated as a function body, instead of an object return. Using the options that come in, we'll spread any additional options for the Shopify source into the option's object.

[04:45] This allows the user to override the shop name, the access token or any of the other defaults that we've set for them, as well as passing any or their own. Since we already have the plug-in setup the way we wanted, we don't need to use the options in the gatsby-config in www.

[05:01] It's important to note that the options, if we were to use them in www, are passed in the same as any other plug-in's options.

[05:09] Finally, in swag.js, we have a hardcoded domain. Go on and change this domain to an environment variable. While on gatsby Shopify domain, using the Gatsby prefix on an environment variable, means that the environment variable automatically gets injected into the client site bundle. If we don't prefix it with Gatsby, we would either have to manually pass the environment variable in, or it wouldn't be included at all. This would allow us to use secrets in gatsby-node without including them in our client site bundle.

[05:44] It's important to note at this point, that if you pass secrets into the options of a theme and you have a gatsby-browser file, any option you pass in will be leaked to the client. This is why it's important to use process.end to access any secrets in gatsby-node.

[06:05] We can now go into www and add the environment variable. Depending on how we want to access the environment variables or configuration options in gatsby-config, there are a number of other options we can use to get values into either our client bundle or a gatsby-node file.

[06:21] These include static queries and custom configuration nodes that take advantage of the create node API that Gatsby has for its GraphQL system, manual usage of web packs define plug-in, or React context in a wrap root element. There's a lot of flexibility in decision making here. Make sure you choose the approach that's best suited for your needs.

[06:45] Back in the root of our project, we'll run Yarn to link in gatsby-theme-Shopify. Now, we can run the site and check out our Shopify theme. Note that our marketing theme still functions. We have both of our blogs.

[06:58] Then, when we go to the swag store, we get the new theme on the swag store. Finally, to use the www tokens applied to the Shopify theme, we can create a shattered file, like we did for gatsby-theme-marketing or gatsby-theme-Shopify.

[07:14] We'll copy the deep preset from our marketing theme, as that's the preset that we use in www. Note that when creating new shadowed files for the first time, you may need to restart Gatsby developed to see them show up. Now, we can see the swag store uses the deep preset again.