[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/product-price.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#product-price": {
    "children": ["flex-layout.col#product-price"],
    "props": {
      "blockClass": "product-price"
    }
  },
  "flex-layout.col#product-price": {
    "children": [
      "product-list-price#desktop",
      "flex-layout.row#price",
      "flex-layout.row#priceSavings"
    ],
    "props": {
      "blockClass": "product-price"
    }
  },
  "flex-layout.row#priceSavings": {
    "children": [
      "product-price-savings#desktop",
      "product-price-savings#percentage"
    ],
    "props": {
      "preventHorizontalStretch": true,
      "blockClass": "priceSavings"
    }
  },
  "flex-layout.row#price": {
    "children": ["product-selling-price#desktop"],
    "props": {
      "blockClass": ["items-baseline"],
      "colSizing": "auto",
      "colGap": 3,
      "fullWidth": true,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },
  "product-selling-price#desktop": {
    "props": {
      "blockClass": ["desktop"],
      "message": "{sellingPriceWithTax} (with taxes)"
    }
  },
  "product-list-price#desktop": {
    "props": {
      "blockClass": ["desktop"]
    }
  },
  "product-price-savings#desktop": {
    "props": {
      "blockClass": ["desktop"]
    }
  },
  "product-price-savings#percentage": {
    "props": {
      "message": "({savingsPercentage})",
      "blockClass": ["desktop", "savingPercent"]
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/fake-summary.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#fake-summary": {
    "children": [
      "product-images#fake-summary",
      "flex-layout.col#fake-summary-details"
    ],
    "props": {
      "blockClass": ["items-center", "fake-summary", "visible-sticky"],
      "colSizing": "auto",
      "colGap": 5,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "product-images#fake-summary": {
    "props": {
      "blockClass": "fake-summary",
      "aspectRatio": "1:1",
      "displayThumbnailsArrows": false,
      "maxHeight": 96,
      "showNavigationArrows": false,
      "showPaginationDots": false,
      "thumbnailMaxHeight": 0,
      "zoomMode": "disabled",
      "contentType": "images"
    }
  },

  "flex-layout.col#fake-summary-details": {
    "children": [
      "vtex.store-components:product-name#fake-summary",
      "product-sku-attributes#fake-summary"
    ]
  },

  "product-sku-attributes#fake-summary": {
    "props": {
      "blockClass": ["fake-summary", "inline"]
    }
  },

  "vtex.store-components:product-name#fake-summary": {
    "props": {
      "blockClass": "fake-summary"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/product-availability-and-quantity.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#product-availability-and-quantity": {
    "children": ["product-availability#desktop", "product-quantity#desktop"],
    "props": {
      "blockClass": ["items-center", "product-availability-and-quantity"],
      "colGap": 0,
      "preserveLayoutOnMobile": true,
      "preventVerticalStretch": true
    }
  },

  "product-availability#desktop": {
    "props": {
      "blockClass": "desktop",
      "threshold": "10",
      "lowStockMessage": "Only {quantity} left!",
      "highStockMessage": "Item in stock!"
    }
  },

  "product-quantity#desktop": {
    "props": {
      "blockClass": ["desktop"],
      "selectorType": "dropdown",
      "showLabel": false
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/breadcrumb.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#breadcrumb": {
    "children": ["flex-layout.col#breadcrumb"],
    "props": {
      "blockClass": "breadcrumb",
      "paddingTop": {
        "desktop": 5,
        "mobile": 6
      },
      "marginBottom": {
        "mobile": 6
      }
    }
  },

  "flex-layout.col#breadcrumb": {
    "children": ["breadcrumb#default"]
  },

  "breadcrumb#default": {
    "props": {
      "blockClass": ["default"],
      "showOnMobile": true,
      "homeIconSize": 18
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/box.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "sticky-layout#box": {
    "children": ["flex-layout.row#box"],
    "props": {
      "blockClass": ["box"],
      "position": "top",
      "verticalSpacing": 186
    }
  },

  "flex-layout.row#box": {
    "children": ["flex-layout.col#box"],
    "props": {
      "blockClass": ["box"],
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "flex-layout.col#box": {
    "children": [
      "flex-layout.row#fake-summary",
      "flex-layout.row#seller-name",
      "check-permission#product-price"
    ],
    "props": {
      "blockClass": ["box"],
      "preventVerticalStretch": true
    }
  },
  "check-permission#product-price": {
    "props": {
      "roles": [
        "store-admin",
        "sales-admin",
        "sales-manager",
        "sales-representative",
        "customer-admin",
        "customer-approver",
        "customer-buyer"
      ]
    },
    "blocks": [
      "allowed-content#product-price",
      "disallowed-content#product-price"
    ]
  },
  "allowed-content#product-price": {
    "children": [
      "flex-layout.row#product-price",
      "flex-layout.row#location-availability",
      "flex-layout.row#product-availability-and-quantity",
      "flex-layout.row#buy-buttons"
    ]
  },
  "disallowed-content#product-price": {
    "children": ["rich-text#product-price"]
  },
  "rich-text#product-price": {
    "props": {
      "blockClass": ["product-price-message"],
      "text": "Log in or sign up to view prices"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/seller-name.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#seller-name": {
    "children": ["product-seller-name#default"]
  },
  "product-seller-name#default": {
    "props": {
      "blockClass": ["default"],
      "message": "Sold by {sellerName}"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/also-view.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#alsoView": {
    "children": ["flex-layout.col#alsoView"],
    "props": {
      "blockClass": ["relative", "bg-base", "z-998"]
    }
  },
  "flex-layout.col#alsoView": {
    "children": [
      "rich-text#alsoViewTitle",
      "list-context.product-list#alsoView"
    ]
  },
  "rich-text#alsoViewTitle": {
    "props": {
      "text": "### Customers also viewed",
      "blockClass": "alsoView"
    }
  },
  "list-context.product-list#alsoView": {
    "children": ["slider-layout#alsoView"],
    "blocks": ["product-summary.shelf#normal"],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "maxItems": 12
    }
  },
  "slider-layout#alsoView": {
    "props": {
      "itemsPerPage": {
        "desktop": 6,
        "tablet": 4,
        "phone": 2
      },
      "infinite": false,
      "fullWidth": true,
      "blockClass": "shelfAlsoView",
      "showNavigationArrows": "desktopOnly"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/sku-selector.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "condition-layout.product#sku-selector-or-list": {
    "props": {
      "conditions": [
        {
          "subject": "productId",
          "arguments": { "id": 1 }
        }
      ],
      "Then": "flex-layout.row#sku-list",
      "Else": "flex-layout.row#sku-selector"
    }
  },

  "flex-layout.row#sku-selector": {
    "children": ["sku-selector#desktop"]
  },

  "sku-selector#desktop": {
    "props": {
      "blockClass": ["desktop", "color-round"],
      "variationsSpacing": 0,
      "showValueNameForImageVariation": true,
      "showValueForVariation": "all"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/assembly-options.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#assembly-options": {
    "children": ["flex-layout.col#assembly-options"],
    "props": {
      "blockClass": ["assembly-options"]
    }
  },

  "flex-layout.col#assembly-options": {
    "children": ["product-assembly-options#desktop"],
    "props": {
      "blockClass": "assembly-options"
    }
  },

  "product-assembly-options#desktop": {
    "children": [
      "flex-layout.row#product-assembly-options",
      "assembly-option-input-values"
    ],
    "props": {
      "blockClass": "desktop"
    }
  },

  "flex-layout.row#product-assembly-options": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#product-assembly-middle",
      "flex-layout.col#product-assembly-quantity"
    ]
  },

  "flex-layout.col#product-assembly-quantity": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["assembly-option-item-quantity-selector"]
  },

  "flex-layout.col#product-assembly-image": {
    "props": {
      "marginRight": 4
    },
    "children": ["assembly-option-item-image"]
  },

  "flex-layout.col#product-assembly-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#first-level"
    ]
  },

  "assembly-option-item-customize#first-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "flex-layout.row#item-customize",
      "assembly-option-input-values"
    ]
  },

  "flex-layout.row#item-customize": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#item-customize-middle",
      "flex-layout.col#item-customize-quantity"
    ]
  },

  "flex-layout.col#item-customize-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#sec-level"
    ]
  },

  "flex-layout.col#item-customize-quantity": {
    "props": {
      "horizontalAlign": "right",
      "verticalAlign": "middle"
    },
    "children": ["assembly-option-item-quantity-selector"]
  },

  "assembly-option-item-customize#sec-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "assembly-option-item-image",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-quantity-selector"
    ]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/stickyBuy.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "check-permission#sticky-buy": {
    "props": {
      "roles": [
        "store-admin",
        "sales-admin",
        "sales-manager",
        "sales-representative",
        "customer-admin",
        "customer-approver",
        "customer-buyer"
      ]
    },
    "blocks": [
      "allowed-content#sticky-buy"
    ]
  },
  "allowed-content#sticky-buy": {
    "children": ["sticky-layout#stickyBuy"]
  },

  "sticky-layout#stickyBuy": {
    "children": ["flex-layout.row#stickyBuyRow"],
    "props": {
      "blockClass": ["stickyBuy"],
      "position": "bottom",
      "verticalSpacing": 0
    }
  },
  "flex-layout.row#stickyBuyRow": {
    "children": ["flex-layout.col#prices", "add-to-cart-button#buy-now-sticky"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },
  "flex-layout.col#prices": {
    "children": [
      "product-selling-price#sticky",
      "flex-layout.row#priceSavingsSticky"
    ]
  },
  "add-to-cart-button#buy-now-sticky": {
    "props": {
      "blockClass": "buy-now",
      "text": "Add to cart",
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  },
  "product-selling-price#sticky": {
    "props": {
      "blockClass": "sticky",
      "message": "{sellingPriceWithTax}"
    }
  },
  "flex-layout.row#priceSavingsSticky": {
    "children": [
      "product-price-savings#desktop",
      "product-price-savings#percentage"
    ],
    "props": {
      "blockClass": "stickyPriceRow",
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/specification.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#specification": {
    "children": ["flex-layout.col#specification"],
    "props": {
      "blockClass": "specification"
    }
  },

  "flex-layout.col#specification": {
    "children": ["disclosure-layout#specification", "flex-layout.col#divider"],
    "props": {
      "blockClass": "specification",
      "width": "74%"
    }
  },

  "disclosure-layout#specification": {
    "children": [
      "disclosure-trigger#specification",
      "disclosure-content#specification"
    ],
    "props": {
      "initialVisibility": "visible"
    }
  },

  "disclosure-trigger#specification": {
    "children": ["flex-layout.row#disclosure-trigger-specification"],
    "props": {
      "as": "div"
    }
  },

  "flex-layout.row#disclosure-trigger-specification": {
    "children": [
      "rich-text#specifications-disclosure-trigger-heading",
      "flex-layout.col#spacer",
      "disclosure-state-indicator"
    ],
    "props": {
      "blockClass": ["items-end", "disclosure-trigger-specification"],
      "colGap": 0,
      "colSizing": "auto",
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "rich-text#specifications-disclosure-trigger-heading": {
    "props": {
      "blockClass": ["specifications", "disclosure-trigger-heading"],
      "text": "<span>Specifications</span>",
      "font": "t-heading-5"
    }
  },

  "disclosure-content#specification": {
    "children": ["product-specification-group#table"],
    "props": {
      "blockClass": "specification"
    }
  },

  "product-specification-group#table": {
    "children": ["flex-layout.row#spec-group"],
    "props": {
      "filter": {
        "type": "show",
        "specificationGroups": ["Product especification"]
      }
    }
  },

  "flex-layout.row#spec-group": {
    "children": ["flex-layout.col#spec-group"],
    "props": {
      "blockClass": ["spec-group", "table"]
    }
  },

  "flex-layout.col#spec-group": {
    "children": ["product-specification#table"],
    "props": {
      "blockClass": ["spec-group", "table"]
    }
  },

  "product-specification-text#group": {
    "props": {
      "message": "{groupName}"
    }
  },

  "product-specification#table": {
    "children": ["flex-layout.row#spec-item"]
  },

  "flex-layout.row#spec-item": {
    "children": ["flex-layout.col#spec-name", "flex-layout.col#spec-value"],
    "props": {
      "blockClass": ["spec-item", "table-row"],
      "preserveLayoutOnMobile": true,
      "colGap": 3
    }
  },

  "flex-layout.col#spec-name": {
    "children": ["product-specification-text#specification"],
    "props": {
      "blockClass": ["spec-name", "table-cell", "table-heading"],
      "width": "33%"
    }
  },

  "product-specification-text#specification": {
    "props": {
      "message": "{specificationName}"
    }
  },

  "flex-layout.col#spec-value": {
    "children": ["product-specification-values"],
    "props": {
      "blockClass": ["spec-value", "table-cell"]
    }
  },

  "product-specification-values": {
    "children": ["product-specification-text#value"]
  },

  "product-specification-text#value": {
    "props": {
      "message": "{specificationValue}"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/features.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#features": {
    "children": ["flex-layout.col#features"],
    "props": {
      "blockClass": "specification"
    }
  },

  "flex-layout.col#features": {
    "children": ["disclosure-layout#features", "flex-layout.col#divider"],
    "props": {
      "blockClass": "specification",
      "width": "74%"
    }
  },

  "disclosure-layout#features": {
    "children": ["disclosure-trigger#features", "disclosure-content#features"],
    "props": {
      "initialVisibility": "visible"
    }
  },

  "disclosure-trigger#features": {
    "children": ["flex-layout.row#disclosure-trigger-features"],
    "props": {
      "as": "div"
    }
  },

  "flex-layout.row#disclosure-trigger-features": {
    "children": [
      "rich-text#features-disclosure-trigger-heading",
      "flex-layout.col#spacer",
      "disclosure-state-indicator"
    ],
    "props": {
      "blockClass": ["items-end", "disclosure-trigger-specification"],
      "colGap": 0,
      "colSizing": "auto",
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "rich-text#features-disclosure-trigger-heading": {
    "props": {
      "blockClass": ["features", "disclosure-trigger-heading"],
      "text": "<span>Features & details</span>",
      "font": "t-heading-5"
    }
  },

  "disclosure-content#features": {
    "children": ["product-specification-group#features"],
    "props": {
      "blockClass": "specification"
    }
  },

  "product-specification-group#features": {
    "children": ["flex-layout.row#spec-group--features"],
    "props": {
      "filter": {
        "type": "show",
        "specificationGroups": ["Features & details"]
      }
    }
  },

  "flex-layout.row#spec-group--features": {
    "children": ["flex-layout.col#spec-group--features"],
    "props": {
      "blockClass": ["spec-group"]
    }
  },

  "flex-layout.col#spec-group--features": {
    "children": ["product-specification#table--features"],
    "props": {
      "blockClass": ["spec-group"]
    }
  },

  "product-specification#table--features": {
    "children": ["flex-layout.row#spec-item--features"]
  },

  "flex-layout.row#spec-item--features": {
    "children": ["flex-layout.col#spec-name--features"],
    "props": {
      "blockClass": ["spec-item"],
      "preserveLayoutOnMobile": true,
      "colGap": 3
    }
  },

  "flex-layout.col#spec-name--features": {
    "children": ["product-specification-text#features"],
    "props": {
      "blockClass": ["spec-name", "features"]
    }
  },

  "product-specification-text#features": {
    "props": {
      "blockClass": ["bullet-list"],
      "message": "{specificationName}"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/link-seller.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#link-seller": {
    "children": ["link-seller#default"]
  },
  "link-seller#default": {
    "props": {
      "blockClass": "default"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/description-and-gallery.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#description-and-gallery": {
    "children": ["flex-layout.col#description-and-gallery"],
    "props": {
      "blockClass": "description-and-gallery"
    }
  },

  "flex-layout.col#description-and-gallery": {
    "children": [
      "flex-layout.col#divider",
      "responsive-layout.mobile#description",
      "responsive-layout.desktop#description",
      "flex-layout.col#divider"
    ],
    "props": {
      "blockClass": "description-and-gallery",
      "width": "74%"
    }
  },

  "responsive-layout.mobile#description": {
    "children": ["disclosure-layout#description"]
  },

  "disclosure-layout#description": {
    "children": [
      "disclosure-trigger#description",
      "disclosure-content#description"
    ],
    "props": {
      "initialVisibility": "visible"
    }
  },

  "disclosure-trigger#description": {
    "children": ["flex-layout.row#disclosure-trigger-description"],
    "props": {
      "as": "div"
    }
  },

  "flex-layout.row#disclosure-trigger-description": {
    "children": [
      "rich-text#description-disclosure-trigger-heading",
      "flex-layout.col#spacer",
      "disclosure-state-indicator"
    ],
    "props": {
      "blockClass": ["items-end", "disclosure-trigger-description"],
      "colGap": 0,
      "colSizing": "auto",
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "rich-text#description-disclosure-trigger-heading": {
    "props": {
      "blockClass": ["description", "disclosure-trigger-heading"],
      "text": "<span>About this item</span>",
      "font": "t-heading-5"
    }
  },

  "disclosure-content#description": {
    "children": ["flex-layout.row#description--mobile"],
    "props": {
      "blockClass": "description"
    }
  },

  "flex-layout.row#description--mobile": {
    "children": ["product-description", "product-images#gallery--mobile"],
    "props": {
      "blockClass": ["description"],
      "colSizing": "auto",
      "colGap": 0,
      "rowGap": 6,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "product-description": {
    "props": {
      "collapseContent": false
    }
  },

  "product-images#gallery--mobile": {
    "props": {
      "blockClass": ["dots-around"],
      "aspectRatio": "81:56",
      "displayThumbnailsArrows": false,
      "hiddenImages": "main",
      "maxHeight": 160,
      "ModalZoom": "modal-layout#product-zoom",
      "showNavigationArrows": false,
      "showPaginationDots": true,
      "thumbnailsOrientation": "horizontal",
      "contentType": "images",
      "zoomMode": "open-modal"
    }
  },

  "responsive-layout.desktop#description": {
    "children": ["flex-layout.row#description"]
  },

  "flex-layout.row#description": {
    "children": ["product-description#desktop", "product-images#gallery"],
    "props": {
      "blockClass": ["description"],
      "colSizing": "auto",
      "colGap": 0,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  },

  "product-description#desktop": {
    "props": {
      "blockClass": "desktop",
      "collapseContent": false
    }
  },

  "product-images#gallery": {
    "props": {
      "blockClass": ["gallery"],
      "aspectRatio": "81:56",
      "displayThumbnailsArrows": false,
      "hiddenImages": "main",
      "maxHeight": 224,
      "ModalZoom": "modal-layout#product-zoom",
      "showNavigationArrows": false,
      "showPaginationDots": false,
      "thumbnailsOrientation": "horizontal",
      "contentType": "images",
      "zoomMode": "open-modal"
    }
  },

  "modal-layout#product-zoom": {
    "children": ["product-images.high-quality-image"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/product-details.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#product-details": {
    "children": ["flex-layout.row#main", "sticky-layout#box"],
    "props": {
      "blockClass": "product",
      "colSizing": "auto",
      "colGap": 0,
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/main.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#main": {
    "children": ["flex-layout.col#left-col", "flex-layout.col#right-col"],
    "props": {
      "blockClass": "main",
      "colGap": 7,
      "colSizing": "auto",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/product/product-images.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-images#desktop": {
    "props": {
      "blockClass": "desktop",
      "maxHeight": 448,
      "aspectRatio": "1:1",
      "showNavigationArrows": false,
      "showPaginationDots": false,
      "thumbnailAspectRatio": "1:1",
      "thumbnailMaxHeight": 100,
      "zoomMode": "in-place-hover"
    }
  },

  "flex-layout.row#product-images": {
    "children": ["product-images#mobile"],
    "props": {
      "blockClass": ["product-images"],
      "marginBottom": 6
    }
  },

  "product-images#mobile": {
    "props": {
      "blockClass": ["dots-around"],
      "aspectRatio": "1:1",
      "displayThumbnailsArrows": true,
      "showNavigationArrows": false,
      "showPaginationDots": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/components/blog.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#blog": {
    "children": ["flex-layout.col#blogSEO", "flex-layout.col#blogPosts"],
    "props": {
      "blockClass": "blog",
      "colSizing": "auto",
      "colGap": 8,
      "preventHorizontalStretch": true
    }
  },

  "flex-layout.col#blogSEO": {
    "children": ["search-title.v2", "rich-text#blogSEO"],
    "props": {
      "blockClass": "blogSEO",
      "preventVerticalStretch": true
    }
  },

  "rich-text#blogSEO": {
    "props": {
      "text": "JBL TUNE 750BTNC wireless headphones feature powerful JBL Pure Bass Sound and active noise cancelling for punchy bass and an immersive audio experience. The lightweight over-ear design offers maximum comfort and sound quality while ready to travel everywhere you go with its compact foldable competence 15 hours of battery life which recharge in only 2 hours enables noise-free wireless playback Allowing connection with two Bluetooth devices simultaneously the multipoint connection makes sure you won’t miss a call on your phone while streaming videos on your tablet. JBL TUNE 750BTNC wireless headphones feature powerful JBL Pure Bass Sound and active noise cancelling for punchy bass and an immersive audio experience. The lightweight over-ear design offers maximum comfort and sound quality while ready to travel everywhere you go with its compact foldable competence 15 hours of battery life which recharge in only 2 hours enables noise-free wireless playback Allowing connection with two Bluetooth devices simultaneously the multipoint connection makes sure you won’t miss a call on your phone while streaming videos on your tablet.",
      "blockClass": "blogSEO"
    }
  },

  "flex-layout.col#blogPosts": {
    "children": ["blog-category-preview.wordpress-category-preview"],
    "props": {
      "width": "grow"
    }
  },

  "blog-category-preview.wordpress-category-preview": {
    "props": {
      "category": 11,
      "numberOfPosts": 4,
      "showDates": false,
      "showExcerpts": true,
      "absoluteLinks": true
    }
  },

  "flex-layout.row#blogMobile": {
    "children": ["flex-layout.col#blogColMobile"],
    "props": {
      "blockClass": "blog"
    }
  },

  "flex-layout.col#blogColMobile": {
    "children": [
      "search-title.v2",
      "rich-text#blogSEO",
      "rich-text#blogSecondarySEO",
      "blog-category-preview.wordpress-category-preview#mobile"
    ]
  },

  "rich-text#blogSecondarySEO": {
    "props": {
      "text": "### Learn more about Computer & Software",
      "blockClass": "blogSecondarySEO"
    }
  },

  "blog-category-preview.wordpress-category-preview#mobile": {
    "props": {
      "category": 11,
      "numberOfPosts": 3,
      "showDates": false,
      "showExcerpts": true,
      "absoluteLinks": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/components/product-summary-prices.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "check-permission#product-summary-price": {
    "props": {
      "roles": [
        "store-admin",
        "sales-admin",
        "sales-manager",
        "sales-representative",
        "customer-admin",
        "customer-approver",
        "customer-buyer"
      ]
    },
    "blocks": [
      "allowed-content#product-price",
      "disallowed-content#product-price"
    ]
  },
  "allowed-content#product-summary-price": {
    "children": ["product-summary-price"]
  },
  "disallowed-content#product-summary-price": {
    "children": ["rich-text#product-summary-price"]
  },
  "rich-text#product-summary-price": {
    "props": {
      "blockClass": ["product-summary-price-message"],
      "text": "Log in or sign up to view prices"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/components/trending.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#trending": {
    "children": [
      "flex-layout.col#trending"
    ],
    "props": {
      "blockClass": "trendingSection"
    }
  },
  "flex-layout.col#trending": {
    "children": [
      "flex-layout.row#trendingHead",
      "list-context.product-list#trending"
    ]
  },
  "flex-layout.row#trendingHead": {
    "children": [
      "rich-text#trendingTitle",
      "link#trending"
    ],
    "props": {
      "blockClass": "trendingHead",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    }
  },
  "rich-text#trendingTitle": {
    "props": {
      "text": "### What's trending",
      "blockClass": "trendingTitle"
    }
  },
  "link#trending": {
    "props": {
      "label": "See all",
      "blockClass": "trendingLink",
      "href": "/trending"
    }
  },
  "list-context.product-list#trending": {
    "blocks": [
      "product-summary.shelf#trending"
    ],
    "children": [
      "slider-layout#trendingProducts"
    ],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "maxItems": "6"
    }
  },
  "slider-layout#trendingProducts": {
    "props": {
      "itemsPerPage": {
        "desktop": 6,
        "tablet": 6,
        "phone": 6
      },
      "infinite": false,
      "fullWidth": true,
      "blockClass": "shelfTrending"
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/components/benefits.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#benefits": {
    "props": {
      "blockClass": "benefits"
    },
    "children": ["flex-layout.col#benefits"]
  },
  "flex-layout.col#benefits": {
    "props": {},
    "children": ["rich-text#whyShopWithVTEX", "slider-layout#benefits"]
  },

  "rich-text#whyShopWithVTEX": {
    "props": {
      "text": "### Why shop with VTEX",
      "blockClass": "sectionTitle"
    }
  },

  "slider-layout#benefits": {
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 2,
        "phone": 2
      },
      "infinite": false,
      "showNavigationArrows": "never",
      "blockClass": "benefitsSlider"
    },
    "children": [
      "flex-layout.row#benefitRow1",
      "flex-layout.row#benefitRow2",
      "flex-layout.row#benefitRow3",
      "flex-layout.row#benefitRow4"
    ]
  },
  "flex-layout.row#benefitRow1": {
    "children": ["image#benefit", "rich-text#benefits1"],
    "props": {
      "blockClass": "flex-column",
      "preventHorizontalStretch": true
    }
  },
  "flex-layout.row#benefitRow2": {
    "children": ["image#benefit", "rich-text#benefits1"],
    "props": {
      "blockClass": "flex-column",
      "preventHorizontalStretch": true
    }
  },
  "flex-layout.row#benefitRow3": {
    "children": ["image#benefit", "rich-text#benefits1"],
    "props": {
      "blockClass": "flex-column",
      "preventHorizontalStretch": true
    }
  },
  "flex-layout.row#benefitRow4": {
    "children": ["image#benefit", "rich-text#benefits1"],
    "props": {
      "blockClass": "flex-column",
      "preventHorizontalStretch": true
    }
  },
  "image#benefit": {
    "props": {
      "src": "assets/placeholders/truck.png",
      "blockClass": "benefitImage"
    }
  },
  "rich-text#benefits1": {
    "props": {
      "text": "**Free shipping** Over $50 in more than 1 million items",
      "blockClass": "benefitsItem"
    }
  },
  "rich-text#benefits2": {
    "props": {
      "text": "**Pick-up store** Over $50 in more than 1 million items",
      "blockClass": "benefitsItem"
    }
  },
  "rich-text#benefits3": {
    "props": {
      "text": "**Free shipping** Over $50 in more than 1 million items",
      "blockClass": "benefitsItem"
    }
  },
  "rich-text#benefits4": {
    "props": {
      "text": "**Pick-up store** Over $50 in more than 1 million items",
      "blockClass": "benefitsItem"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/components/popular-picks.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#popular": {
    "children": [
      "flex-layout.col#popular"
    ]
  },
  "flex-layout.col#popular": {
    "children": [
      "flex-layout.row#popularHead",
      "responsive-layout.desktop#list",
      "responsive-layout.mobile#list"
    ]
  },
  "responsive-layout.desktop#list": {
    "children": [
      "list-context.product-list#popular"
    ]
  },
  "responsive-layout.mobile#list": {
    "children": [
      "list-context.product-list#popularMobile"
    ]
  },
  "flex-layout.row#popularHead": {
    "children": [
      "rich-text#popularTitle",
      "link#popularLink"
    ],
    "props": {
      "blockClass": "popularHead",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    }
  },
  "rich-text#popularTitle": {
    "props": {
      "text": "### Popular Picks",
      "blockClass": "popularTitle"
    }
  },
  "link#popularLink": {
    "props": {
      "label": "See more",
      "href": "/popular",
      "blockClass": "popularLink"
    }
  },
  "list-context.product-list#popular": {
    "blocks": [
      "product-summary.shelf#minimum"
    ],
    "children": [
      "slider-layout#popularProducts"
    ],
    "props": {
      "orderBy": "OrderByTopSaleDESC"
    }
  },
  "list-context.product-list#popularMobile": {
    "blocks": [
      "product-summary.shelf#minimum"
    ],
    "children": [
      "slider-layout#popularProducts"
    ],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "maxItems": "4"
    }
  },
  "slider-layout#popularProducts": {
    "props": {
      "itemsPerPage": {
        "desktop": 6,
        "tablet": 6,
        "phone": 4
      },
      "infinite": false,
      "fullWidth": true,
      "blockClass": "shelfPopular",
      "showNavigationArrows": "desktopOnly",
      "showPaginationDots": "desktopOnly"
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/mobile/home.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "responsive-layout.mobile": {
    "children": [
      "flex-layout.row#imageList--mobile",
      "flex-layout.row#shopByCategory",
      // Deprecated
      // "flex-layout.row#shopByBrandMobile",
      "flex-layout.row#shelfMobile",
      "flex-layout.row#banners",
      "flex-layout.row#singleBannerMobile",
      "flex-layout.row#popular",
      "flex-layout.row#trending",
      "flex-layout.row#benefits",
      "flex-layout.row#newsletter"
    ]
  },

  // Deprecated
  // "flex-layout.row#shopByBrandMobile": {
  //   "props": {
  //     "blockClass": "shopByBrandSection"
  //   },
  //   "children": [
  //     "flex-layout.row#shopByBrandHead",
  //     "list-context.image-list#brandImagesMobile"
  //   ]
  // },
  // "flex-layout.row#shopByBrandHead": {
  //   "props": {
  //     "blockClass": "shopByBrandHead",
  //     "preventHorizontalStretch": true
  //   },
  //   "children": ["rich-text#sectionTitle", "rich-text#sectionLink"]
  // },
  // "rich-text#sectionLink": {
  //   "props": {
  //     "text": "[See all brands](/brands)",
  //     "blockClass": "sectionLink"
  //   }
  // },
  // "list-context.image-list#brandImagesMobile": {
  //   "children": ["slider-layout#shopByBrand"],
  //   "props": {
  //     "height": 100,
  //     "images": [
  //       {
  //         "image": "assets/placeholders/cokeBrand.png",
  //         "mobileImage": "assets/placeholders/cokeBrand.png",
  //         "description": "something something"
  //       },
  //       {
  //         "image": "assets/placeholders/AppleBrand.png",
  //         "mobileImage": "assets/placeholders/AppleBrand.png",
  //         "description": "something something"
  //       },
  //       {
  //         "image": "assets/placeholders/whirlpoolBrand.png",
  //         "mobileImage": "assets/placeholders/whirlpoolBrand.png",
  //         "description": "something something"
  //       },
  //       {
  //         "image": "assets/placeholders/cokeBrand.png",
  //         "mobileImage": "assets/placeholders/cokeBrand.png",
  //         "description": "something something"
  //       },
  //       {
  //         "image": "assets/placeholders/AppleBrand.png",
  //         "mobileImage": "assets/placeholders/AppleBrand.png",
  //         "description": "something something"
  //       },
  //       {
  //         "image": "assets/placeholders/whirlpoolBrand.png",
  //         "mobileImage": "assets/placeholders/whirlpoolBrand.png",
  //         "description": "something something"
  //       }
  //     ]
  //   }
  // },
  // "slider-layout#shopByBrand": {
  //   "props": {
  //     "blockClass": "brandSliderMobile",
  //     "itemsPerPage": {
  //       "phone": 3
  //     },
  //     "showNavigationArrows": "never",
  //     "infinite": false
  //   }
  // },

  "flex-layout.row#banners": {
    "props": {
      "blockClass": "bannersSection"
    },
    "children": ["flex-layout.col#banners"]
  },
  "flex-layout.col#banners": {
    "children": ["rich-text#bannersSectionTitle", "slider-layout#banners"]
  },
  "rich-text#bannersSectionTitle": {
    "props": {
      "text": "### Summer essentials",
      "blockClass": "titleWithBorder"
    }
  },
  "slider-layout#banners": {
    "props": {
      "blockClass": "bannersSlider",
      "itemsPerPage": {
        "phone": 1
      },
      "showNavigationArrows": "never",
      "infinite": false
    },
    "children": [
      "flex-layout.row#banner1",
      "flex-layout.row#banner2",
      "flex-layout.row#banner3"
    ]
  },
  "flex-layout.row#banner1": {
    "children": ["flex-layout.col#banner1"]
  },
  "flex-layout.row#banner2": {
    "children": ["flex-layout.col#banner2"]
  },
  "flex-layout.row#banner3": {
    "children": ["flex-layout.col#banner3"]
  },
  "flex-layout.row#singleBannerMobile": {
    "props": {
      "blockClass": "singleBanner"
    },
    "children": ["image#singleBannerMobile"]
  },
  "image#singleBannerMobile": {
    "props": {
      "src": "assets/placeholders/singleBannerMobile.png",
      "maxHeight": 160,
      "blockClass": "singleBanner"
    }
  },
  "flex-layout.row#shelfMobile": {
    "children": ["list-context.product-list#productSliderMobile"],
    "props": {
      "blockClass": "shelfComplete"
    }
  },
  "list-context.product-list#productSliderMobile": {
    "blocks": ["product-summary.shelf#normal"],
    "children": ["slider-layout#productsMobile"],
    "props": {
      "orderBy": "OrderByTopSaleDESC"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/header/drawer.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "drawer": {
    "children": ["flex-layout.row#menu-header"],
    "props": {
      "blockClass": "menuDrawer",
      "maxWidth": 384
    }
  },
  "flex-layout.row#menu-header": {
    "props": {
      "blockClass": "menuHeader"
    },
    "children": ["flex-layout.col#menu-header"]
  },
  "flex-layout.col#menu-header": {
    "children": [
      "login#drawer",
      // Deprecated
      // "locale-switcher#drawer",
      "rich-text#explore",
      "menu#drawer",
      "flex-layout.row#quickOrder",
      "flex-layout.row#OrderQuote"
    ],
    "props": {
      "blockClass": "drawerInnerCol"
    }
  },
  // Deprecated
  // "locale-switcher#drawer": {
  //   "props": {
  //     "blockClass": "locationDrawer"
  //   }
  // },
  "link#reseller": {
    "props": {
      "label": "Organization Signup",
      "href": "/organization-request",
      "blockClass": "resellerLink"
    }
  },
  "flex-layout.row#quickOrder": {
    "children": ["link#quickOrder"]
  },
  "flex-layout.row#OrderQuote": {
    "children": ["link#menu-order-quote"]
  },
  "link#quickOrder": {
    "children": ["rich-text#quickTitle", "rich-text#quickText"],
    "props": {
      "blockClass": "quickLink",
      "href": "/quickorder"
    }
  },
  "rich-text#quickTitle": {
    "props": {
      "text": "## Quick Order",
      "blockClass": "quickTitle"
    }
  },
  "rich-text#quickText": {
    "props": {
      "text": "Shop products with a few clicks",
      "blockClass": "quickText"
    }
  },
  "link#menu-order-quote": {
    "props": {
      "label": "My Quotes",
      "href": "/b2b-quotes",
      "blockClass": "menu-order-quote"
    }
  },
  "login#drawer": {
    "props": {
      "blockClass": "loginDrawer",
      "iconLabel": "Hello, sign in",
      "mirrorTooltipToRight": true
    }
  },
  "rich-text#explore": {
    "props": {
      "text": "## Explore",
      "blockClass": "menuTitle"
    }
  },
  "menu#drawer": {
    "props": {
      "blockClass": "menuDrawer"
    },
    "children": [
      "menu-item#apparel",
      "menu-item#foodBeverage",
      "menu-item#sporting",
      "menu-item#agribusiness",
      "menu-item#home",
      "menu-item#software",
      "menu-item#power-tools",
      "menu-item#security"
    ]
  },
  "menu-item#apparel": {
    "props": {
      "id": "menu-item-apparel",
      "type": "category",
      "highlight": false,
      "blockClass": "departItem",
      "iconPosition": "right",
      "itemProps": {
        "text": "Apparel",
        "categoryId": "9281"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#foodBeverage": {
    "props": {
      "id": "menu-item-food",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Food & Beverage",
        "categoryId": "9282"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#sporting": {
    "props": {
      "id": "menu-item-sporting",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Sporting",
        "categoryId": "9283"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#agribusiness": {
    "props": {
      "id": "menu-item-agri",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Agribusiness",
        "categoryId": "9284"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#home": {
    "props": {
      "id": "menu-item-hme",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Home Appliance",
        "categoryId": "9285"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#software": {
    "props": {
      "id": "menu-item-software",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Computer & Software",
        "categoryId": "9286"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#power-tools": {
    "props": {
      "id": "menu-item-power-tools",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Power Tools",
        "categoryId": "9287"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  },
  "menu-item#security": {
    "props": {
      "id": "menu-item-security",
      "type": "category",
      "iconPosition": "right",
      "highlight": false,
      "blockClass": "departItem",
      "itemProps": {
        "text": "Security",
        "categoryId": "9288"
      },
      "iconProps": {
        "id": "nav-thin-caret--right",
        "size": 16,
        "viewBox": "0 0 16 16",
        "activeClassName": "active",
        "mutedClassName": "menuItemIcon"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/header/header.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header.full": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header-layout.desktop": {
    "children": [
      "sticky-layout#desktop"
    ]
  },
  "sticky-layout#desktop": {
    "props": {
      "blockClass": "sticky-header"
    },
    "children": [
      "flex-layout.row#telemarketing",
      //"flex-layout.row#pendingOrgAlert",
      "flex-layout.row#organization",
      "flex-layout.row#desktop",
      "flex-layout.row#headerStripe",
      "quotes-locking-modal"
    ]
  },
  "flex-layout.row#telemarketing": {
    "children": [
      "telemarketing"
    ],
    "props": {
      "blockClass": [
        "bg-blue-medium"
      ],
      "fullWidth": true
    }
  },
  "flex-layout.row#pendingOrgAlert": {
    "children": [
      "b2b-warning-topbar-inactive-organization"
    ],
    "props": {
      "fullWidth": true
    }
  },
  "flex-layout.row#organization": {
    "children": [
      "b2b-user-widget"
    ],
    "props": {
      "blockClass": [
        "bg-fresh-blue-lightest"
      ],
      "fullWidth": true
    }
  },
  "flex-layout.row#desktop": {
    "props": {
      "verticalAlign": "center",
      "blockClass": "header",
      "colGap": 7,
      "colSizing": "auto"
    },
    "children": [
      "drawer",
      "flex-layout.col#logo-desktop",
      "flex-layout.col#search-bar",
      "login",
      "minicart.v2"
    ]
  },
  "flex-layout.col#search-bar": {
    "children": [
      "search-bar"
    ],
    "props": {
      "paddingLeft": 8,
      "width": "grow"
    }
  },
  "flex-layout.row#headerStripe": {
    "props": {
      "blockClass": "headerStripe",
      "horizontalAlign": "left",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true
    },
    "children": [
      "shopper-location",
      "rich-text#headStripe1",
      "rich-text#headStripe2",
      "rich-text#headStripe3",
      "rich-text#headStripe4",
      "rich-text#headStripe5",
      "flex-layout.col#spacer",
      "check-permission#reseller"
    ]
  },
  "rich-text#headStripe1": {
    "props": {
      "blockClass": "HeaderStripeText",
      "text": "[Today's Deals](/deals)"
    }
  },
  "rich-text#headStripe2": {
    "props": {
      "blockClass": "HeaderStripeText",
      "text": "[New Releases](/releases)"
    }
  },
  "rich-text#headStripe3": {
    "props": {
      "blockClass": "HeaderStripeText",
      "text": "[Top Sales](/top-sales)"
    }
  },
  "rich-text#headStripe4": {
    "props": {
      "blockClass": "HeaderStripeText",
      "text": "[Costumer Services](/services)"
    }
  },
  "rich-text#headStripe5": {
    "props": {
      "blockClass": "HeaderStripeText",
      "text": "[Gift Cards](/gift-cards)"
    }
  },
  "flex-layout.col#logo-desktop": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": [
      "logo"
    ]
  },
  "logo": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "assets/icons/logoB2B.svg",
      "width": "123"
    }
  },
  "header-layout.mobile": {
    "children": [
      "sticky-layout#mobile"
    ]
  },
  "sticky-layout#mobile": {
    "children": [
      "flex-layout.row#mobileHeader",
      "slider-layout#menuLinks",
      "quotes-locking-modal"
    ],
    "props": {
      "blockClass": "headerMobile"
    }
  },
  "flex-layout.row#mobileHeader": {
    "children": [
      "flex-layout.col#mobileHeader"
    ]
  },
  "slider-layout#menuLinks": {
    "props": {
      "itemsPerPage": {
        "phone": 2
      },
      "centerMode": "to-the-left",
      "infinite": false,
      "showNavigationArrows": "never",
      "showPaginationDots": "never",
      "blockClass": "stripeSlider",
      "fullWidth": true
    },
    "children": [
      "rich-text#headStripe1",
      "rich-text#headStripe2",
      "rich-text#headStripe3",
      "rich-text#headStripe4",
      "rich-text#headStripe5"
    ]
  },
  "flex-layout.col#mobileHeader": {
    "children": [
      "flex-layout.row#mobile",
      "flex-layout.row#mobileSearch"
    ],
    "props": {
      "blockClass": "main-header-mobile"
    }
  },
  "flex-layout.row#mobile": {
    "children": [
      "drawer",
      "logo",
      "check-permission#login",
      "minicart.v2"
    ],
    "props": {
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "fullWidth": true
    }
  },
  "link#orderQuote": {
    "props": {
      "label": "My Quotes",
      "href": "/b2b-quotes",
      "blockClass": "orderQuote"
    }
  },
  "link#profile": {
    "children": [
      "icon-profile"
    ],
    "props": {
      "href": "/account",
      "blockClass": "accountLink"
    }
  },
  "flex-layout.row#mobileSearch": {
    "children": [
      "search-bar#mobile"
    ],
    "props": {
      "blockClass": "searchBarMobile"
    }
  },
  "search-bar#mobile": {
    "blocks": [
      "autocomplete-result-list.v2#mobile"
    ],
    "props": {
      "openAutocompleteOnFocus": true,
      "blockClass": "searchMobile"
    }
  },
  "login": {
    "props": {
      "iconLabel": "Hello, Sign in"
    }
  },
  "login#mobile": {
    "props": {
      "iconLabel": "Sign in"
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/header/search-bar.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "search-bar": {
    "blocks": [
      "autocomplete-result-list.v2"
    ],
    "props": {
      "openAutocompleteOnFocus": true
    }
  },
  "autocomplete-result-list.v2": {
    "blocks": [
      "product-summary.shelf#searchBar"
    ],
    "props": {
      "simulationBehavior": "default",
      "maxSuggestedProducts": 6,
      "customBreakpoints": {
        "md": {
          "width": 100
        }
      }
    }
  },
  "autocomplete-result-list.v2#mobile": {
    "blocks": [
      "product-summary.shelf#searchBarMobile"
    ],
    "props": {
      "simulationBehavior": "default",
      "maxSuggestedProducts": 6,
      "autocompleteWidth": 92
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/about-us/locations.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#locations": {
    "blocks": [
      "flex-layout.row#institutional--locations",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--locations": {
    "children": ["flex-layout.col#text--locations", "image#mobile-phone"]
  },

  "flex-layout.col#text--locations": {
    "children": [
      "rich-text#title--locations",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--locations": {
    "props": {
      "text": "# Locations",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/about-us/careers.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#careers": {
    "blocks": [
      "flex-layout.row#institutional--careers",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--careers": {
    "children": ["flex-layout.col#text--careers", "image#mobile-phone"]
  },

  "flex-layout.col#text--careers": {
    "children": [
      "rich-text#title--careers",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--careers": {
    "props": {
      "text": "# Careers",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/about-us/advertise.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#advertise": {
    "blocks": [
      "flex-layout.row#institutional--advertise",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--advertise": {
    "children": ["image#mobile-phone", "flex-layout.col#text--advertise"]
  },

  "flex-layout.col#text--advertise": {
    "children": [
      "rich-text#title--advertise",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--advertise": {
    "props": {
      "text": "# Advertise with us",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/about-us/investors.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#investors": {
    "blocks": [
      "flex-layout.row#institutional--investors",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--investors": {
    "children": ["flex-layout.col#text--investors", "image#mobile-phone"]
  },

  "flex-layout.col#text--investors": {
    "children": [
      "rich-text#title--investors",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--investors": {
    "props": {
      "text": "# Investor Relations",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/about-us/company.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#company": {
    "blocks": [
      "flex-layout.row#institutional--company",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--company": {
    "children": ["image#mobile-phone", "flex-layout.col#text--company"]
  },

  "flex-layout.col#text--company": {
    "children": [
      "rich-text#title--company",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--company": {
    "props": {
      "text": "# Company",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/about-us/sell.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#sell": {
    "blocks": [
      "flex-layout.row#institutional--sell",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--sell": {
    "children": ["image#mobile-phone", "flex-layout.col#text--sell"]
  },

  "flex-layout.col#text--sell": {
    "children": [
      "rich-text#title--sell",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--sell": {
    "props": {
      "text": "# Sell with VTEX",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/customer-service/recalls.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#recalls": {
    "blocks": [
      "flex-layout.row#institutional--recalls",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--recalls": {
    "children": ["image#mobile-phone", "flex-layout.col#text--recalls"]
  },

  "flex-layout.col#text--recalls": {
    "children": [
      "rich-text#title--recalls",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--recalls": {
    "props": {
      "text": "# Product Recalls",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/customer-service/pickup.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#pickup": {
    "blocks": [
      "flex-layout.row#institutional--pickup",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--pickup": {
    "children": ["flex-layout.col#text--pickup", "image#mobile-phone"]
  },

  "flex-layout.col#text--pickup": {
    "children": [
      "rich-text#title--pickup",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--pickup": {
    "props": {
      "text": "# Store Pickup",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/customer-service/accessibility.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#accessibility": {
    "blocks": [
      "flex-layout.row#institutional--accessibility",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--accessibility": {
    "children": ["flex-layout.col#text--accessibility", "image#mobile-phone"]
  },

  "flex-layout.col#text--accessibility": {
    "children": [
      "rich-text#title--accessibility",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--accessibility": {
    "props": {
      "text": "# Accessibility",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/customer-service/returns.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#returns": {
    "blocks": [
      "flex-layout.row#institutional--returns",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--returns": {
    "children": ["flex-layout.col#text--returns", "image#mobile-phone"]
  },

  "flex-layout.col#text--returns": {
    "children": [
      "rich-text#title--returns",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--returns": {
    "props": {
      "text": "# Returns",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/customer-service/help-center.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#help-center": {
    "blocks": [
      "flex-layout.row#institutional--help-center",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--help-center": {
    "children": ["image#mobile-phone", "flex-layout.col#text--help-center"]
  },

  "flex-layout.col#text--help-center": {
    "children": [
      "rich-text#title--help-center",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--help-center": {
    "props": {
      "text": "# Help Center",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of b2b-theme/store/blocks/institutional/customer-service/contact.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#contact": {
    "blocks": [
      "flex-layout.row#institutional--contact",
      "flex-layout.row#newsletter"
    ]
  },

  "flex-layout.row#institutional--contact": {
    "children": ["image#mobile-phone", "flex-layout.col#text--contact"]
  },

  "flex-layout.col#text--contact": {
    "children": [
      "rich-text#title--contact",
      "rich-text#institutional-placeholder"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title--contact": {
    "props": {
      "text": "# Contact Us",
      "blockClass": "title"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/sitemap/sitemap.json from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "urlset": {
    "url": [
      {
        "loc": "https://storetheme.vtex.com/about-us"
      }
    ]
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/docs/README.md from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store theme
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
Our boilerplate theme to create stores in the VTEX IO platform.

## Preview
![store-theme-default](https://user-images.githubusercontent.com/1354492/63937047-e8d81c80-ca37-11e9-86fc-61e88847bbfb.png)

## Tutorial
To understand how things work check our tutorial [Build a store using VTEX IO](https://vtex.io/docs/getting-started/build-stores-with-store-framework/1/)

## Dependencies
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.

Store framework is the baseline to create any store using _VTEX IO Web Framework_.
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)

Store GraphQL is a middleware to access all VTEX APIs.
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/docs/README.md)

### Store Component Apps
- [Header](https://github.com/vtex-apps/store-header/blob/master/docs/README.md)
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/docs/README.md)
- [Slider Layout](https://github.com/vtex-apps/slider-layout/blob/master/docs/README.md)
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/docs/README.md)
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/docs/README.md)
- [Menu](https://github.com/vtex-apps/menu/blob/master/docs/README.md)
- [Login](https://github.com/vtex-apps/login/blob/master/docs/README.md)
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/docs/README.md)
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/docs/README.md)
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/docs/README.md)
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/docs/README.md)
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/docs/README.md)
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/docs/README.md)
- [Store Components](https://github.com/vtex-apps/store-components/blob/master/docs/README.md)
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/docs/README.md)

### Store Pixel Apps

 - [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/docs/README.md)
 - [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/docs/README.md)

## Contributing

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

## Contributors ✨

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

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://www.hugoccosta.com"><img src="https://avatars2.githubusercontent.com/u/20212776?v=4" width="100px;" alt=""/><br /><sub><b>Hugo Costa</b></sub></a><br /><a href="https://github.com/vtex-apps/store-theme/commits?author=hugocostadev" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

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

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/docs/contact-schema.json from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "title": "Contact",
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "title": "Title"
    },
    "name": {
      "type": "string",
      "title": "Name"
    },
    "email": {
      "type": "string",
      "format": "email",
      "title": "Email address"
    },
    "message": {
      "type": "string",
      "title": "Message"
    }
  },
  "required": ["email", "message"],
  "v-security": {
    "publicJsonSchema": true
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/store/blocks.jsonc from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```json
/* Blocks can be defined both on the store/blocks.json file, and in any number of json
 * files inside the store/blocks directory, with any arbitrary directory structure.
 *
 * Additionally, all blocks files can support comments, such as this one, if given the
 * .jsonc file extension.
 *
 * The store/blocks.json file is intended for backwards compatibility, for miscellaneous
 * blocks, or if the app is simple enough that it doesn't warrant splitting the file.
 */
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

  "store.account": {
    "blocks": ["my-account"],
    "parent": {
      "challenge": "challenge.profile"
    }
  },

  "store.login": {
    "blocks": ["login-content#default"]
  },

  "login-content#default": {
    "props": {
      "isInitialScreenOptionOnly": false,
      "defaultOption": 1,
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "store.product-review-form": {
    "blocks": ["product-review-form"]
  },

  "store.not-found#product": {
    "blocks": ["rich-text#not-found"]
  },

  "store.not-found#search": {
    "blocks": ["rich-text#not-found"]
  },

  "rich-text#not-found": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "**PAGE NOT FOUND**",
      "font": "t-heading-1"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/store/routes.json from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "path": "/about-us"
  },
  "store.custom#faq": {
    "path": "/faq"
  },
  "store.custom#contact-us": {
    "path": "/contact-us"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.store-video.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.videoContainer {
  width: 100%;
  height: 300px;
  margin-top: 2%;
}

@media only screen and (min-width: 640px) {
  .videoContainer {
    height: 700px;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.product-price.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.listPrice {
  color: #727273;
  margin-bottom: .25rem;
  font-size: 1rem;
}

.sellingPrice {
  color: #3f3f40;
  font-size: 1.25rem;
}

.sellingPriceValue {
  font-size: 2.25rem;
  font-weight: 700;
}

.installments {
  color: #727273;
  margin-bottom: 1rem;
}

.savings {
  font-weight: 500;
  color: #79B03A;
}

.sellingPriceValue--summary {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2E2E2E;
}

.savings--summary {
  background: #8BC34A;
  border-radius: 1000px;
  align-items: center;
  display: flex;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
}

.savings-discount--summary {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.listPrice--summary {
  margin-bottom: 0.25rem;
  font-size: .875rem;
}

.installments--summary {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.savings--summaryPercentage {
  background: #0f3e99;
  border-radius: 1000px;
  align-items: center;
  display: flex;
}

.savingsPercentage--summaryPercentage {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.rich-text.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.container--deals {
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.container--shelfTitle {
  color: #727273;
  justify-content: center;
  text-align: center;
}

.headingLevel2--shelfTitle {
  font-weight: 200;
}

.container--deals .paragraph {
  margin: 0;
}

.container--link {
  justify-content: center;
}

.container--question {
  justify-content: center;
}

.container--question .paragraph {
  text-align: center;
  max-width: 540px;
  margin: 0 16px;
  padding-top: 120px;
  color: #03034E;
}

.container--question .strong {
  font-size: 32px;
  line-height: 2rem;
  font-weight: 700;
}

.container--link .paragraph {
  text-align: center;
  max-width: 540px;
  padding-top: 36px;
  padding-bottom: 84px;
  color: #03034E;
}

.container--link .strong {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.container--link .link {
  text-decoration: none;
  font-size: 36px;
  font-weight: 300;
  color: #03034E;
}

.container--title {
  color: #03034E;
  font-size: 28px;
  font-weight: 700;
}

@media only screen and (min-width: 640px) {
  .container--question .strong {
    font-size: 40px;
    line-height: 3rem;
  }

  .container--about {
    max-width: 85%;
  }

  .container--title {
    color: #03034E;
    font-size: 40px;
    font-weight: 700;
    max-width: 60%;
  }

  .container--title .paragraph {
    line-height: 1.3em;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.product-summary.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
  border-radius: 50%;
}

.container :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 1;
}

@media screen and (max-width: 40em) {
  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
    display: none;
  }
}

.nameContainer {
  justify-content: start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brandName {
  font-weight: 600;
  font-size: 18px;
  color: #2E2E2E;
}

.container {
  text-align: start;
}

.imageContainer {
  text-align: center;
}

.image {
  border-radius: 0.25rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.modal-layout.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
@media screen and (min-width: 40em) {
  .paper--quickview {
    height: 260px;
    width: 580px;
  }

  .actionsContainer--quickview {
    padding: 0 2rem 2rem 2rem;
  }
}

@media screen and (min-width: 50em) {
  .paper--quickview {
    height: 450px;
    width: 900px;
  }
}

@media screen and (min-width: 75em) {
  .paper--quickview {
    width: calc(100% - 4rem);
    height: auto;
  }
}

@media screen and (min-width: 82em) {
  .actionsContainer--quickview {
    padding: 0 2.5rem 2.5rem 2.5rem;
  }
}

.paper--quickview {
  min-width: 320px;
  max-width: 96rem;
}

.headerContainer--quickview {
  border: none;
  position: absolute;
  right: 0;
}

.actionsContainer--quickview {
  height: 100%;
  width: 100%;
  transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: transparent;
  box-shadow: -4px 0px 27px -12px transparent;
}

.actionsContentWrapper {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  padding-top: 1.5rem;
}

.contentContainer--quickviewContent {
  padding: 2.5rem 0 2.5rem 2rem;
  overflow-x: hidden;
}

.triggerContainer--quickview {
  padding: .75rem;
}

.triggerContainer {
  outline: none;
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
  border-top-color: rgb(238, 238, 238);
  box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
  border-top-color: transparent;
}

.closeButton {
  padding-right: 1rem;
}

.paper--product-gifts {
  padding: 1.5rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.store-header.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
/* add transitions */
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-logoLink),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-searchBarContainer) {
  transition: all 0.3s ease;
  display: block;
}

/* desktop/mobile main header padding and background transitions */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  transition: background 0.3s ease;
  will-change: padding, background;
}

/* main header desktop has a bigger padding when not stuck */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* add a box-shadow to desktop/mobile header when stuck */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

/*
 * remove the extra padding when stuck from the desktop header
 * we add a transition only when "stuck" for the "unstick" step seem faster
 */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  transition: padding 0.3s ease, background 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}

/* if supported add some translucency to the desktop/mobile header background */
@supports (backdrop-filter: blur(5px)) {
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    backdrop-filter: blur(8px);
  }

  /* header background when stuck and not hovered */
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    background: rgba(240, 240, 240, 0.8);
  }
}

/* stick wrapper with the same color as the desktop/mobile header */
:global(.vtex-sticky-layout-0-x-wrapper--sticky-header) {
  background-color: #f0f0f0;
}

/* resize the logo for neat effect */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-store-components-3-x-logoLink) {
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-logoLink),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-minicart-2-x-openIconContainer),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-searchBarContainer),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
    transition: none;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.store-components.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.notificationBarContainer {
  background-color: #e6f1e6;
  color: #03034e;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

.infoCardContainer--info-card-home {
  max-width: 1520px;
  margin: 0 auto;
  background-color: #e6f1e6;
  padding: 0px;
}

.newsletter {
  background-color: #03054e;
  max-width: 1528px;
  margin: 0 auto;
}

.newsletter .container {
  padding: 60px 10px;
}

.label {
  color: #fff;
  font-size: 26px;
}

.inputGroup {
  padding-bottom: 4px;
  display: flex;
  color: #fff;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators) {
  background-color: transparent;
  color: #fff;
  border: none;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
  color: #fff;
  font-size: 16px;
}

.inputGroup :global(.vtex-button) {
  background-color: transparent;
  color: #fff;
  border: none;
  margin-right: -24px;
}

.buttonContainer {
  padding-top: 0px;
}

.imageElement--storePrint {
  max-height: 300px;
  margin-bottom: 20px;
}

.skuSelectorContainer {
  margin: 1rem 0;
}

@media only screen and (min-width: 640px) {
  .newsletter .container {
    padding: 140px;
  }
  .label {
     font-size: 40px;
  }
  .infoCardContainer--info-card-home .infoCardTextContainer {
    width: 30%;
  }
  .infoCardContainer--info-card-home .infoCardImageContainer {
    width: 70%;
  }
  .imageElement--storePrint {
    margin-bottom: 0px;
    max-height: 600px;
  }
}

.productImagesContainer--quickview .carouselContainer {
  justify-content: flex-start;
}

.productImagesContainer--quickview .productImageTag {
  object-fit: cover !important;
}

.productImagesContainer--quickview .carouselGaleryThumbs {
  display: none;
}

.productImagesContainer--quickview .carouselGaleryCursor {
  margin: 0;
  padding: 0;
  width: 100%;
}

.productNameContainer {
  color: #3f3f40;
  font-weight: bold;
  font-size: 30px;
}

.image {
  image-rendering: -webkit-optimize-contrast;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.store-footer.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.row--menu-row {
  padding-right: 24px;
}

.row--menu-row .rowContainer {
  align-items: flex-start;
}

.row--payment-methods {
  padding-top: 16px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.product-identifier.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.product-identifier--productReference {
  margin-bottom: 1rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.reviews-and-ratings.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  max-width: 96rem;
  padding-left: .5rem;
  padding-right: .5rem;
}

.inlineContainer {
  margin-left: 0rem;
}

.star--filled {
  color: #FFB100;
}

.star--empty {
  color: #FFB100;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.product-highlights.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.productHighlightWrapper--collection {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 200px;
}

.productHighlightText {
  background: antiquewhite;
  border-radius: 20px;
  padding: 5px 10px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.flex-layout.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--menu-link,
.flexRowContent--main-header {
  padding: 0 0.5rem;
}

@media screen and (min-width: 40em) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 80rem) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 0.25rem;
  }
}

.flexRowContent--menu-link {
  background-color: #03044e;
  color: #fff;
}

.flexRowContent--main-header {
  background-color: #f0f0f0;
}

.flexRowContent--main-header-mobile {
  align-items: center;
  padding: 0.625rem 0.5rem;
  background-color: #f0f0f0;
}

.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
  color: #727273;
  font-size: 14px;
}

.flexRow--deals {
  background-color: #0F3E99;
  padding: 14px 0px;
}

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
  margin-bottom: 5px;
  padding-top: 5px;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexRow--quickviewMainRow {
  display: flex;
  max-height: 100%;
}

.flexColChild--quickviewDetails:first-child {
  overflow-y: auto;
  height: 66% !important;
  overflow-x: hidden;
}

.flexColChild--quickviewDetails:last-child {
  height: 34% !important;
}

.flexRow--addToCartRow {
  padding-bottom: 1rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.carousel.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.containerImg {
  background-color: #f0f0f0;
}

.containerImg .img {
  max-width: 100%;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.search-result.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.galleryLayoutOptionButton {
  background-color: #F0F0F0;
  color: #3F3F40;
  padding: 0.375rem 0.75rem 0.375rem 0.75rem;
}

.galleryLayoutOptionButton--selected {
  background-color: #3F3F40;
  color: #FFFFFF;
}

.galleryLayoutSwitcher {
  border-radius: 4px 4px 4px 4px;
  justify-content: center;
  overflow: hidden;
  width: auto !important;
  align-self: center
}

.galleryItem--list {
  border-bottom: 1px #E7E9EE solid;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.slider-layout.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.sliderLayoutContainer {
  justify-content: center;
}

.sliderLayoutContainer--carousel {
  background-color: #F0F0F0;
  min-height: 450px;
}

.sliderTrackContainer {
  max-width: 100%;
}

.paginationDotsContainer {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.layoutContainer--shelf {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 96rem;
  min-height: 550px;
}

.slide--shelf {
  margin-bottom: 25px;
  padding-left: .5rem;
  padding-right: .5rem;
  min-height: 550px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pocfamiliabercomat/styles/css/vtex.stack-layout.css from the pocfamiliabercomat VTEX app.

[Assistant]
Here's the implementation:

```css
.stackItem--product {
  width: 100%;
  min-height: 257px
}

.stackItem--quickview {
  right: 0;
  top: 0;
  left: auto;
}

```