Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
VTEX Store Components
Official extension
Version: 3.172.2
Latest version: 3.172.2

{"base64":"  ","img":{"width":116,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square"}}

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

Usage

The Store Components collection uses the store builder with the blocks architecture. Please refer to our Builder 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.


_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

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:

_10
"builders": {
_10
"styles": "2.x"
_10
}

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

_10
.container {
_10
margin-top: 10px;
_10
}

Components

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

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/<component_name> 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:


_10
import ProductPrice from './components/ProductPrice/index'
_10
_10
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. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

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

Travis CI

An error occurred while trying to load the image. https://api.travis-ci.org/vtex-apps/store-components.svg?branch=master

See also
VTEX App Store
VTEX IO Apps
Image
VTEX IO Apps
BackToTopButton
VTEX IO Apps
Logo
VTEX IO Apps
Notification
VTEX IO Apps
SearchBar
VTEX IO Apps
AvailabilitySubscriber
VTEX IO Apps
ProductBrand
VTEX IO Apps
ProductSKUAttributes
VTEX IO Apps
SKUSelector
VTEX IO Apps
ProductHighlights
VTEX IO Apps
ProductSpecifications
VTEX IO Apps
BuyButton
VTEX IO Apps
ProductImages
VTEX IO Apps
InfoCard
VTEX IO Apps
ShippingSimulator
VTEX IO Apps
ProductName
VTEX IO Apps
ProductPrice
VTEX IO Apps
Newsletter
VTEX IO Apps
ProductDescription
VTEX IO Apps
Share
VTEX IO Apps
AutocompleteResults
VTEX IO Apps