Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkB2B setup
B2B Store Theme

B2B Store Theme is a frontend template to help your store get started with VTEX’s core features for businesses selling to other businesses.

The B2B Store Theme is not compatible with the B2B Suite solution. Therefore, these instructions do not apply to stores using the B2B Suite. If you are using the B2B Suite, refer to the B2B New Store Theme documentation.

Prerequisites

Set up your development environment

Before starting with the B2B Store Theme setup itself, you must:

  1. Set up a workspace to develop in VTEX IO on your machine.
  2. Follow these instructions to make sure you meet all the prerequisites to develop using Store Framework.
  3. Make sure your store’s catalog is integrated with VTEX Intelligent Search, as described in this article.

Install required B2B apps

Now you must install the required apps listed below. They are mandatory for the B2B Store Theme to work properly.

Wishlist

Wishlist is an app that allows your store’s customers to bookmark their favorite products by clicking on a heart icon.

To install this app on your store, run the following command on the CLI:


_10
vtex install vtex.wish-list@1.x

Reviews and Ratings

The Reviews and ratings app enables your clients to submit reviews and ratings — using a star rating system — to your store’s products.

Install it using the command:


_10
vtex install vtex.reviews-and-ratings@2.x

After that, go to your store's Admin to proceed with the installation.

Once you are logged in, follow these steps:

  1. Go to the Account Settings module.
  2. Click on Apps.
  3. Then, click on My apps.
  4. Then, find the Reviews and Ratings app card and click on Settings.
  5. It is recommended that you check the Display stars in product-rating-summary if there are no reviews option and uncheck the Display total reviews number on product-rating-summary block option, as illustrated below.
  6. Click on the Save button.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGPQ0dGvrq7+////9evXGWxtbcvLy1+/fm1t4wgAqM0NEALw3uIAAAAASUVORK5CYII=","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/installing-the-b2b-store-theme-0.png","width":1491,"height":826,"type":"png"}}

Quick Order

Quick Order is an app that enables customers to make bulk orders.

To install it, use the following command:


_10
vtex install vtex.quickorder@3.x

Location Availability

The Location Availability app shows product availability and shipping information in the storefront based on the customer’s location, providing a personalized shopping experience.

Install this app on your store using the vtex.location-availability@0.x command.

Shopper Location

Shopper Location is a geolocation app. Once it is installed, the app tracks the customer’s location, after permission is granted.

To install it, use the following command:


_10
vtex install vtex.shopper-location@0.x

Order Quote

Order Quote is an app that allows the B2B customer to save a cart’s information and use it later for any order.

To install it, use the following command:


_10
vtex install vtex.orderquote@1.x

Wordpress integration

The Wordpress integration app enables the account admin to create content on your store’s front through Wordpress’ API.

To install this app, run the following command on the CLI:


_10
vtex install vtex.wordpress-integration@2.x

Admin Organizations

In brief, the Admin Organizations app is responsible for managing the Roles and Permissions modules on your store’s Admin.

To install it, run vtex install vtex.admin-organizations@1.x on the CLI.

Organizations

The Organizations app allows you to create an organization — a business store — and manage users under that organization with different roles.

Run the command vtex install vtex.organizations@1.x to install it on your store.

Create fields in Master Data

After installing all the required apps, you need to create two new fields in Master Data: isOrgAdmin and organizationId. You must create these fields on the Client entity. To do so, check our step-by-step tutorial on how to create a field on Master Data.

Field nameType
isOrgAdminBoolean
organizationIdVarChar 100

When creating the isOrgAdmin field, you should check the following checkboxes:

  • Make readable without credential
  • Is searchable
  • Is filterable

When creating the organizationId field, you should check the following checkboxes:

  • Is nullable
  • Make readable without credential
  • Allow editing without credential
  • Allow filter without credential
  • Is searchable
  • Is filterable

After creating the new fields, it is mandatory to Publish the CL entity and to Reindex it by clicking the buttons illustrated below. Otherwise, the B2B Store Theme will not be applied correctly.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJUlEQVR4nAEaAOX/AI6Nj+Xh4tTQ0a6vrwA3KzLKw8aon6M3KzLOhQ45T95AEgAAAABJRU5ErkJggg==","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/installing-the-b2b-store-theme-1.png","width":152,"height":58,"type":"png"}}

Install B2B Easy Setup (optional)

If you are setting up a new store, you can follow the instructions in this guide to quickly set up a test store with sample data using the B2B Easy Setup app.

We strongly advise that you do not run Easy Setup on a production environment. It will make irreversible changes and may delete some previous configurations on your store.

Create Master Data schemas

If you have installed B2B Easy Setup and selected Organizations resources, you can skip this step, because the required Master Data schemas will already have been created and you should have all Permissions and Roles ready.

If you have opted not to install B2B Easy Setup, you need to use the Save schema by name endpoint of the Master Data API - V2 to create the following schemas.

BusinessPermission schema

Path paramValue
data_entity_nameBusinessPermission
schema_namebusiness-permission-schema-v1

Request body:


_37
{
_37
"properties": {
_37
"name": {
_37
"type": "string"
_37
},
_37
"label": {
_37
"type": "string"
_37
}
_37
},
_37
"v-default-fields": [
_37
"name",
_37
"label",
_37
"id"
_37
],
_37
"required": [
_37
"name"
_37
],
_37
"v-indexed": [
_37
"name"
_37
],
_37
"v-security": {
_37
"allowGetAll": true,
_37
"publicRead": [
_37
"name",
_37
"label",
_37
"id"
_37
],
_37
"publicWrite": [
_37
"name",
_37
"label"
_37
],
_37
"publicFilter": [
_37
"name",
_37
"id"
_37
]
_37
}
_37
}

BusinessRole schema

Path paramValue
data_entity_nameBusinessRole
schema_namebusiness-role-schema-v1

Request body:


_48
{
_48
"properties": {
_48
"name": {
_48
"type": "string"
_48
},
_48
"label": {
_48
"type": "string"
_48
},
_48
"permissions": {
_48
"type": "string"
_48
}
_48
},
_48
"definitions": {
_48
"permission": {
_48
"type": "string"
_48
}
_48
},
_48
"v-default-fields": [
_48
"name",
_48
"label",
_48
"id",
_48
"permissions"
_48
],
_48
"required": [
_48
"name"
_48
],
_48
"v-indexed": [
_48
"name"
_48
],
_48
"v-security": {
_48
"allowGetAll": true,
_48
"publicRead": [
_48
"name",
_48
"label",
_48
"permissions",
_48
"id"
_48
],
_48
"publicWrite": [
_48
"name",
_48
"label",
_48
"permissions"
_48
],
_48
"publicFilter": [
_48
"name",
_48
"id"
_48
]
_48
}
_48
}

BusinessOrganization schema

Path paramValue
data_entity_nameBusinessOrganization
schema_namebusiness-organization-schema-v1

Request body:


_54
{
_54
"properties": {
_54
"name": {
_54
"type": "string"
_54
},
_54
"telephone": {
_54
"type": "string"
_54
},
_54
"address": {
_54
"type": "string"
_54
},
_54
"email": {
_54
"type": "string"
_54
}
_54
},
_54
"v-default-fields": [
_54
"name",
_54
"telephone",
_54
"id",
_54
"address",
_54
"email"
_54
],
_54
"required": [
_54
"name",
_54
"telephone"
_54
],
_54
"v-indexed": [
_54
"name",
_54
"telephone",
_54
"email"
_54
],
_54
"v-security": {
_54
"allowGetAll": true,
_54
"publicRead": [
_54
"name",
_54
"telephone",
_54
"id",
_54
"address",
_54
"email"
_54
],
_54
"publicWrite": [
_54
"name",
_54
"telephone",
_54
"address",
_54
"email"
_54
],
_54
"publicFilter": [
_54
"name",
_54
"telephone",
_54
"id",
_54
"email"
_54
]
_54
}
_54
}

UserOrganization schema

Path paramValue
data_entity_nameUserOrganization
schema_nameuser-organization-schema-v1

Request body:


_95
{
_95
"properties": {
_95
"email": {
_95
"type": "string"
_95
},
_95
"businessOrganizationId": {
_95
"type": "string",
_95
"link": "http://api.vtex.com/{{accountName}}/dataentities/BusinessOrganization/schemas/business-organization-schema-v1"
_95
},
_95
"roleId": {
_95
"type": "string",
_95
"link": "http://api.vtex.com/{{accountName}}/dataentities/BusinessRole/schemas/business-role-schema-v1"
_95
},
_95
"status": {
_95
"type": "string"
_95
}
_95
},
_95
"v-default-fields": [
_95
"email",
_95
"id",
_95
"businessOrganizationId",
_95
"roleId",
_95
"status"
_95
],
_95
"required": [
_95
"email",
_95
"businessOrganizationId",
_95
"roleId",
_95
"status"
_95
],
_95
"v-indexed": [
_95
"email",
_95
"businessOrganizationId",
_95
"roleId",
_95
"status"
_95
],
_95
"v-security": {
_95
"allowGetAll": true,
_95
"publicRead": [
_95
"email",
_95
"id",
_95
"businessOrganizationId",
_95
"businessOrganizationId_linked",
_95
"roleId",
_95
"roleId_linked",
_95
"status"
_95
],
_95
"publicWrite": [
_95
"id",
_95
"email",
_95
"businessOrganizationId",
_95
"roleId",
_95
"status"
_95
],
_95
"publicFilter": [
_95
"email",
_95
"id",
_95
"businessOrganizationId",
_95
"roleId",
_95
"status"
_95
]
_95
},
_95
"v-triggers": [
_95
{
_95
"name": "organization-assignment-accept-email",
_95
"active": true,
_95
"condition": "status=APPROVED",
_95
"action": {
_95
"type": "email",
_95
"provider": "default",
_95
"subject": "Organization Assignment Acceptance",
_95
"to": [
_95
"{!email}"
_95
],
_95
"replyTo": "noreply@company.com",
_95
"body": "You have been assigned to {!businessOrganizationId_linked.name}."
_95
}
_95
},
_95
{
_95
"name": "organization-assignment-decline-email",
_95
"active": true,
_95
"condition": "status=DECLINED",
_95
"action": {
_95
"type": "email",
_95
"provider": "default",
_95
"subject": "Organization Assignment Decline",
_95
"to": [
_95
"{!email}"
_95
],
_95
"replyTo": "noreply@company.com",
_95
"body": "You have left the organization {!businessOrganizationId_linked.name}."
_95
}
_95
}
_95
]
_95
}

Installation

After following the steps above, you are ready to install the B2B Store Theme. You must:

  1. Run the vtex install vtex.b2bstore@1.x command on the CLI.
  2. Run the vtex browse command to see the B2B Store Theme on your browser.

Finally, your storefront should look like this:

{"base64":"  ","img":{"width":1416,"height":774,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":251285,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/installing-the-b2b-store-theme-2.png"}}

Customization

After installing the B2B Store Theme, you can customize it according to your store’s business needs. Check our guide on Customizing the B2B Store Theme for more information.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page