{"id":24015392,"url":"https://github.com/travis-r6s/gridsome-source-shopify","last_synced_at":"2026-03-11T06:32:38.369Z","repository":{"id":36305929,"uuid":"186152699","full_name":"travis-r6s/gridsome-source-shopify","owner":"travis-r6s","description":"Shopify source plugin for Gridsome","archived":false,"fork":false,"pushed_at":"2023-12-27T12:27:06.000Z","size":492,"stargazers_count":15,"open_issues_count":6,"forks_count":14,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-30T17:59:13.592Z","etag":null,"topics":["gridsome","gridsome-source","gridsome-source-shopify","shopify"],"latest_commit_sha":null,"homepage":"https://gridsome-shopify-starter.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/travis-r6s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-05-11T15:54:13.000Z","updated_at":"2025-06-30T20:30:25.000Z","dependencies_parsed_at":"2023-12-27T13:38:59.238Z","dependency_job_id":"86ac5962-0a05-4b00-88ee-8d15eaae1673","html_url":"https://github.com/travis-r6s/gridsome-source-shopify","commit_stats":null,"previous_names":["travis-r6s/gridsome-source-shopify","thetre97/gridsome-source-shopify"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/travis-r6s/gridsome-source-shopify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-source-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-source-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-source-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-source-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/travis-r6s","download_url":"https://codeload.github.com/travis-r6s/gridsome-source-shopify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-source-shopify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30373477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gridsome","gridsome-source","gridsome-source-shopify","shopify"],"created_at":"2025-01-08T07:55:26.646Z","updated_at":"2026-03-11T06:32:38.326Z","avatar_url":"https://github.com/travis-r6s.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gridsome-source-shopify\n\n\u003e Shopify source plugin for Gridsome\n\nThis plugin supports the Storefront API's [`transformedSrc` image field](#transformsrc), as well as [currency formatting](#amount).\n\n\n1. [Install](#install)\n2. [Usage](#usage)\n3. [Routes \u0026 Templates](#routes--templates)\n4. [Page Query](#page-query)\n5. [Metafields](#metafields)\n6. [Additional Resolvers](#additional-resolvers)\n7. [Helpful Snippets](#helpful-snippets)\n\n## Install\nyarn:\n```bash\nyarn add gridsome-source-shopify\n```\n\nnpm:\n```bash\nnpm install gridsome-source-shopify\n```\n\n## Usage\n\n`gridsome.config.js`\n```js\nmodule.exports = {\n  plugins: [\n    {\n      use: 'gridsome-source-shopify',\n      options: {\n        storeName: '\u003cmy-store\u003e', // OR\n        storeUrl: 'https://\u003cmy-store\u003e.myshopify.com',\n        storefrontToken: '\u003cstorefront-api-token\u003e', //Required\n        typeName: 'Shopify', // Optional, default is 'Shopify'\n        types: [ 'Product', 'Collection' ], // Optional, default is all types\n        perPage: 100 // Optional, default is 100\n      }\n    }\n  ]\n}\n```\n\n## Routes \u0026 Templates\n\nNow you can create a template called `ShopifyProduct.vue`, and specify the route for it - Gridsome will automatically generate pages for all products.\n\n`gridsome.config.js`\n```js\nmodule.exports = {\n  templates: {\n      ShopifyProduct: '/product/:handle'\n  }\n}\n```\n\nYou can also specify templates to use if you do not want to name the template files `Shopify\u003ctype\u003e`, or if you want to change the page routes:\n\n`gridsome.config.js`\n```js\nmodule.exports = {\n  templates: {\n      ShopifyProduct: [\n        {\n          path: '/product/:handle',\n          component: './src/templates/Product.vue'\n        }\n      ],\n      ShopifyCollection: [\n        {\n          path: '/collection/:handle',\n          component: './src/templates/Collection.vue'\n        }\n      ]\n    },\n  }\n```\n\n\n## Page Query\n\nOnce you have specified the route for a type, you can query it by ID.\n\n```vue\n\u003cpage-query\u003e\nquery Product ($id: ID!) {\n  shopifyProduct (id: $id) {\n    id\n    descriptionHtml\n    title\n  }\n}\n\u003c/page-query\u003e\n```\n\nNow this product will be available at `this.$page.shopifyProduct`:\n```vue\n\u003ctemplate\u003e\n  \u003cLayout\u003e\n    \u003ch1\u003e{{ $page.shopifyProduct.title }}\u003c/h1\u003e\n    \u003cdiv v-html=\"$page.shopifyProduct.descriptionHtml\" /\u003e\n  \u003c/Layout\u003e\n\u003c/template\u003e\n```\n\n## Metafields\n\nTo make metafields available to query in the Storefront API, you should follow this guide: [Retrieve metafields with the Storefront API](https://shopify.dev/tutorials/retrieve-metafields-with-storefront-api).\nThen metafields will be available in your product query.\n\n## Additional Resolvers\n\nThis plugin adds a couple of custom resolvers to help with image sizing, and currency formatting.\n\n#### `transformSrc`\n\nEach image type includes a `transformSrc` field, similar to the Shopify Storefront's. You can create different image sizes and scales with this - for example, creating a thumbnail image, and a card/cover image:\n\n```graphql\n...\n  image {\n    ...\n    thumbnail: transformedSrc(maxWidth: 100, maxHeight: 100, crop: CENTER)\n    coverImage: transformedSrc(maxWidth: 600, maxHeight: 400, crop: CENTER)\n  }\n...\n```\n\n#### `amount`\n\nEach price type includes extra formatting arguments in the `amount` field, where you can specify if you want to, and how to, format the price asa  currency:\n\n```graphql\n...\n  price {\n    amount(format: true) # Defaults to en-US locale, and the store's currency code.\n    # Result: $25.00\n  }\n...\n...\n  priceRange {\n    minVariantPrice {\n      amount(locale: \"en-GB\", currency: \"GBP\") # Specify a locale and a currency code to use.\n      # Result: £25.00\n    }\n  }\n...\n```\n\n## Helpful Snippets\n\nYou will probably need to find a product variant by the options that have been selected - computed properties are your friend...\n\n```vue\n\u003ctemplate\u003e\n  ...\n    \u003cdiv\n      v-for=\"option in $page.shopifyProduct.options\"\n      :key=\"option.id\"\n      class=\"field\"\u003e\n      \u003cdiv class=\"control\"\u003e\n        \u003clabel\n          :for=\"option.name\"\n          class=\"label\"\u003e\n          {{ option.name }}\n          \u003cdiv class=\"select is-fullwidth\"\u003e\n            \u003cselect\n              :id=\"option.name\"\n              v-model=\"selectedOptions[option.name]\"\u003e\n              \u003coption\n                v-for=\"value in option.values\"\n                :key=\"value\"\n                :value=\"value\"\u003e\n                {{ value }}\n              \u003c/option\u003e\n            \u003c/select\u003e\n          \u003c/div\u003e\n        \u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cimg :src=\"currentVariant.image.transformedSrc\"\u003e\n      \u003cdiv v-html=\"$page.shopifyProduct.descriptionHtml\" /\u003e\n    \u003c/div\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: () =\u003e ({\n    selectedOptions: {}\n  }),\n  computed: {\n    currentVariant () {\n      // Find a variant where every variants options matches those that are currently selected\n      return this.$page.shopifyProduct.variants.find(variant =\u003e variant.selectedOptions.every(({ name, value }) =\u003e value === this.selectedOptions[ name ]))\n    }\n  },\n  // Set the first variant as a default option\n  mounted () {\n    const [firstVariant] = this.$page.shopifyProduct.variants\n    this.selectedOptions = firstVariant.selectedOptions.reduce((options, { name, value }) =\u003e ({ [ name ]: value, ...options }), {})\n  },\n  // The mounted hook doesn't always run on page change - so make sure we set the first variant if the route changes\n  watch: {\n    $route (to, from) {\n      const [firstVariant] = this.$page.shopifyProduct.variants\n      this.selectedOptions = firstVariant.selectedOptions.reduce((options, { name, value }) =\u003e ({ [ name ]: value, ...options }), {})\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nAll Shopify products have at least one variant - even if a product has no options (i.e. colour/size), it will have a default variant that contains the base product price/title etc. This single variant will also create a default option (`title`), which you will most likely want to filter out, as there is only one variant you can select anyway. If this is the case then the product options should be hidden, and the single variant set as the default selected option (as above):\n\n```vue\n\u003ctemplate\u003e\n  ...\n    \u003cdiv\n      v-for=\"option in productOptions\"\n      :key=\"option.id\"\n      class=\"field\"\u003e\n      ...\n    \u003c/div\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  ...\n  computed: {\n    // Single variants have an default option called 'Title' - filter this out.\n    productOptions () { return this.product.options.filter(({ name }) =\u003e name !== 'Title') },\n  }\n  ...\n}\n\u003c/script\u003e\n```\n\nYou can also create relationships from products/product variants to other types, if they return an ID or array of ID's as one of their fields. For example, with Contentful's integration you could do something like the below:\n\n`gridsome.server.js`\n```js\nmodule.exports = api =\u003e {\n  api.loadSource(actions =\u003e {\n    const contentfulProducts = actions.getCollection('ContentfulProduct')\n    contentfulProducts.addReference('shopifyProductVariantId', 'ShopifyProductVariant')\n  }\n}\n```\n\nThen query the actual product/product variant from within a query:\n\n```graphql\nquery {\n  allContentfulProduct {\n    edges {\n      node {\n       name\n        shopifyProductVariantId {\n          id\n          title\n          price {\n            amount\n          }\n        }\n      }\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravis-r6s%2Fgridsome-source-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftravis-r6s%2Fgridsome-source-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravis-r6s%2Fgridsome-source-shopify/lists"}