100+ The Fastest Stores Possible
Statically Generated Stores

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 More
Getting Started

3 Steps to Success

people

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.

Extending beyond the defaul

Using Shopify Data, Carts and Checkouts

people

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.

Join The Revolution

Make the World a Little Greener with Bodega

Shop Online
family