Requirement

We conducted a POC for an e-commerce vendor who sells physical, electronic products using Shopify. Their strategy for next year is to do a global expansion of the e-commerce platform so anyone across the globe can access it. To achieve these goals client has defined the following strategy.

  • Continue using Shopify for product management.

  • Organic SEO Channel will be the main source of Leads

  • Dominate local region by making the website available in multiple languages

  • Fast-loading website for increased website lead conversation

Solution

  • Shopify is a great platform for end-to-end e-commerce management. Shopify is a pre-build commerce system which falls short when a brand wants to expand to a global audience and implement the latest SEO methodologies.

  • Contentful is an enterprise headless CMS that is built with Global Marketing & Localisation experiences; implementing the headless technology will increase the website speed by 80%

  • As clients want to continue using Shopify to manage their products, we conducted technical R&D and the ability to use Shopify along with Contentful. SCube is a Shopify Partner (pending certification); using the Shopify partner program, we have the insights to use Shopify Storefront API.

  • Using Shopify GraphQL Storefront API with JS Buy SDK to implement on Next.js, we should be able to

    • Get Product listing from Shopify

    • Get the Add to Cart form

    • Initiate checkout process from Contentful to Shopify

Challenges

  • Getting products from Shopify to Contentful.

  • Using content delivery API to get product details from Contentful.

  • Getting product details from Shopify using storefront API.

  • Cart & Checkout process.

  • Created a collection of products and stored them in Contentful, then fetched them into the page.

Outcome

Technology Used

Next.js, Contentful, Shopify Account (Products), Shopify API and TailwindCSS

Conclusion

  • We were able to connect Shopify with Contentful and list the product inside contentful.

  • On the contentful page, one can select which product to list from Shopify

  • All payments and logistics are managed via Shopify & Content is managed via Contentful