[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides installing activity flow in flutter apps in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/activity-flow)

[Installing Activity Flow in Headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-headless-stores)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-mobile-apps)

[Installing Activity Flow in Flutter apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps)

[Installing Activity Flow in React Native apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-react-native-apps)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/activity-flow)

[Installing Activity Flow in Headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-headless-stores)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-mobile-apps)

[Installing Activity Flow in Flutter apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps)

[Installing Activity Flow in React Native apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-react-native-apps)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides)

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/activity-flow)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-mobile-apps)

[Installing Activity Flow in Flutter apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps)

Installing Activity Flow in Flutter apps

In this guide, you'll learn how to install and configure the [VTEX Activity Flow SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow) in Flutter apps for Android and iOS. By following these steps, you'll be able to track user navigation, handle deep links, and collect ad events from your app.

## Before you begin

### Install the Activity Flow package

The Activity Flow SDK captures user navigation and sends events from your mobile app. To install the package, run the following command in your project directory:

`1

flutter pub add activity_flow

`

This installs the SDK and updates your `pubspec.yaml` file with the `activity_flow` dependency.

## Instructions

### Step 1 – Importing the Activity Flow package

In your app's main file, import the Activity Flow package as follows:

`1

import 'package:activity_flow/activity_flow.dart';

`

### Step 2 – Creating an Activity Flow instance

Set the account name to create an instance of the main package class:

`1

void main() {

2

runApp(const MyApp());

3

}

4

5

class App extends StatelessWidget {

6

7

 Widget build(BuildContext context) {

8

9

// Call activity flow here

10

 initActivityFlow(accountName: appAccountName);

11

...

12

13

}

`

## Usage

### Tracking page views automatically

To automatically track user navigation between app pages, add the `PageViewObserver` to the `navigatorObservers` list in your app:

`1

MyApp(

2

 // Add the PageViewObserver to the navigatorObservers list.

3

 navigatorObservers: [PageViewObserver()],

4

 routes: {

5

 // Define your named routes here

6

 },

7

8

),

`

This setup enables automatic screen view tracking for standard route navigation.

### Tracking page views manually (for custom navigation)

For navigation widgets like `BottomNavigationBar` or `TabBar`, which do not trigger route changes, use the `trackPageView` function to track screen views manually.

For example, using the `onTap` callback within a `BottomNavigationBar` widget allows for capturing a new route each time the user taps on a different tab:

`` 1

BottomNavigationBar(

2

 items: items,

3

 currentIndex: _selectedIndex,

4

 selectedItemColor: Colors.pink,

5

 onTap: (index) {

6

 _onItemTapped(index);

7

 final label = items[index].label ?? 'Tab-$index';

8

9

 // Manually calling the `trackPageView` with the label

10

 trackPageView(label);

11

 },

12

)

 ``

### Tracking deep links

The Activity Flow SDK automatically captures deep link query parameters and includes them in page view events when your app is configured for deep linking. Configure each platform as follows.

#### Android

Add intent filters to `AndroidManifest.xml` for each route that can be accessed via deep link:

`1

2

<intent-filter>

3

 <action android:name="android.intent.action.VIEW" />

4

 <category android:name="android.intent.category.DEFAULT" />

5

 <category android:name="android.intent.category.BROWSABLE" />

6

 <data

7

 android:scheme="https"

8

 android:host="example.com"

9

 android:pathPrefix="{APP_ROUTE}" />

10

</intent-filter>

11

12

<intent-filter>

13

 <action android:name="android.intent.action.VIEW" />

14

 <category android:name="android.intent.category.DEFAULT" />

15

 <category android:name="android.intent.category.BROWSABLE" />

16

 <data android:scheme="YOUR_CUSTOM_SCHEME" />

17

</intent-filter>

`

The main difference between intent filters for different routes is the `android:pathPrefix` attribute, which specifies the app route.

#### iOS

Configure both `Info.plist` and the app delegate to handle deep links.

1. Register a custom URL scheme in `Info.plist`:

`1

<key>CFBundleURLTypes</key>

2

<array>

3

 <dict>

4

 <key>CFBundleURLSchemes</key>

5

 <array>

6

 <string>{YOUR_BUNDLE_URL_SCHEME}</string>

7

 </array>

8

 <key>CFBundleURLName</key>

9

 <string>{YOUR_BUNDLE_URL_NAME}</string>

10

 </dict>

11

</array>

`

1. Handle incoming URLs in `AppDelegate.swift` (or `AppDelegate.mm`) for both cold and warm starts:

`1

import Flutter

2

import UIKit

3

import activity_flow

4

5

@main

6

@objc class AppDelegate: FlutterAppDelegate {

7

 override func application(

8

 _ application: UIApplication,

9

 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?

10

 ) -> Bool {

11

 GeneratedPluginRegistrant.register(with: self)

12

13

 // Capture initial URL if app was launched with a deep link (cold start)

14

 if let initialURL = launchOptions?[UIApplication.LaunchOptionsKey.url] as? URL {

15

 DeepLinkManager.shared.handle(url: initialURL)

16

 }

17

18

 return super.application(application, didFinishLaunchingWithOptions: launchOptions)

19

 }

20

21

 // Handles incoming URLs from Custom URL Schemes (e.g., myapp://path)

22

 override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

23

 DeepLinkManager.shared.handle(url: url)

24

 return super.application(app, open: url, options: options)

25

 }

26

27

 // Handles incoming URLs from Universal Links

28

 override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {

29

 // Check if the activity is a web browsing activity (Universal Link)

30

 if userActivity.activityType == NSUserActivityTypeBrowsingWeb {

31

 if let url = userActivity.webpageURL {

32

 DeepLinkManager.shared.handle(url: url)

33

 }

34

 }

35

 return super.application(application, continue: userActivity, restorationHandler: restorationHandler)

36

 }

37

}

`

1. Configure `SceneDelegate`

If your project uses a `SceneDelegate`, also forward deep links there:

ios/Runner/SceneDelegate.swift

`1

import UIKit

2

import Flutter

3

import activity_flow

4

5

class SceneDelegate: FlutterSceneDelegate {

6

 override func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

7

 // Capture deep links on cold start

8

 var hasDeepLink = false

9

10

 if let userActivity = connectionOptions.userActivities.first(where: { $0.activityType == NSUserActivityTypeBrowsingWeb }) {

11

 if let url = userActivity.webpageURL {

12

 DeepLinkManager.shared.handle(url: url)

13

 hasDeepLink = true

14

 }

15

 } else if let url = connectionOptions.urlContexts.first?.url {

16

 DeepLinkManager.shared.handle(url: url)

17

 hasDeepLink = true

18

 }

19

20

 // Call super with empty options if a deep link was handled

21

 if hasDeepLink {

22

 super.scene(scene, willConnectTo: session, options: UIScene.ConnectionOptions())

23

 } else {

24

 super.scene(scene, willConnectTo: session, options: connectionOptions)

25

 }

26

 }

27

28

 override func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {

29

 if let url = URLContexts.first?.url {

30

 DeepLinkManager.shared.handle(url: url)

31

 }

32

 }

33

34

 override func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {

35

 if userActivity.activityType == NSUserActivityTypeBrowsingWeb {

36

 if let url = userActivity.webpageURL {

37

 DeepLinkManager.shared.handle(url: url)

38

 }

39

 }

40

 }

41

}

`

### (Optional) Tracking ad events

> Ads tracking is available only for accounts using [VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-ads). If you're interested in this feature, open a ticket with [VTEX Support](https://read.calvincode.net/reader?url=https://support.vtex.com/hc/en-us).

When you apply the listener to a widget, the SDK automatically tracks three events:

* **Impression:** When the widget is first built and rendered.
* **View:** When at least 50% of the widget is visible on screen for at least 1 continuous second.
* **Click:** When the user taps the widget.

To start tracking your ad events, follow these steps:

1. Call the `addAdsListener`

To enable tracking, call the `addAdsListener` extension method on any Flutter widget that represents an ad:

`1

yourAdWidget.addAdsListener({Map<String, String> adMetadata);

`

* `yourAdWidget`: The ad widget you want to monitor.
* `adMetadata`: A map containing specific details about the ad, which will be sent to your analytics service upon a click.

The following example initializes the Activity Flow to track page views automatically and demonstrates manual tracking for tab changes:

`1

import 'package:activity_flow/activity_flow.dart';

2

import 'package:flutter/material.dart';

3

4

class HomeScreen extends StatelessWidget {

5

 const HomeScreen({super.key});

6

7

 @override

8

 Widget build(BuildContext context) {

9

 return Scaffold(

10

 appBar: AppBar(title: const Text('Home')),

11

 body: ListView(

12

 children: [

13

 const Padding(

14

 padding: EdgeInsets.all(16.0),

15

 child: Text('Featured Products'),

16

 ),

17

18

 // Standard content

19

 const ProductTile(name: 'Product A'),

20

 const ProductTile(name: 'Product B'),

21

22

 // Ad Widget with Activity Flow tracking

23

 // We wrap the visual component (e.g., Image, Container) with the listener

24

 Padding(

25

 padding: const EdgeInsets.symmetric(vertical: 10.0),

26

 child: Container(

27

 height: 150,

28

 width: double.infinity,

29

 color: Colors.grey[200],

30

 child: Image.asset(

31

 'assets/promo_banner.jpg',

32

 fit: BoxFit.cover,

33

 ),

34

 ).addAdsListener({

35

 'adId': 'summer_campaign_123',

36

 'creativeId': 'banner_v1',

37

 'position': 'list_middle',

38

 'campaignName': 'Summer Sale 2024',

39

 }),

40

 ),

41

 // More content

42

 const ProductTile(name: 'Product C'),

43

 ],

44

 ),

45

 );

46

 }

47

}

`

This Flutter screen, constructed as a `StatelessWidget` that lists products and displays an ad banner. The banner's Container is wrapped with Activity Flow's `addAdsListener`, which attaches an ad-event listener and sends the provided metadata map with each event.

This instrumentation enables the automatic tracking of impressions, viewability, and clicks, allowing for comprehensive analytics tied to `adId`, `creativeId`, `position`, and `campaignName`.

## Flutter automated tests

To ensure your Flutter test runs work correctly when the Activity Flow is installed, run tests with a test environment flag using a `--dart-define` flag.

The `--dart-define` flag lets you pass compile-time key=value pairs into your Flutter app as Dart environment declarations. Follow the steps below:

1. In your terminal, run `flutter test --dart-define=ACTIVITY_FLOW_TEST_ENV=true`.
2. In a code editor, open your project.
3. In the code editor settings, search for `dart.flutterTestAdditionalArgs`.
4. Add to it the value `--dart-define=ACTIVITY_FLOW_TEST_ENV=true`.
5. Open the `settings.json` file of your project.
6. Add the following: `"dart.flutterTestAdditionalArgs": ["--dart-define=ACTIVITY_FLOW_TEST_ENV=true"]`

## Use case example

Below is an example that contains an app with some pages and navigation through them:

`1

import 'package:activity_flow/activity_flow.dart';

2

import 'package:flutter/material.dart';

3

import 'package:example/screens/favorite.dart';

4

import 'package:example/screens/products.dart';

5

import 'package:example/screens/profile.dart';

6

7

void main() {

8

 runApp(const ExampleApp());

9

}

10

/// A MaterialApp with a custom theme and routes.

11

/// The routes are defined in the [routes] property.

12

/// The theme is defined in the [theme] property.

13

class ExampleApp extends StatelessWidget {

14

 const ExampleApp({super.key});

15

16

 @override

17

 Widget build(BuildContext context) {

18

 initActivityFlow(accountName: appAccountName);

19

20

 return MaterialApp(

21

 title: 'Example App',

22

 theme: ThemeData(

23

 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),

24

 useMaterial3: true,

25

 ),

26

 routes: {

27

 '/': (context) => const MyHomePage(),

28

 '/products': (context) => const ProductsScreen(),

29

 '/profile': (context) => const ProfileScreen(),

30

 '/favorites': (context) => const FavoriteScreen(),

31

 },

32

 initialRoute: '/',

33

 navigatorObservers: [PageViewObserver()],

34

35

/// A home screen with buttons to navigate to other screens.

36

class MyHomePage extends StatelessWidget {

37

 const MyHomePage({super.key});

38

39

 final List<Map> _routes = const [

40

 {

41

 'name': 'Products',

42

 'route': '/products',

43

 },

44

 {

45

 'name': 'Profile',

46

 'route': '/profile',

47

 }

48

 ];

49

50

 @override

51

 Widget build(BuildContext context) {

52

 return Scaffold(

53

 appBar: AppBar(

54

 backgroundColor: Theme.of(context).colorScheme.inversePrimary,

55

 title: const Text('Home Screen'),

56

 ),

57

 body: Center(

58

 child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [

59

 const AdBanner().addAdsListener({

60

 'productName': 'Sneakers',

61

 'productPrice': '59.99',

62

 'adID': '1123',

63

 }),

64

 ..._routes.map((route) => ButtonTemplate(

65

 title: route['name'],

66

 route: route['route'],

67

 )),

68

 ])),

69

 );

70

 }

71

}

72

73

/// A template for creating buttons.

74

/// Receives a [title], [icon], and [route] to navigate to.

75

/// Returns an [ElevatedButton.icon] with the given parameters.

76

class ButtonTemplate extends StatelessWidget {

77

 const ButtonTemplate({

78

 super.key,

79

 required this.title,

80

 required this.route,

81

 });

82

83

 final String title;

84

 final String route;

85

86

 @override

87

 Widget build(BuildContext context) {

88

 return ElevatedButton(

89

 onPressed: () => Navigator.pushNamed(context, route),

90

 child: Text(title),

91

 );

92

 }

93

}

`

The example demonstrates the integration of Activity Flow into a Flutter app by importing the necessary package, initializing it with `initActivityFlow(accountName: appAccountName)`, and constructing a `MaterialApp` with named routes and a `PageViewObserver` to automatically capture page-view events.

It outlines a `MyHomePage` that incorporates an `AdBanner`, which utilizes `addAdsListener` to pass ad metadata such as product name, price, and ID. Additionally, it features navigation buttons sourced from a routes list.

The reusable `ButtonTemplate` facilitates navigation through `Navigator.pushNamed`, showcasing a standard configuration for automatic screen tracking, as well as ad impression and click tracking, in a Flutter application.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Activity-Flow/installing-activity-flow-in-flutter-apps.md)

[Installing Activity Flow in mobile apps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps//docs/guides/installing-activity-flow-in-mobile-apps)[Installing Activity Flow in React Native appsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps//docs/guides/installing-activity-flow-in-react-native-apps)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23before-you-begin)

[Install the Activity Flow package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23install-the-activity-flow-package)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23instructions)

[Step 1 – Importing the Activity Flow package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23step-1--importing-the-activity-flow-package)[Step 2 – Creating an Activity Flow instance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23step-2--creating-an-activity-flow-instance)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23usage)

[Tracking page views automatically](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23tracking-page-views-automatically)[Tracking page views manually (for custom navigation)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23tracking-page-views-manually-for-custom-navigation)[Tracking deep links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23tracking-deep-links)[(Optional) Tracking ad events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23optional-tracking-ad-events)

[Flutter automated tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23flutter-automated-tests)

[Use case example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23use-case-example)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Activity-Flow/installing-activity-flow-in-flutter-apps.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23before-you-begin)

[Install the Activity Flow package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23install-the-activity-flow-package)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23instructions)

[Step 1 – Importing the Activity Flow package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23step-1--importing-the-activity-flow-package)[Step 2 – Creating an Activity Flow instance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23step-2--creating-an-activity-flow-instance)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23usage)

[Tracking page views automatically](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23tracking-page-views-automatically)[Tracking page views manually (for custom navigation)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23tracking-page-views-manually-for-custom-navigation)[Tracking deep links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23tracking-deep-links)[(Optional) Tracking ad events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23optional-tracking-ad-events)

[Flutter automated tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23flutter-automated-tests)

[Use case example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-flutter-apps/docs/guides/installing-activity-flow-in-flutter-apps%23use-case-example)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides change price in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/shopping-cart-section-api-quick-start-guides)

[Simulate a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/simulate-a-shopping-cart)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/create-a-new-cart)

[Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/get-cart-information-by-id)

[Remove all items from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/remove-all-items-from-cart)

[Remove all personal data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/remove-all-personal-data)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/add-cart-items)

[Update cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/update-cart-items)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price)

[Ignore profile data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/ignore-profile-data)

[Get cart installments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/get-cart-installments-information)

[Add coupons to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/add-coupons-to-the-cart)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/add-service-to-the-cart)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/shopping-cart-section-api-quick-start-guides)

[Simulate a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/simulate-a-shopping-cart)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/create-a-new-cart)

[Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/get-cart-information-by-id)

[Remove all items from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/remove-all-items-from-cart)

[Remove all personal data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/remove-all-personal-data)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/add-cart-items)

[Update cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/update-cart-items)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price)

[Ignore profile data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/ignore-profile-data)

[Get cart installments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/get-cart-installments-information)

[Add coupons to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/add-coupons-to-the-cart)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/add-service-to-the-cart)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/checkout-api-overview)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/shopping-cart-section-api-quick-start-guides)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price)

Change the price of an SKU in a cart

The shopping cart is where the information on the products chosen by the customer while browsing a store is gathered. This data may include item prices, shipping value, payment, and delivery methods, among others.

This guide will describe how to change the price of an SKU (item) in a cart by the API.

>  Before starting to manually change prices on an item, make sure the [Manual Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/enable-the-manual-price) feature is already enabled in your store.

## Getting and accessing shopping cart information

The first step is to get the `orderFormId` and access the shopping cart information that you want to change the item price. For more information, access the [Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/get-cart-information-by-id) guide.

Below is an example of pricing details for items contained in a shopping cart:

`1

"items": [

2

 {

3

 ...

4

 "price": 1200000,

5

 "listPrice": 1200000,

6

 "manualPrice": null,

7

 "manualPriceAppliedBy": null,

8

 ...

9

 }

10

...

11

]

`

>  For more information about the meaning of each of the fields available in the shopping cart, access the [orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields) overview.

## Changing the price of a shopping cart item

With the `orderFormId` information available, you must use the [Change price](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/pricechange) endpoint to send the path parameters information through the URL:

* **orderFormId**: value.
* **itemIndex**: a string indicating the index of the item in the cart. Each cart item is identified by an index, starting with `0`.

See a URL example below:

`https://{accountname}.{environment.com.br}/api/checkout/pub/orderForm/36a1646105f243e1a9012c915631344b/items/0/price`

Additionally, you need to send the request body containing the new price to be applied to the item:

`1

{"price":850000}

`

After sending the request, the endpoint will return the response body with the new item price indicated by the `manualPrice` property. The identification of the user responsible for the price change is available in the `manualPriceAppliedBy` property.

`1

"items": [

2

 {

3

 ...

4

 "price": 1200000,

5

 "listPrice": 1200000,

6

 "manualPrice": 850000,

7

 "manualPriceAppliedBy": “99e09db4-fc3b-4c8e-a15b-5194516”,

8

 ...

9

 }

10

...

11

]

`

## Error codes

The following errors may appear as a message in the response body.

### 400 - Bad Request

* **Message error example (code CHK0041)**: `"Índice de item inválido"` (_invalid item index_). This message indicates that the `itemIndex` used in the request does not exist or is incorrect.

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "CHK0041",

5

 "message": "Índice de item inválido",

6

 "exception": null

7

 },

8

 "operationId": "8b1c2f39-641a-4ec1-ba91-b8a9d5b1cd19"

9

}

`

### 403 - Forbidden

* **Message error example (code CHK003)**: `"Access Denied"`. The feature **Manual Price** is not activated on your store. See how to enable it on [Enable the Manual Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/enable-the-manual-price).

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "CHK003",

5

 "message": "Access Denied",

6

 "exception": null

7

 },

8

 "operationId": "4ae9e8e4-0fd1-469a-99b1-71705cbe036f"

9

}

`

### 404 - Not Found

* **Message error example**: `"The requested URL was not found on the server"`. Check that the URL data is correct.

`1

2

404 Not Found

3

The requested URL was not found on this server.

4

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Checkout/shopping-cart-section-api-quick-start-guides/change-price.md)

[Update cart items« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price//docs/guides/update-cart-items)[Ignore profile data from cartNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price//docs/guides/ignore-profile-data)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Getting and accessing shopping cart information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23getting-and-accessing-shopping-cart-information)

[Changing the price of a shopping cart item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23changing-the-price-of-a-shopping-cart-item)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23error-codes)

[400 - Bad Request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23400-bad-request)[403 - Forbidden](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23403-forbidden)[404 - Not Found](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23404-not-found)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Checkout/shopping-cart-section-api-quick-start-guides/change-price.md)

Copy page

On this page

ON THIS PAGE

[Getting and accessing shopping cart information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23getting-and-accessing-shopping-cart-information)

[Changing the price of a shopping cart item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23changing-the-price-of-a-shopping-cart-item)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23error-codes)

[400 - Bad Request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23400-bad-request)[403 - Forbidden](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23403-forbidden)[404 - Not Found](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-price/docs/guides/change-price%23404-not-found)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides store framework apps in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/updates/release-notes)

Store Framework Apps

Reference docs for Store Framework apps.

shopping cart 2

[BASIC COMPONENTS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/basic-components)

Storefront components indispensable to create an end-to-end experience for your store’s users.

* [Add to cart button ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-add-to-cart-button)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-add-to-cart-button)
* [](https://developers.vtex.com/docs/guides/vtex-add-to-cart-button)[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-breadcrumb)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-breadcrumb)
* [](https://developers.vtex.com/docs/guides/vtex-breadcrumb)[Footer ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-footer)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-footer)
* [](https://developers.vtex.com/docs/guides/vtex-store-footer)[VTEX Store Components ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components)
* [](https://developers.vtex.com/docs/guides/vtex-store-components)[See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/basic-components)

basket favorite

[ADVANCED COMPONENTS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/advanced-components)

Native components that enrich the user experience, but are not mandatory for your store operation.

* [Category menu ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-category-menu)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-category-menu)
* [](https://developers.vtex.com/docs/guides/vtex-category-menu)[Checkout UI settings ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings)
* [](https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings)[Iframe ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-iframe)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-iframe)
* [](https://developers.vtex.com/docs/guides/vtex-iframe)[See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/advanced-components)

board 2

[LAYOUT APPS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-apps)

Aps responsible for building your store layout according to your business needs.

* [Condition Layout ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-condition-layout)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-condition-layout)
* [](https://developers.vtex.com/docs/guides/vtex-condition-layout)[Flex Layout ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-flex-layout)
* [](https://developers.vtex.com/docs/guides/vtex-flex-layout)[Modal Layout ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-modal-layout)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-modal-layout)
* [](https://developers.vtex.com/docs/guides/vtex-modal-layout)[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-overlay-layout)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-overlay-layout)
* [](https://developers.vtex.com/docs/guides/vtex-overlay-layout)[See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-apps)

plug 2

[PIXEL APPS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps)

Apps that integrate a third-party solution into your store’s website.

* [accessiBe ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe)
* [](https://developers.vtex.com/docs/guides/vtex-accessibe)[Google Adwords ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-adwords)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-adwords)
* [](https://developers.vtex.com/docs/guides/vtex-google-adwords)[Google customer reviews ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-customer-reviews)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-customer-reviews)
* [](https://developers.vtex.com/docs/guides/vtex-google-customer-reviews)[Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-tag-manager)
[ ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-google-tag-manager)
* [](https://developers.vtex.com/docs/guides/vtex-google-tag-manager)[See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps)

> Need help? Check our [Frequently Asked Questions!](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-frequently-asked-questions)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-framework-apps.md)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-apps/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-framework-apps.md)

Copy page

On this page

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore molecules checkbox field in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/components-index)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-overview)

CheckboxField

Wraps a Checkbox input and its corresponding Label.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/molecules/CheckboxField)

The `CheckboxField` wraps a [Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-checkbox) input and its corresponding [Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-label). It allows users to select one option from a set.

Example

Code

Default

Checked

Disabled

Checked & Partial

---

## Usage

### Import the component

`1

import { CheckboxField } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/molecules/CheckboxField/styles.scss'

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Design tokens

| Local token              | Default value/Global token linked |
| ------------------------ | --------------------------------- |
| \--fs-checkbox-field-gap | var(--fs-spacing-1)               |

---

## Data attributes

You can target and override `CheckboxField` styles using the following data attributes:

`data-fs-checkbox-field`

---

## Props

| Name          | Type              | Description                                                                            | Default                                                                                |        |
| ------------- | ----------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------ |
| **label\***   | string            | The text displayed to identify the input checkbox.                                     |                                                                                |        |
| **error**     | string            | The error message is displayed when an error occurs.                                   |                                                                                |        |
| **alignment** | "center" \| "top" | "bottom"                                                                               | Control the vertical alignment of the checkbox in relation to the label (center, top, bottom). | center |
| **testId**    | string            | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-checkbox-field                                                                              |        |
| **partial**   | false \| true     | Boolean that represents a partial state.                                               |                                                                                |        |

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/checkbox-field.mdx)

[CartItem« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-cart-item)[DiscountBadgeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-discount-badge)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23import-styles)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23design-tokens)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23props)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/checkbox-field.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23import-styles)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23design-tokens)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-checkbox-field/docs/guides/faststore/molecules-checkbox-field%23props)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)