Integrate an Existing Theme into Your Development Store ​

When collaborating on a theme in YouCan, each Partner need to set up the theme in their individual development store. This guide outlines the steps to integrate an existing theme in your dev store for collaborative development and testing.

Requirements ​

Before starting, make sure you have:

• An active Partner account.
• A development store set up from your partner dashboard.
• YouCan CLI installed.
• Node.js (Version 18.0.0 or higher), npm, and git installed.

Integration Steps ​

Install YouCan CLI ​

If YouCan CLI isn’t installed yet, install it by running:

npm install -g @youcan/cli@latest

For additional guidance, refer to the YouCan CLI documentation for themes.

Authenticate with YouCan ​

To access your development store and link it to the theme, authenticate with YouCan CLI by running:

youcan auth login

Follow the prompts to log in and authorize access to your development store.

Clone the Theme Repository ​

Start by cloning the theme project repository to your local environment:

git clone <repository_url>

Replace <repository_url> with the actual repository URL of the theme.

Configure the Theme for Your Dev Store ​

1. Navigate to the Theme Directory ​

cd <theme_directory>

2. Remove Previous Store Configuration ​

Delete the existing youcan.theme.json file in the theme folder. This will reset any previous store connections.

rm youcan.theme.json

3. Initialize the Theme in your Dev Store ​

Run the following command to generate a new ID linking the theme to your current dev store.

youcan theme init --inplace

After initializing, head over to your partner dashboard, where the theme should now be listed under the Themes tab, and in your Seller Area Portal > Store > Themes > My Installed Themes.

Preview and Customize the Theme ​

Finally, to preview and make changes to the theme, run:

youcan theme dev

This will open a new browser window with your store, allowing you to to view and test the modifications in real-time.