404 For Products and Collections

[Matt Coleman]

Thanks @thetre97 for your work on this - very helpful.
I'm running into an issue where all the single Product & Collection pages return as 404.

I'm using the provided gridsome.config.js setup. Is there a step I'm missing in order to get these dynamic pages to render out?

  templates: {
    ShopifyProduct: [
      {
        path: '/product/:handle',
        component: './src/templates/Product.vue'
      }
    ],
    ShopifyCollection: [
      {
        path: '/collection/:handle',
        component: './src/templates/Collection.vue'
      }
    ]
  },

[Travis Reynolds]

Apologies for the delay in getting back to you @mtclmn - been on holiday for the last couple of weeks.

Are you still having this issue? If so, would you be able to share a repo which has this problem...? Otherwise seeing the full gridsome.config.js, and checking you have src/templates/ShopifyProduct.vue etc will be useful.

Assuming you copied this starter exactly, you may not have any products published to this 'channel' on Shopify? It could explain the 404's:

[Travis Reynolds]

@mtclmn Did you manage to resolve this?

[Julio]

Something also to consider. I had something similar happen to me as well. Turns out that when Shopify makes the URL handles for each product and even the collections, it takes the title of your products and collections as they are. So for example, if you have a product titled My Brand™ Product, the handle made by Shopify will be my-brand™-product. This also happens to collections, so for example if you have a collection named Luxe Brand™ Collection, Shopify will make the handle be luxe-brand™-collection.

This makes for a conflict because Gridsome or the Shopify plugin for gridsome will make the handles for your shopify website, but it will take a handle like this luxe-brand™-collection and make it into this: luxe-brand-tm-collection. And so when the Shopify API is returning the original product/collection handle, luxe-brand™-collection, and the same is used in the template links, you will get a 404 page.

Anyways, just something I noticed. Btw, the collections handles can be changed in Shopify. The products on the other hand cannot unless you upgrade to the basic plan, however you could also consider exporting all the products as a cvs and changing the handles this way and importing them back.