[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 getting started 2 starting the project 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/getting-started-2-starting-the-project/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-overview)

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-glossary)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-overview)

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-glossary)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/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/getting-started-2-starting-the-project/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-overview)

2\. Starting a new FastStore project

Create and set up your FastStore project with WebOps.

In this step, you'll use the [FastStore WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-dashboard) to create your FastStore project, connect it to GitHub, and deploy a live preview.

This establishes your project’s source of truth and CI/CD path — the foundation for all later steps in this track.

## What you'll accomplish

By the end of this step, you will have:

* Created your FastStore project with basic configuration (project name, SEO tags, GTM, catalog)
* Connected your project to a GitHub repository for version control
* Set up the Headless CMS integration for content management
* Deployed your project and generated a live preview of your storefront

Your project will be accessible at `https://{accountName}.vtex.app/` and ready for local development in the next step.

## Getting to know the WebOps app

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-dashboard) is the **control plane** for FastStore projects. It manages every stage of your storefront’s lifecycle, from creation to deployment, and integrates with your GitHub repository and VTEX account to facilitate collaboration and automation.

![{"base64":"  ","img":{"width":1303,"height":836,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":193459,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/dashboard-overview.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/dashboard-overview.png)

WebOps connects your storefront code (GitHub) with your VTEX infrastructure, enabling a branch-based workflow for development and production. Keep the following in mind:

* **Environment requirement:** WebOps operates exclusively in the production environment. Install it only in your account’s `master` environment.
* **Development workflow:** FastStore uses a [Git branching model](https://read.calvincode.net/reader?url=https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) for development and testing:
   * The app is installed in the `master` environment of your VTEX account.
   * Development and testing occur on Git branches.
   * Approved changes are merged into the repository’s `main` branch and automatically deployed to production.

> Unlike [VTEX IO workspaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace), FastStore uses a Git-based branching workflow.

## Before you begin

### Check permissions

To start a FastStore project, users must have the **Owner (Admin Super)** [role](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc%23roles).

### Create your store catalog

Create a catalog to populate and test your store. It should include essential components such as product listing pages, search, product details, and checkout. Developing without a catalog may result in incomplete testing, data integration issues, and rework later.

For more information, refer to the [Catalog documentation](https://read.calvincode.net/reader?url=https://help.vtex.com/docs/tracks/catalog).

### Have a GitHub account

To complete the FastStore WebOps onboarding, you’ll need a GitHub account to host your project. You can use either a [personal account](https://read.calvincode.net/reader?url=https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github) or a [GitHub organization](https://read.calvincode.net/reader?url=https://docs.github.com/en/organizations/collaborating-with-groups-in-organizations/about-organizations).
If you use a GitHub organization, ensure you have **admin access** to it.

## Step 1: Setting up the project

1. Open the VTEX Admin and access **Storefront > FastStore WebOps**.
2. Click `Start Project`.
3. In the **Setup & Create Project** page, configure the following options for your store:

### Project

Choose the option that best fits your project's purpose. This helps us understand what you're trying to achieve with FastStore and improve your experience.

| Field                                                     | Description                                                  |
| --------------------------------------------------------- | ------------------------------------------------------------ |
| **Project name**                                          | Enter your FastStore project's name, e.g., Marcio Car store. |
| **Which option best describes the goal of your project?** | Choose the option that best fits your project’s purpose.     |

### SEO Tags

| Field               | Description                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Title Tag**       | Enter a keyword-optimized title for your store. For example: Buy Online with the Best Game Store - GameStore. In this example, we used the length limit of around 50-60 characters to ensure it is fully displayed in search results without being truncated. |
| **Description Tag** | Enter a brief description of your store, for example, Shop online at GameStore, the best game store for PC, Xbox, PS4 and Headphones. Explore our wide selection and buy your favorite games today!                                                           |
| **Title Template**  | Enter a page title that helps search engines and users better understand the content of your store. For example, The best game store - GameStore.                                                                                |
| **Site Author**     | Enter the name of the agency or person responsible for the development of the storefront.                                                                                |

### Google Tag Manager

| Field      | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **GTM ID** | Enter the Google Tag Manager ID (GTM ID) associated with the GTM container responsible for managing and organizing the tags of your store. |

### Catalog

| Field       | Description                                            |
| ----------- | ------------------------------------------------------ |
| **Catalog** | Choose which catalog your store should be linked with. |

### Terms of use

If you already have content created in the [Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview), be aware that it will be automatically deleted during FastStore WebOps onboarding to avoid content duplication.

To proceed, please confirm that you understand by checking the Terms of use box.

After setting up the basic configuration for your store and reviewing it, click `Continue` to proceed to the next page.

## Step 2: Setting up integrations

On this page, you will set up the native Headless CMS integration and connect to a GitHub organization.

### CMS Integration

Configure the native [Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview) integration and connect to GitHub.

### Git Provider

Connect with a GitHub personal account or organization of your choice to host the source code of your FastStore project.

> If you choose to install the app in a GitHub organization, make sure you have admin access to an organization.

To connect to the FastStore WebOps app, follow these steps:

1. Click `Connect with GitHub`. A new browser tab will open on the side for you to integrate the app with GitHub.
> If you are not logged in to your GitHub account, in the new tab, you will be asked to log in. Then, you can continue to the next step.
2. Once you are logged in to your GitHub account, choose the organization or your personal account you want to install the app. You will be redirected to the **Settings** page on GitHub.
> Once you define the GitHub organization, you cannot change it later.
3. In **Repository access**, choose one of the following options: **All repositories from the organization** or **Only select repositories**.
4. Click `Install`.

The following successful message will appear on the page:

`1

Success! You can now close this page and proceed with the onboarding process.

`

After seeing the success message, close the browser tab and continue the onboarding process in the VTEX Admin.

1. Now that the app is integrated with GitHub, select which repository you want to start the project:
   * **New repository:** Create a repository from scratch, in this option, you only need to type a name for the repository, and after clicking `Create`, it will create the repository for you.
   * **Existing repository:** Select an existing repository from the organization to start the project.
2. Click `Create`. The deployment process will begin, and once it is complete, you will be redirected to the [Deploy Summary](#step-3--deploying-the-project) page.

## Step 3: Deploying the project

After completing the setup for your store, the deployment process will begin. This process involves creating a GitHub repository and a default domain for your project. Once the deployment process is complete, you should see the following:

![{"base64":"  ","img":{"width":1332,"height":848,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":79888,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/deploy-summary-webops___ff30808c6eef395f89173c38880b683f.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/deploy-summary-webops___ff30808c6eef395f89173c38880b683f.png)

| Option              | Description                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Your Repository** | Access the store's GitHub repository and start setting up and customizing your store.                                                                                |
| **Documentation**   | Access the FastStore Portal Documentation.                                                                                |
| **Customization**   | Access the documentation on how to customize your store.                                                                                |
| **View Dashboard**  | Access the Dashboard with the current status of your store, including its domains, deployed versions, store preview, and Lighthouse scores. For more information, please refer to the [Dashboard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-dashboard) guide. |

> If repository creation fails and no live preview is generated, click **Retry** to redeploy.

## Next step

Now that your store is up and running with a live preview, set up your local development environment: [3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-setting-up-the-project)

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/_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/faststore/docs/getting-started/2-starting-the-project.mdx)

[1\. Setting up your environment« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-1-setting-up-your-environment)[3\. Running the project locallyNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-3-running-the-project-locally)

Contributors

2

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

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

ON THIS PAGE

[What you'll accomplish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23what-youll-accomplish)

[Getting to know the WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23getting-to-know-the-webops-app)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23before-you-begin)

[Check permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23check-permissions)[Create your store catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23create-your-store-catalog)[Have a GitHub account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23have-a-github-account)

[Step 1: Setting up the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23step-1-setting-up-the-project)

[Project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23project)[SEO Tags](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23seo-tags)[Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23google-tag-manager)[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23catalog)[Terms of use](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23terms-of-use)

[Step 2: Setting up integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23step-2-setting-up-integrations)

[CMS Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23cms-integration)[Git Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23git-provider)

[Step 3: Deploying the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23step-3-deploying-the-project)

[Next step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23next-step)

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/getting-started/2-starting-the-project.mdx)

Copy page

On this page

ON THIS PAGE

[What you'll accomplish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23what-youll-accomplish)

[Getting to know the WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23getting-to-know-the-webops-app)

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23before-you-begin)

[Check permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23check-permissions)[Create your store catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23create-your-store-catalog)[Have a GitHub account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23have-a-github-account)

[Step 1: Setting up the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23step-1-setting-up-the-project)

[Project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23project)[SEO Tags](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23seo-tags)[Google Tag Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23google-tag-manager)[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23catalog)[Terms of use](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23terms-of-use)

[Step 2: Setting up integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23step-2-setting-up-integrations)

[CMS Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23cms-integration)[Git Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23git-provider)

[Step 3: Deploying the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23step-3-deploying-the-project)

[Next step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project/docs/guides/faststore/getting-started-2-starting-the-project%23next-step)

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 slider layout 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.slider-layout/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

Slider Layout

Official extension

Version: 0.24.8

Latest version: 0.24.8

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

Slider Layout is a flexible solution for building block sliders in VTEX Store Framework, such as a carousel component.

![{"base64":"  ","img":{"width":2632,"height":1332,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1341359,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-0.png)

> _To use the Slider layout as a substitute for the [Carousel app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/carousel), read the [Building a Carousel through lists and Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout) documentation._

## Google Analytics 4 Integration

Slider Layout enables you to integrate your component with [Google Analytics 4](https://read.calvincode.net/reader?url=https://developers.google.com/analytics/devguides/collection/ga4). The integration happens through the [GA4 view\_promotion](https://read.calvincode.net/reader?url=https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client%5Ftype=gtm%23view%5Fpromotion) event, which is typically associated with the promotion banners carousel displayed by the Slider Layout.

By integrating with Google Analytics 4, you can set the `Product ID` and `Product Name`, and position of your promotion on [Site Editor](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/site-editor-overview--299Dbeb9mFczUTyNQ9xPe1) to be shown on a Google Analytics dashboard.

To set this up, go to the VTEX Admin, access **Storefront > Site Editor**, and open the image settings of the internal promotion you want to track. These settings are displayed on the right side of the page.

![{"base64":"  ","img":{"width":819,"height":464,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":336599,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png)

> For more information about managing your page content, read [Managing page and template content](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/managing-page-and-template-content--3tMbx6HXy4Fy5r9EhboG37).

After setup, Google Analytics can track your internal promotions and generate reports of their views, clicks, click-through rate, conversions, and revenue.

## Configuration

1. Add the `slider-layout` app to your theme dependencies in the `manifest.json` file:

`1

"dependencies": {

2

 "vtex.slider-layout": "0.x"

3

}

`

Now, you can use all blocks exported by the `slider-layout` app. See the complete list below:

| Block name          | Description                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slider-layout       | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Builds block sliders for your store through its children list blocks. |
| slider-layout-group | Enables you to keep a group of slider-layout blocks synched with each other. For more information about this, see the Advanced configuration section below.                                                                                |

1. Add the `slider-layout` block to your template. For example:

`1

 "slider-layout#text-test": {

2

 "props": {

3

 "itemsPerPage": {

4

 "desktop": 1,

5

 "tablet": 1,

6

 "phone": 1

7

 },

8

 "infinite": true,

9

 "showNavigationArrows": "desktopOnly",

10

 "blockClass": "carousel"

11

 },

12

 "children": ["rich-text#1", "rich-text#2", "rich-text#3"]

13

 },

14

15

 "rich-text#1": {

16

 "props": {

17

 "text": "Test1"

18

 }

19

 },

20

 "rich-text#2": {

21

 "props": {

22

 "text": "Test2"

23

 }

24

 },

25

 "rich-text#3": {

26

 "props": {

27

 "text": "Test3"

28

 }

29

 },

`

| Prop name            | Type            | Description                                                                                | Default value                        |
| -------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| label                | string          | aria-label attribute value to be used by the <Slider/> component when rendered. The aria-label value should explicitly tell users what the inspected HTML element does.                                                                                | slider                               |
| showNavigationArrows | enum            | Indicates when navigation arrows should be rendered. Possible values are: mobileOnly, desktopOnly, always, or never.                                                                                | always                               |
| showPaginationDots   | enum            | Indicates when pagination dots should be rendered. Possible values are: mobileOnly, desktopOnly, always, or never.                                                                                | always                               |
| infinite             | boolean         | Determines whether the slider should be infinite (true) or not (false). When this prop is set as false, the slider will have an explicit end for users.                                                                                | false                                |
| usePagination        | boolean         | Determines whether the slider should use slide pages (true) or not (false). When this prop is set as false, the slider will use smooth scrolling for slide navigation instead of arrows.                                                                                | true                                 |
| itemsPerPage         | object          | The number of slider items to be shown on each type of device. For more information about this, see the itemsPerPage object section below.                                                                                | { desktop: 5, tablet: 3, phone: 1 }  |
| navigationStep       | number / enum   | The number of slider items that should be displayed when users click one of the slider arrows. It is also possible to set this prop value as page, meaning that the number of slider items to be displayed when one of the arrows is clicked is equal to the number of slider items set per page (in the itemsPerPage prop).                                                                                | page                                 |
| slideTransition      | object          | Controls the transition animation between slides based on [CSS attributes](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Web/CSS/transition). For more information about this, see the slideTransition object section below.                                                                                | { speed: 400, delay: 0, timing: '' } |
| autoplay             | object          | Controls the autoplay feature behavior. For more information about this, see the autoplay object section below.                                                                                | undefined                            |
| fullWidth            | boolean         | Determines whether the slides should occupy the full page width, making the arrows appear on top of them (true) or not (false).                                                                                | true                                 |
| arrowSize            | number / object | Slider arrows size (height and width) in pixels. This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (desktop, mobile, tablet, and phone).                                                                                | 25                                   |
| centerMode           | enum / object   | Defines positioning of the slider elements on the screen. Possible values are: center (elements are centered, allowing users to see a peek of the previous and next slides), to-the-left (aligns elements to the left side, allowing users to see a peek of the next slide, but not the previous one), and disabled (disables the feature, rendering elements on the whole screen without showing a peek of the previous and next slides). Note: This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (desktop, mobile, tablet, and phone). | disabled                             |
| centerModeSlidesGap  | number          | Number of pixels between slides when centerMode is set to center or to-the-left.                                                                                | undefined                            |

* **`itemsPerPage` object**

| Prop name | Type   | Description                                              | Default value |
| --------- | ------ | -------------------------------------------------------- | ------------- |
| desktop   | number | The number of slides to be displayed on desktop devices. | 5             |
| tablet    | number | The number of slides to be displayed on tablet devices.  | 3             |
| phone     | number | The number of slides to be displayed on phone devices.   | 1             |

* **`slideTransition` object**

| Prop name | Type   | Description                             | Default value |
| --------- | ------ | --------------------------------------- | ------------- |
| speed     | number | Transition speed (in ms).               | 400           |
| delay     | number | Delay between slide transition (in ms). | 0             |
| timing    | string | Timing function.                        | ''            |

* **`autoplay` object**

| Prop name   | Type    | Description                                                                                | Default value |
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- | ------------- |
| timeout     | number  | Timeout (in ms) between each slide.                                                                        | undefined     |
| stopOnHover | boolean | Determines whether the autoplay should stop when users are hovering over the slider (true) or not (false). | undefined     |

## Advanced configuration

The `slider-layout-group` block synchronizes the slides rendered by each `slider-layout` block declared in it.

Therefore, the `slider-layout-group` does not render any specific component on the store UI. It is really a logical block that only expects to receive a `children` block list containing the desired `slider-layout` blocks that should be rendered. For example:

`1

{

2

 "slider-layout-group#test": {

3

 "children": ["slider-layout#1", "slider-layout#2", "slider-layout#3"]

4

 }

5

}

`

Below, you can find a practical example using three `slider-layout` blocks inside of a `slider-layout-group`. Each `slider-layout` received three `rich-text` blocks as `children` to serve as individual slides:

![{"base64":"  ","img":{"width":1062,"height":176,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":648623,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-3.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-3.gif)

> **\*All `slider-layout` blocks declared in the `slider-layout-group` must have the same configuration, meaning the same props and values**. Due to implementation rules, they can only differ in their `children` block list. Keep in mind that declaring `slider-layout` blocks with different configurations will result in unexpected behavior, leading to errors that are **not** supported by the VTEX Store Framework team.\*

## Customization

To apply CSS customizations to this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS handles             |
| ----------------------- |
| paginationDot--isActive |
| paginationDot           |
| paginationDotsContainer |
| slide--firstVisible     |
| slide--hidden           |
| slide--lastVisible      |
| slide--visible          |
| slideChildrenContainer  |
| slide                   |
| sliderArrows            |
| sliderLayoutContainer   |
| sliderLeftArrow         |
| sliderRightArrow        |
| sliderTrackContainer    |
| sliderTrack             |

[Responsive Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.responsive-layout)[Stack LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.stack-layout)

See also

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

ON THIS PAGE

[Google Analytics 4 Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.slider-layout%23google-analytics-4-integration)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.slider-layout%23configuration)

[Advanced configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.slider-layout%23advanced-configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.slider-layout/docs/apps/vtex.slider-layout%23customization)

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 vtex io documentation creating modals using icons 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-creating-modals-using-icons/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/docs/guides/getting-started-with-storefront-solutions)

---

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

---

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

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

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

Concepts

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

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

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

[Building a Carousel using Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout)

[Creating a Quickview using Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout)

[Creating modals using icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-modals-using-icons)

[Rendering a badge on top of a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-rendering-a-badge)

[Using Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-using-flex-layout)

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

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

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/docs/guides/vtex-io-multi-language-stores)

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

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/docs/guides/storefront-best-practices)

---

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

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

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

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

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

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

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/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-creating-modals-using-icons/docs/guides/getting-started-with-storefront-solutions)

---

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

---

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

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

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

Concepts

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

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

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

[Building a Carousel using Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout)

[Creating a Quickview using Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout)

[Creating modals using icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-modals-using-icons)

[Rendering a badge on top of a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-rendering-a-badge)

[Using Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-using-flex-layout)

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

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

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/docs/guides/vtex-io-multi-language-stores)

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

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/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-creating-modals-using-icons/docs/guides/storefront-best-practices)

---

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

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

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

[Creating modals using icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-modals-using-icons)

Creating modals using icons

When talking about ecommerce, a modal is a **popup window**, triggered by an UI component, that forces users to interact with it before a certain action is taken during browsing.

Let's look at the following scenario: ready to proceed to checkout, a user browsing your store has a full cart. The user then removes an item from the product list without noticing, by accidentally clicking on the trash icon.

To your business, it's advantageous to trigger a popup window in this removal icon, requiring user confirmation to complete the action. In a lot of cases, the modal will contribute to an increase in conversion rate.

To build modals in such a scenario using Store Framework, we'll use the [Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-modal-layout) block and the icons exported by the [Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-icons) app.

## Instructions

For this step, we'll take the example given above: let's add a modal to the icon used by the [Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-minicart) to remove product list items.

1. Using a [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/), open you store's theme using any code editor;
2. In the `blocks.json` folder, look for the block responsible for rendering the desired icon. In our example, the minicart icon is the removal one and the block responsible for rendering it is called `remove-button`:

`1

 "flex-layout.col#remove-button.desktop": {

2

 "children": ["remove-button"],

3

 "props": {

4

 "marginLeft": "3"

5

 }

6

 },

`

1. Remove the block responsible for the icon and in its place add the Modal Layout's app `modal-trigger` block:

`1

 "flex-layout.col#remove-button.mobile": {

2

 "children": ["modal-trigger#confirmation-modal"],

3

 "props": {

4

 "marginLeft": "3"

5

 }

6

 },

`

1. Then, declare the new `modal-trigger` block: list the `modal-layout` block as its child and, according to your store's scenario, list the icon you wish to trigger the modal. For example:

`1

 "modal-trigger#confirmation-modal": {

2

 "children": [

3

 "icon-delete",

4

 "modal-layout#confirmation-modal"

5

 ]

6

 },

`

> Looking at our example, the icon we wish to use to trigger the modal is the one for removal. We therefore add the `icon-delete` (exported by the Store Icons app) to the list of `modal-trigger` children. Choose the icon according to your store's scenario.

1. Then, declare the `modal-layout` block along with the `modal-actions` block as a child of the first. You can also declare other blocks you may want to have rendered in the modal, such as a [Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-rich-text/). For example:

`1

 "modal-layout#confirmation-modal": {

2

 "children": [

3

 "modal-actions#confirmation-modal"

4

 ]

5

 },

`

1. Upon declaring the `modal-actions` block, list `modal-actions.close` as its child, along with the block previously removed in step 3 to make way for `modal-trigger`. In our example, it's the `remove-button`:

`1

 "modal-actions#confirmation-modal": {

2

 "children": [

3

 "modal-actions.close",

4

 "remove-button"

5

 ]

6

 },

`

1. Once you're happy with the changes, follow our documentation on [making your theme content public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/) to make your configurations available to end users.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/_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/Storefront-Guides/concepts-1/vtex-io-documentation-creating-modals-using-icons.md)

[Creating a Quickview using Modal Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons//docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout)[Rendering a badge on top of a productNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons//docs/guides/vtex-io-documentation-rendering-a-badge)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-modals-using-icons%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/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-modals-using-icons.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons/docs/guides/vtex-io-documentation-creating-modals-using-icons%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=)