This article guides you through creating and configuring a website on deco.cx 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

Prerequisites

• A website on Deco. Create one for free at https://deco.cx/admin.
• An account on Shopify.

Creating the Website

If you already have a website on deco.cx, 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:

Connecting to Shopify

To connect to your Shopify account:

1. Access the admin panel of your site at https://deco.cx/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: gimenesdevstore.myshopify.com.

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 https://deco.cx/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.