Guides & Tutorials

A Beautiful E-commerce Website Theme For Gatsby

Guides & Tutorials

A Beautiful E-commerce Website Theme For Gatsby

Sometimes the hardest part of getting your great e-commerce website into the world is picking a font. Just me? Even if you don't find this part hard, it is definitely time consuming. So, we are very happy to introduce to you a very well-designed e-commerce theme, with fantastic fonts if I may say, from the masterminds at Matter Design. We teamed up with the award-winning e-commerce agency to bring a beautiful site theme that lets you hook up all your favorite tooling to bring your store to life faster!

responsive screenshots of the shop

  • Play with the live demo
  • Start digging into the code in the theme repo
  • Use this button to clone the repo, create a new Netlify project, and get it deployed ASAP:

Deploy to Netlify

Let's dig into how to make some edits, how to deploy it, and some suggestions for tools that can help you add important functionality to this theme.

Make this E-Commerce Theme Matter to You

There are a few different ways to make the code base yours.

  • From the theme's repo you can clone the repo using the 'Use this template' button at the top right or run the git clone command from your terminal.

    git clone https://github.com/netlify-templates/gatsby-ecommerce-theme
  • You can install the Netlify CLI, then run a command that will clone the repo and create a new Netlify project.

    npm install netlify-cli -g
    
    netlify sites:create-template https://github.com/netlify-templates/gatsby-ecommerce-theme
  • From your Netlify dashboard you can also create a new project from a template by clicking the 'Add new site' dropdown and selecting 'Start from a template'.

 

start from a template button

 

Find the 'Gatsby E-Commerce Theme', and click the 'Use template' button overlay on the image.

 

template page screenshot

 

Click the button for your preferred Git provider.

 

git provider screen

 

Feel free to change the repository name, then click the 'Deploy site' button to get the repo cloned to your account and deploy the site.

 

deploy site page

 

This will send you to your new Netlify project page!

Making Customizations

Now that you have the project, you can start to edit the code to customize the website. For instance, to change the image or title on the home page you would edit the src/pages/index.js file's <Hero/> component.

<Hero
  maxWidth="500px" // how big the image's maximum should be
  image={"/banner1.png"} // the source location for the image
  title={"Essentials for a cold winter"} // the main text displayed
  subtitle={"Discover Autumn Winter 2021"} // text found below the main text
  ctaText={"shop now"} // the presented text for a user to click on
  ctaAction={goToShop} // the location the call-to-action text directs users
/>

You can learn more about the project structure and content changes here in the repo

Adding More Functionality

With your e-commerce website theme customized, you can now add your preferred tools for grabbing your product information, cart state management, payment, and more. Matter Design has a section in the theme called the How to use section that discusses their JAMM headless e-commerce framework tool that would work well for this theme.

There are also a variety of other tools that you can use like BigCommerce, Square, Stripe, Shopify, Snipcart, and so many more, plus this whole list of Headless CMS libraries from the Jamstack website.

Make your E-Commerce Site Matter to the Rest of the World

There are multiple ways to deploy your website for the world to see.

  • Using the Netlify CLI you can run netlify init if the project isn't already hooked up to a Netlify project, then run netlify deploy --prod (if you don't use --prod you will get a deploy preview link).

  • From your Netlify projects dashboard you can select the 'Deploy' tab, and click the 'Trigger deploy' button.

 

deploy page

 

With that your website will be live for the world to give you lots of money, I mean, if that's what you're into 🤑.

Do Something Else that Matters

You've saved so much time, and now you have the ball rolling. Go reward your efforts and do something fun, relaxing, inspiring, heart-filling, something that matters to you. We can't wait to see what you've created. Happy coding 👩🏻‍💻!

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper