eCommerce Without the Bloat
Separating the Storefront from the eCommerce platform allows for full developmental freedom when it comes to building web shops. The Advanced Kit has found a way to link Shopify and Eleventy to deliver lightning-fast stores that are dynamic to a merchant's Shopify backend.
The Kit takes advantage of Eleventy's Computed Data to modify the incoming Shopify data just before the page is rendered, providing product and collection data under the global "shopProducts" and "shopCollections" data variables.
While a lot of the heavy lifting is done for you, we still strongly advise having a basic level of familiarity with the Shopify ecosystem. As a developer, you will be responsible for setting up the Shopify Store, answering questions around it, and performing any maintainence tasks that appear.
There are also some limitations to this kit. To ensure full synchronisation between Shopify and the website, a rebuild will be triggered everytime a product is created, updated or deleted. Additionally, any custom functionality (search, user authentication, reviews) will need to be built yourself, as Shopify Apps won't work here.
However, for smaller clients with a limited range of products and fewer needs, the performance benefits of this headless system provide a edge in an otherwise competitive industry.
Learn More3 Steps to Success
If you haven't already, we advise managing your clients through a Shopify Partners account. This will allow you to manage all clients from one account, as well as providing financial benefits to stores you create for your clients. From the Partners admin page, follow the below steps.
- 01
Create the Store
From the "Stores" page, click "Add store" to create a new development store. Follow the wizard to create a new store for a client.
- 02
Set up the Custom App
When signed into the client's development store, go to Settings | Apps and sales channels | Develop Apps and create a new App. Give it a name, and configure the store to have access to all areas of the Storefront API.
- 03
Link to the Project
From the API Credentials tab, you can find a Storefront API access token. Use this in the .env file of the project. You will also need to replace the Store URL, which can be found in the top-left corner of the settings popover in Shopify.
Using Shopify Data, Carts and Checkouts
You can access the simplified data that we've modified with shopProducts and shopCollections. The raw data, direct from the Storefront API, can be accessed with shopify.products and shopify.collections. The "dump" filter may be useful here to output the full data tree onto the page.
Cart and checkout functionality is provided by the BuyButtonJS library. A product page can be set up by defining an element containing a data-product-id attribute, with the product idNumber as a value. The buy button, variant toggle, and quantity button will then appear in a div with an id of cs-buy.
More detailed guidance on how to set up an eCommerce store can be found in the project README.
