Once you have installed either the B2B Store Theme or the B2B New Store Theme (when using the B2B Suite solution), you can customize the theme according to your store’s business needs. To do so, follow the steps described below.
Do not proceed with these instructions if you haven't installed the B2B Store Theme or the B2B New Store Theme (if using the B2B Suite solution), or the customization will not work.
Step 1. Clone the boilerplate repository
First of all, you must clone the theme's boilerplate repository to your local files by running one of the following commands:
B2B Store Theme
_10git clone https://github.com/vtex-apps/b2b-store-theme
B2B New Store Theme (compatible with the B2B Suite)
_10git clone https://github.com/vtex-apps/b2b-newstore-theme
Step 2. Customize your storefront
Now you are ready to start working on storefront customizations using the code editor of your preference:
- Open the repository folder in your local files.
- In the
manifest.json
file, change:- The
vendor
field to the name of the account you are using. - The
name
field to one of your choosing.
- The
- Customize the files in your local repository by editing the theme’s blocks to create a storefront that matches your business needs and visual identity. Refer to our Configuring templates and Block templates guides for more information on how Store Framework blocks work.
- Save all changed files locally.
Step 3. Link the theme to your workspace
Once you have finished customizing your local files, you need to link them with your development workspace so that it reflects your local changes. Check out our guide if you want to learn more about linking an app.
Before you link your local files with your current workspace, you should run the
vtex whoami
command to check if you are using the account and development workspace where you want to apply your customizations.
Follow the steps below to link your customized theme with your development workspace.
- Using your terminal, access the customized theme repository folder in your local files.
- Run the
vtex link
command to link your local files with the workspace you are logged into. - Run the
vtex browse
command to check out your customized storefront.
Step 4. Publish your new theme
If you are comfortable with your new storefront and you want to make your changes public in your store’s production workspace, follow the steps described in our guide on Making your new app version publicly available.