[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 developing and overriding components creating a new section 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/developing-and-overriding-components-creating-a-new-section/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/sdk-overview)

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

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/sdk-overview)

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

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/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/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore)

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

Creating a new section

In this guide, you will learn how to create a new section for your storefront and make it available in the [Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview). This solution is useful when your project requires a section not natively available in FastStore.

For this guide, we will create two sections:

* `Call to Action` Gets a specific action from the user.
* `OurStores`: Indicates the closest store for the user.
> Sections are page components that wrap up other components, enabling you to create cohesive and functional content for your store. For example, the Hero section is a native section that includes the following components: `Hero`, `HeroImage`, and `HeroHeader`.

## Before you begin

### 1\. Integrate the store with the Headless CMS

All sections must be available in the Headless CMS so they can be added and managed on your store's pages. To integrate your FastStore project, please refer to the [Headless CMS integration track](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-1-configuring-the-vtex-account).

### 2\. Knowledge of how sections and content types work on Headless CMS

During the creation of a new section, you will create files such as `sections.json` and `content-types.json`, which follow a structure established for the Headless CMS.

### 3\. Install the FastStore CLI

Make sure to install the FastStore CLI to use its commands locally. Refer to the [FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-3-faststore-cli) guide for more information.

## `Call to Action`

### Step 1: Creating folders and files related to the Headless CMS

1. In the FastStore root directory, create a folder named `cms`.
2. Inside `cms`, create the `faststore` folder.
3. Within the `cms/faststore` folder, create `sections.json` file.
4. In the `sections.json` file, add the new section that you want to display in the Headless CMS. The schema below defines how the Headless CMS renders a section:

sections.json

`1

 [

2

 {

3

 "name": "CallToAction",

4

 "schema": {

5

 "title": "Call To Action",

6

 "description": "Get your 20% off on the first purchase!",

7

 "type": "object",

8

 "required": [

9

 "title",

10

 "link"

11

 ],

12

 "properties": {

13

 "title": {

14

 "title": "Title",

15

 "type": "string"

16

 },

17

 "link": {

18

 "title": "Link Path",

19

 "type": "object",

20

 "required": [

21

 "text",

22

 "url"

23

 ],

24

 "properties": {

25

 "text": {

26

 "title": "Text",

27

 "type": "string"

28

 },

29

 "url": {

30

 "title": "URL",

31

 "type": "string"

32

 }

33

 }

34

 }

35

 }

36

 }

37

 }

38

 ]

`

> This new section receives a title and a link pointing to a specific location.

### Step 2: Creating the new section

To render the `CallToAction` section you created in the previous step, you need to create this section component.

1. If you don't already have it, create a folder named `components` inside the `src` directory.
2. Inside the `components` folder, create a file named `CallToAction.tsx` and add the following code:

src/components/CallToAction.tsx

`1

import React from "react";

2

3

export interface CallToActionProps {

4

 title: string;

5

 link: {

6

 text: string;

7

 url: string;

8

 };

9

}

10

11

export default function CallToAction(props: CallToActionProps) {

12

 return (

13

14

{props.title}

15

 {props.link.text}

16

17

 );

18

}

`

This section will receive the `link` and `title` defined previously in the `sections.json` file.

1. Create a file named `index.tsx` inside the components folder.

> The `index.tsx` file provides an entry point for importing and using the `CallToAction` component. It acts as a container for all the components within the components folder and allows for easier organization and reusability of code.

Open the `index.tsx` file and add the following code:

src/components/index.tsx

`1

import CallToAction from './CallToAction'

2

3

export default { CallToAction }

`

### Step 3: Synchronizing the new section with the Headless CMS

1. In the terminal, run `faststore cms-sync`. This command will synchronize the new section you created with the CMS.
2. Go to the VTEX Admin and access **Storefront > Headless CMS**.
3. Click on the `Page` content type.

![{"base64":"  ","img":{"width":3824,"height":1360,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":321106,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/create-new-section-cms___51aed56fb1be8d73c2fee14e54151c3d.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/create-new-section-cms___51aed56fb1be8d73c2fee14e54151c3d.png)

1. In the `Sections` tab, click the `+`, search for the new `Call to Action` section, and add it to your page.

![{"base64":"  ","img":{"width":1898,"height":736,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":928366,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/create-new-section-cms-component___994587c4fa77d99a04fda72524266d4d.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/create-new-section-cms-component___994587c4fa77d99a04fda72524266d4d.gif)

## `OurStore`

1. After [creating the files and folders](#step-1-creating-folders-and-files-related-to-the-headless-cms), In the `sections.json` file, add the new section that you want to display in the Headless CMS. The schema below defines how the Headless CMS renders the `OurStores` section that we will use in the example:

sections.json

`1

[

2

 {

3

 "name": "OurStores",

4

 "schema": {

5

 "title": "Our Stores",

6

 "description": "Search stores near to the users",

7

 "type": "object",

8

 "required": ["title", "description"],

9

 "properties": {

10

 "title": {

11

 "title": "Title",

12

 "type": "string",

13

 "default": "Explore Nearby Stores"

14

 },

15

 "description": {

16

 "title": "Link Path",

17

 "type": "string",

18

 "default": "Discover the closest store to you and pay us a visit."

19

 }

20

 }

21

 }

22

 }

23

]

`

1. Inside the `components` folder, create a file named `OurStores.tsx` and add the following code:

src/components/OurStores.tsx

`1

import React from 'react'

2

import { Button, Icon, SelectField } from '@faststore/ui'

3

4

export interface OurStoresProps {

5

 title: string

6

 description: string

7

}

8

9

export default function OurStores(props: OurStoresProps) {

10

 return (

11

12

{props.title}

13

{props.description}

14

15

 <SelectField

16

 id="select-state-store"

17

 label="State:"

18

 options={{

19

 newYork: 'New York',

20

 arizona: 'Arizona',

21

 massachusetts: 'Massachusetts',

22

 hawaii: 'Hawaii',

23

 }}

24

 />

25

 <SelectField

26

 id="select-city-store"

27

 label="City:"

28

 options={{

29

 newYorkCity: 'New York City',

30

 phoenix: 'Phoenix',

31

 boston: 'Boston',

32

 honolulu: 'Honolulu',

33

 }}

34

 />

35

 <Button

36

 variant="secondary"

37

 icon={<Icon name="ArrowRight" />}

38

 iconPosition="right"

39

 >

40

 Find Store

41

 </Button>

42

43

44

 )

45

}

`

For this section, we will use the following components from the Faststore UI: [Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button), [Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-icon) and [SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules/select-field).

1. Create a file named `index.tsx` inside the components folder, and add the following code:

src/components/index.tsx

`1

import OurStores from './OurStores'

2

3

export default { OurStores }

`

1. Repeat the steps in [Step 3: Synchronizing the new section with the Headless CMS](#step3-synchronizing-the-new-section-with-the-headless-cms), and you should see the new section but without styles as in the example below:

![{"base64":"  ","img":{"width":1144,"height":175,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":24240,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/section-structure-without-styles___7be40088d6137bdd63cbb4940c2fa599.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/section-structure-without-styles___7be40088d6137bdd63cbb4940c2fa599.png)

To add styles to `OurStore`, refer to the following section [Importing styles when creating a new section](#importing-styles-when-creating-a-new-section).

## Adding styles to a new section

After creating a new section, you can style it to match your store's branding. Follow the steps below using the [OurStores](#ourstores) section as an example.

### Instructions

1. In your store code, open the `components` folder and create a `.module.scss` file for your component. For example, if your component is `OurStores`, name the file `ourStores.module.scss`. This file will contain the styles specific to this section.
2. Import the necessary FastStore UI styles into your `.module.scss` file. For example, to style the `OurStores` component, we imported the styles for the [Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button) and [SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-select-field) components. The `Select` styles are also imported since `SelectField` inherits them.

`1

.ourStores {

2

 @import '@faststore/ui/src/components/atoms/Button/styles.scss';

3

 @import '@faststore/ui/src/components/atoms/Select/styles.scss';

4

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

5

}

`

1. Open the component's `.tsx` file. For example, `OurStores.tsx`.
2. Import the newly created stylesheet into the component:

```` 1

import React from 'react'

2

import { Button, Icon, SelectField } from '@faststore/ui'

3

4

import styles from './ourStores.module.scss' ```

5

6

5. Apply the styles to your components using `className={styles.<className>}`. Replace `<className>` with the appropriate class name defined in your stylesheet. For example:

7

 ```tsx mark=13

8

 import React from 'react'

9

 import { Button, Icon, SelectField } from '@faststore/ui'

10

11

 import styles from './ourStores.module.scss'

12

13

 export interface OurStoresProps {

14

 title: string

15

 description: string

16

 }

17

18

 export default function OurStores(props: OurStoresProps) {

19

 return (

20

 <section className={styles.ourStores}>

21

 <h2>{props.title}</h2>

22

 <p>{props.description}</p>

23

 <div>

24

 <SelectField

25

 id="select-state-store"

26

 label="State:"

27

 options={{

28

 newYork: 'New York',

29

 arizona: 'Arizona',

30

 massachusetts: 'Massachusetts',

31

 hawaii: 'Hawaii',

32

 }}

33

 />

34

 <SelectField

35

 id="select-city-store"

36

 label="City:"

37

 options={{

38

 newYorkCity: 'New York City',

39

 phoenix: 'Phoenix',

40

 boston: 'Boston',

41

 honolulu: 'Honolulu',

42

 }}

43

 />

44

 <Button

45

 variant="secondary"

46

 icon={<Icon name="ArrowRight" />}

47

 iconPosition="right"

48

 >

49

 Find Store

50

 </Button>

51

 </div>

52

 </section>

53

 )

54

 }

 ````

1. Open the terminal and run `yarn dev` to see your changes.

![{"base64":"  ","img":{"width":2552,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":135138,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/without-styles___4680d2a9a67e4175f3b73eff036ca8ac.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/without-styles___4680d2a9a67e4175f3b73eff036ca8ac.png)

1. Add more styles to the section by using [design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview%23global-tokens) and [component-specific data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button%23customization) to the `.module.scss` file:

`1

.ourStores {

2

 @import '@faststore/ui/src/components/atoms/Button/styles.scss';

3

 @import '@faststore/ui/src/components/atoms/Select/styles.scss';

4

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

5

6

 width: 100%;

7

 display: flex;

8

 flex-direction: column;

9

 justify-content: center;

10

 align-items: center;

11

 padding: var(--fs-spacing-5);

12

 margin: auto;

13

 background-color: var(--fs-color-neutral-bkg);

14

15

 [data-fs-select-field] {

16

 flex-direction: column;

17

 align-items: flex-start;

18

19

 [data-fs-select] {

20

 border: var(--fs-border-width) solid var(--fs-border-color);

21

 margin-top: var(--fs-spacing-0);

22

 width: 10rem;

23

 height: var(--fs-control-min-height);

24

25

 select {

26

 width: 100%;

27

 }

28

 }

29

 }

30

}

31

32

.ourStores__title {

33

 font-size: var(--fs-text-size-title-section);

34

 margin-bottom: var(--fs-spacing-1);

35

}

36

37

.ourStores__content {

38

 display: flex;

39

 align-items: flex-end;

40

 column-gap: var(--fs-spacing-5);

41

 margin: var(--fs-spacing-5);

42

}

`

1. Update the component's file by adding the appropriate CSS classes to elements, ensuring they align with the newly defined styles in your stylesheet. For example:

`1

import React from 'react'

2

import { Button, Icon, SelectField } from '@faststore/ui'

3

4

import styles from './ourStores.module.scss'

5

6

export interface OurStoresProps {

7

 title: string

8

 description: string

9

}

10

11

export default function OurStores(props: OurStoresProps) {

12

 return (

13

14

{props.title}

15

{props.description}

16

17

 <SelectField

18

 id="select-state-store"

19

 label="State:"

20

 options={{

21

 newYork: 'New York',

22

 arizona: 'Arizona',

23

 massachusetts: 'Massachusetts',

24

 hawaii: 'Hawaii',

25

 }}

26

 />

27

 <SelectField

28

 id="select-city-store"

29

 label="City:"

30

 options={{

31

 newYorkCity: 'New York City',

32

 phoenix: 'Phoenix',

33

 boston: 'Boston',

34

 honolulu: 'Honolulu',

35

 }}

36

 />

37

 <Button

38

 variant="secondary"

39

 icon={<Icon name="ArrowRight" />}

40

 iconPosition="right"

41

 >

42

 Find Store

43

 </Button>

44

45

46

 )

47

}

`

1. Navigate to `http://localhost:3000` in your browser to see the updated component with the applied styles.

![{"base64":"  ","img":{"width":2552,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":129326,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/with-styles___4b1cd40d4dcbbba544fd051b1f2dcb36.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/with-styles___4b1cd40d4dcbbba544fd051b1f2dcb36.png)

Contributors

1

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

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/docs/developing-and-overriding-components/creating-a-new-section.mdx)

[Adding an image to the Alert component« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides//faststore/override-use-cases-adding-an-image-to-the-alert-component)[List of native sections and overridable componentsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23before-you-begin)

[1\. Integrate the store with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%231-integrate-the-store-with-the-headless-cms)[2\. Knowledge of how sections and content types work on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%232-knowledge-of-how-sections-and-content-types-work-on-headless-cms)[3\. Install the FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%233-install-the-faststore-cli)

[Call to Action](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23call-to-action)

[Step 1: Creating folders and files related to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23step-1-creating-folders-and-files-related-to-the-headless-cms)[Step 2: Creating the new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23step-2-creating-the-new-section)[Step 3: Synchronizing the new section with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23step-3-synchronizing-the-new-section-with-the-headless-cms)

[OurStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23ourstore)

[Adding styles to a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23adding-styles-to-a-new-section)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23instructions)

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/docs/developing-and-overriding-components/creating-a-new-section.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23before-you-begin)

[1\. Integrate the store with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%231-integrate-the-store-with-the-headless-cms)[2\. Knowledge of how sections and content types work on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%232-knowledge-of-how-sections-and-content-types-work-on-headless-cms)[3\. Install the FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%233-install-the-faststore-cli)

[Call to Action](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23call-to-action)

[Step 1: Creating folders and files related to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23step-1-creating-folders-and-files-related-to-the-headless-cms)[Step 2: Creating the new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23step-2-creating-the-new-section)[Step 3: Synchronizing the new section with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23step-3-synchronizing-the-new-section-with-the-headless-cms)

[OurStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23ourstore)

[Adding styles to a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23adding-styles-to-a-new-section)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section%23instructions)

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] How do I use the VTEX lucky orange app? Provide documentation and configuration details.

[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/apps/vtex.lucky-orange/docs/guides)

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/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/apps/vtex.lucky-orange/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.my-account)

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.my-account)

---

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

---

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

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/guides/pixel-apps)

Lucky Orange

Official extension

Version: 1.0.1

Latest version: 1.0.1

Lucky Orange first-party app.

## How to install

Open the VTEX App Store and install this app on your store.

Now, open the app settings on your admin and fill your Lucky Orange\`s Site ID.

[LogRocket« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.logrocket)[Search ConsoleNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.google-search-console)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[How to install](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.lucky-orange/docs/apps/vtex.lucky-orange%23how-to-install)

Was this helpful?

[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 enabling manual prices for subscriptions v3 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/enabling-manual-prices-for-subscriptions-v3/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/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/enabling-manual-prices-for-subscriptions-v3/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/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/enabling-manual-prices-for-subscriptions-v3/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/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/enabling-manual-prices-for-subscriptions-v3/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/master-data)

---

Payments

---

Orders

[Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/orders-feed)

[Order modifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/order-modifications)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/order-canceling-improvements)

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/actions-orders)

Subscriptions

[Enabling Manual Prices for Subscriptions v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3)

[How to keep attachments from original orders in subscriptions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/how-to-keep-attachments-from-original-orders-in-subscriptions)

---

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/enabling-manual-prices-for-subscriptions-v3/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/master-data)

---

Payments

---

Orders

[Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/orders-feed)

[Order modifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/order-modifications)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/order-canceling-improvements)

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/actions-orders)

Subscriptions

[Enabling Manual Prices for Subscriptions v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3)

[How to keep attachments from original orders in subscriptions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/how-to-keep-attachments-from-original-orders-in-subscriptions)

---

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/enabling-manual-prices-for-subscriptions-v3/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides)

Orders

Subscriptions

[Enabling Manual Prices for Subscriptions v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3)

Enabling Manual Prices for Subscriptions v3

> The option of setting manual prices is only available for Subscriptions v3\. If you are using a previous version of the Subscriptions system, check out the [Subscriptions v3 migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/subscriptions-v3-migration-guide).

**Subscriptions** is an app developed by VTEX to facilitate recurring sales in your store. It works as an automatic scheduler, executing a repurchase at the frequency requested by the customer. Check out our article [How subscriptions work](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-subscriptions-work--frequentlyAskedQuestions%5F4453) to know more.

When using subscriptions, stores might need to configure prices manually for each item. Considering that product prices can change over time, maintaining the same commercial rules for subscription orders can be a good strategy to retain clients over a longer period.

By enabling the Manual Price feature for Subscriptions v3, you can:

* Apply a manual price on each subscription item instead of the current price applied.
* Maintain the same manual price for every future recurrent order from that subscription, if desired.

## Before you begin

To enable Manual Prices for Subscriptions v3, it is first necessary to enable it in the Checkout settings. This means you must make a request to the post [Update orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/updateorderformconfiguration) endpoint, setting `allowManualPrices` to `true`, if you have not done this yet. For more information on how manual prices work at VTEX, we recommend reading [Enabling Manual Price in my store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-manual-price).

Setting Manual Prices for Subscriptions generally follows the same rules as applying manual prices to items in regular orders at Checkout. Still, it requires additional configurations and actions detailed in the following sections.

To apply manual prices, users must have at least one of the following [roles](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc) or [License Manager resources](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/license-manager-resources--3q6ztrC8YynQf6rdc6euk3):

* Owner (Admin Super) role
* Call Center Operator (Telesales) role
* Shopping Cart Full Access resource

## Configuration

To enable Manual Prices for Subscriptions, you must follow the steps below:

1. Make a request using the get [Get Subscription Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/getsettings-1) endpoint to retrieve the current settings related to Subscriptions in your store.
2. Make a request using the post [Edit Subscription Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/editsettings-1) endpoint, setting the following properties to `true`:

| **Property name**             | **Type** | **Description**                                                                                |
| ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| manualPriceAllowed            | boolean  | This property enables the manual price configuration in subscription items when set to true. This is valid for all existing subscriptions, provided that there is a manual price configured.                                                                                |
| useItemPriceFromOriginalOrder | boolean  | This property enables using the price manually set for each item from the original subscription order when set to true. This is only valid for new subscriptions created after enabling this configuration. The manualPriceAllowed property must also be set to true; otherwise, this configuration will not work. |

#### Request body example

`1

{

2

 "slaOption": "NONE",

3

 "defaultSla": null,

4

 "isUsingV3": true,

5

 "onMigrationProcess": false,

6

 "executionHourInUtc": 9,

7

 "workflowVersion": "1.1",

8

 "deliveryChannels": [

9

 "delivery"

10

 ],

11

 "randomIdGeneration": false,

12

 "isMultipleInstallmentsEnabledOnCreation": false,

13

 "isMultipleInstallmentsEnabledOnUpdate": false,

14

 "orderCustomDataAppId": null,

15

 "postponeExpiration": false,

16

 "manualPriceAllowed": true,

17

 "useItemPriceFromOriginalOrder": true

18

}

`

## Setting a manual price in a subscription item

To apply a manual price to a subscription item, you must insert a new value into the `manualPrice` property:

| **Property name** | **Type** | **Description**                                                                                |
| ----------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| manualPrice       | int32    | The manual price you want to use for the subscription item. The value follows the same format as in Checkout, which means you must send it without decimal separators. Examples: If the desired value is 29.90, you must write 2990. In case the value is 0.90, you must write 90. |

You can manually modify the price when:

* [Adding an item to a subscription](#adding-an-item-to-a-subscription).
* [Editing an item in a subscription](#editing-an-item-in-a-subscription).

Read the following sections for details on the endpoints you must use and their request body examples.

> 🚧 You can only apply a manual price to a subscription item if the `manualPriceAllowed` configuration is set to `true`, as described in the [Configuration](#configuration) section.

### Adding an item to a subscription

When making a post [Add item to subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/post%5Fapi-rns-pub-subscriptions-id-items) request, you can apply a manual price by informing a new value in the `manualPrice` property in the request body.

#### Request body example

`1

{

2

 "skuId": "12",

3

 "quantity": 5,

4

 "manualPrice": 40

5

}

`

### Editing an item in a subscription

To apply a manual price when making a patch [Edit item on subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/patch%5Fapi-rns-pub-subscriptions-id-items-itemid) request, you must inform the desired value in the `manualPrice` property in the request body.

Keep in mind that all the other editable properties — `status`, `isSkipped`, and `quantity` — remain with the same behavior and can be set in the same request to edit the subscription item as the `manualPrice`.

#### Request body example

`1

{

2

 "quantity": 5,

3

 "manualPrice": 500

4

}

`

### Removing a manual price in a subscription item

To remove a manual price, you must set the `manualPrice` value to `null` when making a patch [Edit item on subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/patch%5Fapi-rns-pub-subscriptions-id-items-itemid) request.

#### Request body example

`1

{

2

 "manualPrice": null

3

}

`

Another option is to completely remove the item from the subscription, making a request to the delete [Remove item from subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/delete%5Fapi-rns-pub-subscriptions-id-items-itemid) endpoint.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/_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/enabling-manual-prices-for-subscriptions-v3/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

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/Subscriptions/enabling-manual-prices-for-subscriptions-v3.md)

[Adding a second address for invoicing an order« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3//docs/guides/adding-a-second-address-to-the-order)[How to keep attachments from original orders in subscriptionsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3//docs/guides/how-to-keep-attachments-from-original-orders-in-subscriptions)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/_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/enabling-manual-prices-for-subscriptions-v3/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23before-you-begin)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23configuration)

[Setting a manual price in a subscription item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23setting-a-manual-price-in-a-subscription-item)

[Adding an item to a subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23adding-an-item-to-a-subscription)[Editing an item in a subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23editing-an-item-in-a-subscription)[Removing a manual price in a subscription item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23removing-a-manual-price-in-a-subscription-item)

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/Subscriptions/enabling-manual-prices-for-subscriptions-v3.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23before-you-begin)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23configuration)

[Setting a manual price in a subscription item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23setting-a-manual-price-in-a-subscription-item)

[Adding an item to a subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23adding-an-item-to-a-subscription)[Editing an item in a subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23editing-an-item-in-a-subscription)[Removing a manual price in a subscription item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enabling-manual-prices-for-subscriptions-v3/docs/guides/enabling-manual-prices-for-subscriptions-v3%23removing-a-manual-price-in-a-subscription-item)

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 vtex io documentation 6 buildingyourownstoretheme 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/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/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/vtex-io-documentation-6-buildingyourownstoretheme/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/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/vtex-io-documentation-6-buildingyourownstoretheme/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/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/vtex-io-documentation-6-buildingyourownstoretheme/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/getting-started-3)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-glossary)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/getting-started-3)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-glossary)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/store-framework)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/getting-started-3)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

6\. Building your own Store Theme

Explore resources to personalize your VTEX store with Store Framework.

After completing the initial setup, creating your Store Theme project, and learning how to customize your store pages, you can start implementing advanced personalization for your store.

Under the [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework) category, you'll find a set of guides to help you customize your storefront:

* [Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-building-pages): Create different types of pages tailored to your business needs.
* [Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-using-components): Build your storefront, from basic elements to advanced customizations, by leveraging VTEX IO Store Framework components.
* [Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-using-advanced-layouts): Create advanced layouts in your Store Framework store.
* [Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-working-with-site-editor): Customize your Store Framework storefront by using Site Editor.
* [Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-styling): Customize your store layout with Store Framework.

You can also access our [hands-on course on the VTEX Store Framework](https://read.calvincode.net/reader?url=https://learn.vtex.com/page/learning-path-lang-en).

> To foster constructive collaboration among developers, facilitate version monitoring, and improve the visibility of your Store Theme app, use code versioning tools such as GitHub. Learn more in [Best practices on workspace management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspaces-best-practices).

Once you've finished customizing your storefront, whether by completing the hands-on course or following our guides, remember that your Store Theme app is still stored locally on your computer and linked to your VTEX store only through the development workspace. To make your changes visible to end users, you need to [make your theme content public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public).

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/_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/Getting-Started/getting-started-3/vtex-io-documentation-6-buildingyourownstoretheme.md)

[5\. Defining styles« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme//docs/guides/vtex-io-documentation-5-definingstyles)[7\. Making your store theme publicNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme//docs/guides/vtex-io-documentation-making-your-theme-content-public)

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme/_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/Getting-Started/getting-started-3/vtex-io-documentation-6-buildingyourownstoretheme.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=)