This article guides you through creating and configuring a website on for an online store using data from the Shopify e-commerce platform Shopify.

Table of Contents

  1. Prerequisites
  2. Creating the Website
  3. Connecting to Shopify


  • A website on Deco. Create one for free at Deco Admin.
  • An account on Shopify.

Creating the Website

If you already have a website on, proceed to the next section. Otherwise, follow the steps in this guide to create one.

Ensure that your site is created based on the Store Shopify template below:

Creating the Website on

Connecting to Shopify

To connect to your Shopify account:

  1. Access the admin panel of your site at Deco Admin.

  2. In the top bar, select blocks.

  3. Choose the Apps tab.

  4. Select the shopify.ts App and click on the shopify block. You will see something like:

  5. Change the account configuration from gimenesdevstore to your Shopify account name. The account name is necessarily what's in your public URL, for example:

  6. Set the Storefront Access Token with all permissions (help).

  7. Set the Admin Access Token only with the permissions you want (the process is the same as the Storefront token).

  8. Click on Save and then Publish.

🎉 Congratulations, you have set up the integration with Shopify. To ensure the integration is working correctly, continue reading and create a reusable collection block.

Adding Your Collections to Your Website

After the Shopify setup is complete, try adding a shelf to your website.

  1. Access the admin panel of your site at Deco Admin.

  2. In the top bar, select blocks and then sections.

  3. Select the /Products/ProductShelf.tsx block and click on the + button.

  4. In the products field, select the Shopify integration.

  5. Fill in the query field with a search term, for example, "t-shirt.".

  6. Fill in the count attribute with the number of products to display, let's say 4.

  7. Now, in the top right corner, click on Create and give it a name, for example, Collection 139.

  8. In the top right corner, click on Publish.

  9. Now you can drag and drop the Collection 139 block onto any page.

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading