Shipping Simulator
The shipping-simulator
block estimates the shipping fee based on a zip code input.

Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
"dependencies": {
"vtex.store-components": "3.x"
}
- Add the
shipping-simulator
block to any child of thestore.product
template (Product Details Page template). For example:
"store.product": {
"children": [
"flex-layout.row#product",
]
},
"flex-layout.row#product": {
"children": [
+ "shipping-simulator"
]
},
- Then, declare the
shipping-simulator
block using the props stated in the Props table. For example:
"shipping-simulator": {
"props": {
"skuID": "342"
}
},
Props
Prop name | Type | Description | Default value |
---|---|---|---|
pricingMode | enum | If the product has gifts or attachments, for example, you can choose whether the shipping information will be grouped (grouped ) by shipping type or showing the shipping prices for each of the items individually (individualItems ). | individualItems |
seller | String | ID of the product seller. | - |
shouldUpdateOrderForm | Boolean | Whether interacting with the simulator should update the shopper's address in their orderForm . | true |
skuId | String | ID of the current product SKU. | - |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
shippingContainer |
shippingContainerLoader |
shippingCTA |
shippingInputLoader |
shippingNoMessage |
shippingTable |
shippingTableBody |
shippingTableCell |
shippingTableCellDeliveryEstimate |
shippingTableCellDeliveryName |
shippingTableCellDeliveryPrice |
shippingTableHead |
shippingTableHeadDeliveryEstimate |
shippingTableHeadDeliveryName |
shippingTableHeadDeliveryPrice |
shippingTableLabel |
shippingTableRadioBtn |
shippingTableRow |
shippingZipcodeLabel |
shippingZipcodeLabelLoader |