Customize an Existing Theme
When collaborating on a theme, each Partner need to set up the theme in their own dev store. This guide outlines the steps to add an existing theme in your dev store for collaborative development and testing.
Requirements
Before starting, make sure you have:
- Created a YouCan Partner Account and set a development store.
- Installed YouCan CLI
- The URL of the store that you want to work on, such as
example.youcan.shop. - Select a Code Editor to work in your codebase.
Step 1: Install YouCan CLI
If YouCan CLI isn’t installed yet, install it by running:
npm install -g @youcan/cli@latestpnpm add -g @youcan/cli@latestyarn global add @youcan/cli@latestbun add -g @youcan/cli@latestFor additional guidance, refer to the YouCan CLI documentation for themes.
Step 2: Authenticate with YouCan
To access your development store and link it to the theme, authenticate with YouCan CLI by running:
youcan auth loginFollow the prompts to log in and authorize access to your development store.
Step 3: 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.
Step 4: 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.json3. 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 # or simply -iStep 5: Preview and Customize the Theme
Finally, to preview and make changes to the theme, run:
youcan theme devThis will open a new browser window with your store, allowing you to to view and test the modifications in real-time.
Note
If prompted for a password to access your dev store, follow these instructions to retrieve it.