Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

StyleShout Woo Ported to GatsbyJS

Simple, clean and responsive landing page for your product or service. This is a GatsbyJS port of StyleShout's Woo template.



Getting Started


GatsbyJS should be installed in your local environment. See instructions here for details.


  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying this starter.

    # create a new Gatsby site using the Gatsby Woo starter
    gatsby new my-project
  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd my-project/
    gatsby develop
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the my-project directory in your code editor of choice and edit the markdown content files in the content folder. Save your changes and the browser will update in real time!

Site Configuration

The configuration settings and metadata of your new site can be found in the siteMetadata object of gatsby-config.js at the root of your project directory.

The default settings are:

siteMetadata: {
  title: `Woo - Free Responsive HTML5/CSS3 Template`,
  author: {
    name: `Joe Bloggs`,
  description: `Woo is a clean, modern, landing page site template.`,

  /* Choose and arrange the sections to be displayed on the landing page */
  sections: [

  /* Configure the navigation menu */
  menuItems: [
    {path: 'features', label: 'Features'},
    {path: 'pricing', label: 'Pricing'},
    {path: 'screenshots', label: 'Screenshots'},
    {path: 'testimonials', label: 'Testimonials'},
    {path: 'subscribe', label: 'Subscribe'},

  /* Provide social media accounts. Remove or add new services. (The value 'fa' is the name of FontAwesome icon to display. Choose from here: ) */
  social: [
    { service: `Facebook`,
      url : ``,
      fa: `facebook` },
    { service: `Twitter`,
      url : ``,
      fa: `twitter` },
    { service: `GitHub`,
      url : ``,
      fa: `github` },

  /* Path to favicon and logo (located inside the 'static' folder) */
  favicon: `favicon.png`,
  logo: `/images/logo.png`,

  /* Logo and text to show in footer */
  footer: {
    logo: `/images/footer-logo.png`,
    text: `This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.`,

  /* Address and contact info to show in footer */
  address: {
    line1: `1600 Amphitheatre Parkway`,
    line2: `Mountain View, CA`,
    line3: `94043 US`,
  contacts: [
    { text: `647.343.8234`, url: `tel:6473438234` },
    { text: `123.456.7890`, url: `tel:1234567890`},
    { text: ``, url: ``},

Customising Content

Landing page

The content for the landing page can be found in the content/ folder, in which each YAML file corresponds to a particular section on the page.

Additional pages

To add more pages, just add a new .js file in the src/pages/ directory and Gatsby will automatically create a new page with the same name as the file.

These files are written in JSX. A sample/style guide can be found here (source).


Currently images are stored in the static/ folder.


This theme was originally designed by StyleShout and was ported to Gatsby by Fahad Desmukh.


This project is licensed under the GPLv3 License - see the LICENSE file for details


StyleShout's Woo template ported to GatsbyJS








No releases published


No packages published