gatsbyjs / store.gatsbyjs.org

The Gatsby store for swag and other Gatsby goodies.

Gatsby Swag Store

This is the Gatsby store, where we make swag, stickers, and other Gatsby goodies available to contributors and Gatsby enthusiasts. 💪💜

Photo credit: doraforscale

See it live: store.gatsbyjs.org

Technical Overview

This store is built with data from:

• Shopify
• The Shopify JavaScript Buy SDK
• Auth0

We’re using Gatsby V2 and Emotion to get the data on screen.

The store is statically rendered using the Shopify source plugin, and the maintainer dashboard is a dynamic app (e.g. client-only routes) protected by Auth0.

Free Swag for Contributors

If you're a contributor to Gatsby, that means you can get one free item from our store! Log in using your GitHub account and we'll give you a discount code good for a t-shirt or socks. With five or more contributions, You can claim your level two swag!

See the docs for claiming contributor swag for additional details.

Cheap Swag for All

We sell our swag at pretty close to cost (we round for easy math) and we don’t charge shipping fees. Grab a t-shirt or socks and show everyone your favorite blazing fast framework!

Frequently Asked Questions

Why does it say I'm not eligible when I enter the discount code?

 

Try opening the store in an incognito window and then proceed to check out. When checking out, make sure you're using the same email that's listed on your GitHub account.

Why can't I get the store to authenticate?

 

We think this is a local storage issue, and it only seems to happen in Safari-based browsers. This includes all iOS browsers. Please see this issue for details (or to help us fix it).

Why won't my credit card work?

 

Please make sure the card isn't frozen or otherwise blocked by your financial institution. If it's not that, please send us an email to [email protected] if you're unable to pay with your credit card.

I've been waiting for my package, but it hasn't arrived yet.

 

International shipments can take up to 6 weeks to be delivered. 😱 Tracking updates may not always show up in real time on your tracking link. If you still have not received your order at the end of 6 weeks, please let us know by sending an email to [email protected], and we'll see how we can help!

I wanted to order something but it's out. How long will it take before it's back in stock?

 

Some of the swag has been selling like hotcakes (only less tasty and providing a bit more coverage). Once an item is out, it takes us about 3 weeks for it to get back in stock.

The delivery service is telling me I need to pay additional fees to get my order. I thought Gatsby covered shipping costs. What gives?

 

On some international orders, customs will add additional taxes, duties, and other fees. This is unpredictable, and we have no way of knowing if or when it will happen, or how much it will be. If this happens to you, there is, unfortunately, nothing else Gatsby can do. You are responsible for paying any additional fees imposed as part of the customs process. Thanks for your understanding!

Help! I received the wrong swag clothing size. What do I do?

 

If you ended up with the wrong t-shirt or other clothing size by mistake, contact us via email with your order number at [email protected] and we'll work with you to fix it. You don't have to submit another PR to get the correct size!

store.gatsbyjs.org's Issues

Change the auth0 domain to reference Gatsby

The Auth0 setup is currently using my account (jlengstorf.auth0.com). Ideally, this will use a Gatsby-related login link. When I checked, our company name was already taken, so we need to see if someone already claimed this.

cc: @KyleAMathews @calcsam

Due Date: 7/2 Add a sizing chart to store

cc @jlengstorf and @fk

T-shirt Size Chart

• This size chart is listed in inches and is the simplest one I could find: https://www.apparelnbags.com/next-level/size-chart.htm

At this point we're ordering a "one size fits most" sock from Sock Club. There is no sizing guideline for this sock, so I will have to reach out to them and ask

Add FAQ for discount codes

The discount codes have rules, and I don't think I can update Shopify's messaging, so we need an FAQ that explains how this works.

• Why isn't the discount code working?
  • Single user per contributor
  • Only valid for GitHub email
  • Only valid for certain swag
• How do I qualify for a contributor discount code?
• What about non-GitHub contributions?
  • What qualifies?
  • How do we verify non-GitHub contributions?

Add loading state during discount code retrieval

Currently, there's a lag when retrieving discount codes. I think this is necessary because we hit the API, which then has to hit GitHub's API and Shopify's API before it can respond.

However, it looks like nothing has happened right now for upwards of a second or two, which will likely result in duplicate clicks and probably rate limiting issues with GitHub.

We need to:

• disable the button after clicking
• show a loading state
• hide the loading state and re-enable the button (if visible) after the response comes back

GraphQL error

I am getting the following error when running develop or build:

error GraphQL Error Unknown field `allShopifyProduct` on type `RootQueryType`
file: /src/components/Store/ProductListings.js

Update default cart quantities

Set initial quantity inputs near "add to cart" buttons to 1 instead of 0 to avoid extra user interaction for most common case? (what I think would be most common case, didn't do actual research on that)

[Swag] Knee-high socks

Request: https://twitter.com/Brii_toe_knee/status/1012792593325985793

These would be fun to design, right @fk? 😄

Make it easier to dismiss the "Your Cart" overlay

Make it easier to dismiss the "Your Cart" overlay - add a close button, detect clicks outside the overlay or detect pressing esc?

Make sure logo works in Shopify emails

Right now the logo is breaking when test email is sent (Chrome, MacBook Pro, Gmail)

Make sure discount codes work for all of the contributor swag

Currently the discount code only seems to work for the purple shirt — it should allow contributors to get either the purple tee, dark deploy tee, or the socks for free.

Check this in the Shopify admin dashboard.

Redesign "claim your discount" on the dashboard

I had to guess that the Dashboard would let me claim my discount code. Wondering how we can improve that without cluttering the UI too much…will let that simmer a little.

Due Date: 7/3 | Make profile updates on swag store

@jlengstorf @fk

Goal

Make the profile area on the Swag Store dashboard easy to understand and fit in with upcoming design system.

Problem

Currently, we don’t have a way for people to see an actual profile.

Potential Solutions

• add a dropdown next to the profile picture to show that people can use the dashboard?
• remove the profile area altogether so people don't get confused?

Add a next step to the "order complete" screen

Should this link back to the home page? Somewhere else? Maybe Twitter?

Add ability to request a size that isn't currently in stock

Feedback from @marisamorby:

Add a "Don't see your size?" prompt that allows someone to contact us if they need a certain size but it's not available. We can then see how many of those requests we have and decide about batching it or suggesting that people get something else like socks.

Show contributor tweets on the dashboard

This may be more work than it's worth, but it could be cool to show tweets from contributors on the dashboard to help build community.

An example tweet: https://twitter.com/deutschevita/status/1005082671301742592

Questions:

• How are these curated and loaded?
• Do we need permission to do this?
• Is it worth the effort?

Add SKUs and weights to all products in Shopify

This is required for the fulfillment service to work correctly.

[Swag] Water Bottles

As cliche of a swag gift as they are, they are given out a lot for good reason! I use water bottles all the time and would love to rep Gatsby with one.

Klean Kanteen is one alternative, I'm sure there are many other great ones too!

Set up Shopify webhook to trigger rebuild on product update

IDEA: Swag for charity collaborations

What if we teamed up with different designers and artists to come up with swag, then held limited-time charity sales where all proceeds went to a charity of the designer's choice? (We'd vet all charities to make sure we know where we're sending donations.)

This could be a good idea for several reasons:

1. We get to contribute to good causes, and that's awesome
2. It gives us an opportunity to reach out to designers in the community for collaboration
3. Collab expands our network to groups we might not currently be reaching
4. When it's time to hire new contractors for design, we'll have prior experience with multiple designers to give us a head start
5. We get amazing swag for the store

I have several designers I know personally that we could reach out to, plus many in my Twitter network that I don't know personally, but could contact to gauge interest. I imagine we all know great designers, so this could be a fun way to tap our networks, do some good for the world, and stock up our swag store.

Figure out why the callback page is hanging

From @m-allanson:

I logged in using:

Safari Version 11.1 (13605.1.33.1.4)
Firefox Version 60.0.2 (64-bit)

and the process stalled on https://store.gatsbyjs.org/callback/ "Logging you in...". Tried a few times with the same result.

Chrome worked. Oh, until I tried it in a new chrome profile, then I got the same problem. Seems odd? When I saw the error in Chrome the following message was logged to the console:

{error: "invalid_token", errorDescription: "`state` does not match."} auth.js:68 

Should this page have a link back to the login or a support page?

I need to get in touch with @auth0 support to figure out what this means and how I can fix it.

cc: @lukeoliff

Update error codes and discount code functionality

• I wasn't able to apply the discount code "Your cart does not meet the requirements for the discount code". The error doesn't tell me what's wrong with my cart.

• Got a "Customer information does not meet the requirements for the discount code" message. Is that because I've used it already? This message could be clearer. If I've already used the discount code, then the store shouldn't generate new codes when I ask for them.

Update sock product details

• Add a photo of the actual socks
• Update sizing
• Double-check description

This is updated in the Shopify admin section.

Add loading state for discount code retrieval

Currently there's a lag when retrieving discount codes. I think this is necessary, because the API has to hit GitHub's API, then Shopify's API, then respond.

However, it currently looks like nothing has happened, which will likely result in duplicate clicks and probably rate limiting issues with GitHub.

We need to:

• disable the button after clicking
• show a loading state
• hide the loading state and re-enable the button (if visible) after the response comes back

Write copy for the store page

Right now there's placeholder copy at the top of the store page. That needs to be written before we can launch.

Due 7/3: Review design decisions for Gatsby store that will influence and be part of the Gatsby design system

@fk

cc @jlengstorf

Goal

Create a design system that works for the Gatsby dashboard and can be carried over to other elements of Gatsby.

To Review

• border radius
• key lines
• outlines
• typography

Lo-fi prototype testing for cart and layout updates of swag store

@jlengstorf @fk

Goal

• Understand what cart interaction and sizing chart interaction is the lowest effort and works best for people

Problem

• We don't want to spend time creating a cart and sizing chart interaction that ultimately needs to be reworked due to complexity, design system issues, etc.

Solution & Next Steps

• Create lo-fi prototypes of 3 different cart and sizing chart interactions that will work on both desktop and mobile.
• Prototypes will be tested by the team and a consensus reached as to which one best fits in to future design system and is easy to use
• Need to find a date that works for this meeting

Prototype Testing Steps

1. Once prototype is set up, share it out to participants via an issue with a link
2. Set a date for everyone to meet and go through a shared review
3. Facilitator will set up questions and guide meeting
   • review lasts one hour
   • 3 - 5 people can go through tasks and answer questions
   • additional participants observe and chime in with questions
   • questions to ask:
     • Show me how you would add an item to your cart
     • Show me how you would check to see if a small shirt would fit you
     • Show me how you would check out
     • For any functionality that is not live or we don't want to actively test, as the person to "Tell me what you think would happen if [you made this action]"
4. Facilitator takes notes on patterns, what works, and what doesn't work
5. Agree on what changes should be made and complete updates

[Swag] custom nail wraps

See this tweet for what I'm talking about: https://twitter.com/the_becca_lee/status/1009920104019083264?s=19

@fk I see some starry fingernails in our future. 😄💅

Make avatar/name of logged in user clickable as dashboard links

Feedback from @pieh:

it took me few seconds to locate link to dashboard (hard to recognize that text under "Gatsby Swag" title is actually menu). Without doing design changes, maybe make name/avatar clickable? (this was my first instinct to click those, because it usually would take me to "my account" page)

Update store email address to reach the whole team

The store is currently sending emails from my Gatsby email. We should make that an email that hits the whole @gatsbyjs/inkteam: [email protected] or [email protected] or something.

cc: @calcsam do we already have an all-inkteam email set up?

Add sizing chart with cm and inches

One thing I'm always happy about is a sizing chart to figure out wether I want M or L. Esp. the "M"s from the US tend to be a bit bigger than the European ones.

Add validation around the cart button

*Remove negative quantities from sizing options. If I try to add -1 shirts, nothing happens. I'm still able to click the button.

• clicking it without selecting a size will open the cart preview even though nothing's been added
• maybe change the quantity inputs to drop downs instead of free text?
• remove "choose a size" option from the size dropdowns, default to the first size
• the above changes should mean that there's always a valid size / quantity combo for the "Add to Cart" button to work with

Cart design examples for review

@fk

cc @jlengstorf

My suggestion for the cart would be the following:

• Person adds item to cart
• Cart icon changes number and dropdown appears with item in cart
• The cart has the following options
  • checkout
  • continue shopping
  • X in right hand corner of cart
  • After 3 seconds the cart will disappear on its own

Video clip resources

lululemon

nordstrom

anthropologie

[Swag] create Gatsby hair scrunchies

See this tweet for an idea of what I'm talking about:
https://twitter.com/brittanystoroz/status/1002486313663254528

Update T-shirt Sizing

• T-shirt sizing: List Unisex 2XL sizing
• T-shirt sizing: Remove L from women's sizing, we didn't order that

Make sure shipping is always free

@gatsbyjs/inkteam is going to cover shipping costs for swag — make sure Shopify is aware of this and not trying to charge for it. 😅

Care instructions and other copy doesn't show on page

I've put in the care instructions and other information on the product information section, but since there is no product details page, the information doesn't show up.

Verify that Figma prototyping works across devices

@jlengstorf

We want to make sure that we're able to do lo-fi prototyping on multiple devices (laptop, iPad, mobile phone) using Figma. Please confirm that the prototypes will work on those devices

Update Gatsby Contributor information

• Make it clearer on the homepage that Gatsby contributors can claim a discount code?
• Make it clearer what the discount code entitles you to? "one-time code valid for one free item from the store"

Replace the cart icon

Currently, the cart icon is a placeholder. We need to either create one or pick a new one from e.g. thenounproject.com

@fk when we get to the store fit and finish work, let's put this on your list.

Make it clear that all prices are in USD

It’s not clear what currency our prices are listed in. Add a note somewhere (the cart, maybe?) that all prices are in USD.

Look into smaller images from the Shopify API for cart preview

The cart preview image takes a while to load, for the dark deploy shirt it's a 3000px square image that gets displayed at 35px square

https://user-images.githubusercontent.com/381801/41650716-a4ce1eda-7476-11e8-9972-996d36413a18.png

[Swag] Gatsby hoodies

Because of course we need hoodies!

[Swag] Freelance Pants

@marisamorby originally created this issue; moving it to the store repo.

Purple pajama pants with the Gatsby logo on them.

Similar to this:

Redirect to the previous page on login

Right now login always redirects to the home page. Ideally, we'll track the page that someone was attempting to access, e.g /account/dashboard, and send them directly there. I think Auth0 already supports this; just need to look up how to implement it.

Update CONTRIBUTING.md in all gatsbyjs org repos to mention the swag process.

In all repos that make contributors eligible for swag, we need to add info to CONTRIBUTING.md to explain how to get it.

Here's copy we can use as a starting point — please edit/clarify as needed:

All contributors get free Gatsby swag!

Gatsby relies on contributors from the open source community, and we want to make sure you know how much it means to us that you’re willing to put time and effort into contributing to Gatsby.

To show our appreciation, everyone who contributes to Gatsby is eligible to receive free swag!

If you contribute to the Gatsby org on GitHub, you can claim your swag by logging into the Gatsby Maintainer Dashboard and requesting a discount code.

If you’ve contributed in other ways, such as giving talks about Gatsby, teaching others to use it, writing Gatsby articles/tutorials, participating in a Gatsby research project, or any other way, please email [email protected] or tweet at Gatsby on Twitter to claim your swag.

The fine print about free swag

• We will send one item from our swag store to each Gatsby contributor. Not all items are eligible due to high cost to create the swag, but we’ll make it clear when that's the case. There’s a limit of one free swag item per contributor.
• Shipping is covered. Gatsby will pay for the shipping costs to get your swag sent to you, no matter where you are in the world.

@gatsbyjs/inkteam please review this copy to make sure we're being as clear as possible.

Is it possible to redirect from the Shopify store to the Gatsby store?

Technically, https://gatsby-swag.myshopify.com/ is visitable (though it should be password-protected). Look into whether or not we can redirect that to store.gatsbyjs.org

Make it clear that logging in is only possible with a GitHub account

It should be more obvious that the only way to log in is with your GitHub account.

Write a blog post announcing the swag store

• Make it clear that all contributors are eligible for swag, even if they contributed before the store was launched
• Explain shipping. Potentially leave an escape hatch because we have no idea how much international shipping can cost 😱
• Walk through the reasoning. @marisamorby is planning to put together a full post on this, so we can potentially link out to it instead of covering it twice
• Walk through the tech stack. Keep this short, because I will be turning this into a blog series in the near-ish future

Show Free Shipping

Mention "free shipping" somewhere on the store homepage? Maybe in the cart would do it?

subtotal:
taxes:
shipping:
total price:

Question: Do changes in shopify product trigger rebuilds?

on mobile, so don't have ability to dig into code, but just curious.

Also, if not, how would you do this?