https://github.com/vtex-apps/store-components

Default VTEX store components
https://github.com/vtex-apps/store-components

hacktoberfest srv-store-framework store-framework vtex-io xp-developer

Last synced: 26 days ago
JSON representation

Default VTEX store components

Host: GitHub
URL: https://github.com/vtex-apps/store-components
Owner: vtex-apps
Created: 2018-04-09T14:53:41.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2025-10-13T17:13:05.000Z (4 months ago)
Last Synced: 2025-10-23T19:33:48.878Z (4 months ago)
Topics: hacktoberfest, srv-store-framework, store-framework, vtex-io, xp-developer
Language: JavaScript
Homepage:
Size: 7.79 MB
Stars: 55
Watchers: 55
Forks: 151
Open Issues: 40
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          >📢 **Disclaimer** Don't fork this project. Use it, [contribute](https://github.com/vtex-apps/store-components) to it or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion) to help us evolve it.

# VTEX Store Components

[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)

VTEX Store Components is a collection of components that can be used to create/extend others VTEX apps.

- [VTEX Store Components](#vtex-store-components)

  - [Usage](#usage)

  - [Styles API](#styles-api)

  - [Components](#components)

  - [Creating a new component](#creating-a-new-component)

    - [Project structure](#project-structure)

  - [Troubleshooting](#troubleshooting)

  - [Contributing](#contributing)

  - [Tests](#tests)

    - [Travis CI](#travis-ci)

  - [Contributors](#contributors)

## Usage

The Store Components collection uses the `store` builder with the blocks architecture. Please refer to our [Builder](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-builders) documentation to learn more about the `store` builder. 

To use this app, you must import it as dependency of your project in the `manifest.json` file.

```json

  "dependencies": {

    "vtex.store-components": "3.x"

  }

```

Then, you can start adding components to your store theme app.

## Styles API

The Store Components collection provides some CSS classes as an API for style customization.

To use this CSS API, you must add the `styles` builder and create an app styling CSS file.

1. Add the `styles` builder to your `manifest.json`:

```json

  "builders": {

    "styles": "2.x"

  }

```

2. Create a file called `vtex.store-components.css` inside the `styles/css` folder. Add your custom styles:

```css

.container {

  margin-top: 10px;

}

```

## Components

For more information, check the documentation of all components of the Store Components collection.

- [Availability Subscriber](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-availabilitysubscriber)

- [Back To Top Button](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-backtotopbutton)

- [Buy Button](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-buybutton)

- [Image](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-image)

- [InfoCard](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-infocard)

- [Logo](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-logo)

- [Newsletter](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-newsletter)

- [Product Brand](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productbrand)

- [Product Description](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productdescription)

- [Product Images](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productimages)

- [Product Name](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productname)

- [Product SKU Attributes](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productskuattributes)

- [Product Price](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productprice)

- [Product Specifications](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productspecifications)

- [SKU Selector](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-skuselector)

- [Search Bar](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-searchbar)

- [Share](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-share)

- [Shipping Simulator](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-shippingsimulator)

- [Notification](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-notification)

> ⚠️ Warning

>

> **The following blocks have been deprecated:** `Animation`, `Categories Highlights`, `Collection Badges`, `Container`, `Discount Badge`, `Gradient Collapse`, `Greeting`, `Slider`. Despite this, support for them is still granted.

## Creating a new component

To start your development, create a new folder on react/components. That's where your source code will be stored. Also create a new js file on /react, this file should be used to expose your component, like:

### Project structure

Inside your `react/components/` you should have:

- index.js

- README.md

- [Optional] components/

- [Optional] constants/

- [Optional] utils/

- [Optional] queries/

- [Optional] mutations/

- [Optional] styles.css

Next, inside of `react/` folder you need to export your component, such as:

```js

import ProductPrice from './components/ProductPrice/index'

export default ProductPrice

```

Also, all dependencies needed should be inserted inside the react/package.json.

## Troubleshooting

You can check if others are passing through similar issues [here](https://github.com/vtex-apps/store-components/issues). Also feel free to [open issues](https://github.com/vtex-apps/store-components/issues/new) or contribute with pull requests.

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

## Tests

To execute our tests go to `react/` folder and run `yarn test`

### Travis CI

[![Build Status](https://api.travis-ci.org/vtex-apps/store-components.svg?branch=master)](https://travis-ci.org/vtex-apps/store-components)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_Dan
💻

    
_{Jean Nussenzveig}
💻

    
_{Lucas Antônio Yamamoto Borges}
💻

    
_{Sebastian Sanchez Vega}
💻

    
_Erislandio
💻

    
_{Beatriz Miranda}
💻

    
_Jayendra
💻

  

  

    
_{Pierre Grimaud}
📖

    
_{Igor Poubel}
💻

    
_{Hugo Costa}
💻

    
_{Matheus Araujo}
📖

    
_{Luisa Correa}
💻

    
_pmarignan
💻

    
_{Rodrigo Muniz}
💻

  

  

    
_Ovi
💻

    
_{LucasCastroJussi}
💻

    
_razvanudream
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

**Upcoming documentation:**

 - [Render logo as amp-img if in AMP page](https://github.com/vtex-apps/store-components/pull/580)

 - [Update CSS handles on ProductSpecification](https://github.com/vtex-apps/store-components/pull/599)

 - [Including classes on searchBar to identify when is open and/or filled](https://github.com/vtex-apps/store-components/pull/792)

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/vtex-apps/store-components

Awesome Lists containing this project

README