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.jsonfile, change:- The
vendorfield to the name of the account you are using. - The
namefield 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 whoamicommand 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 linkcommand to link your local files with the workspace you are logged into. - Run the
vtex browsecommand 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.