[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 bitcot-qa-theme/styles/css/vtex.flex-layout.css from the bitcot-qa-theme 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: #a7afbd;
  padding: 14px 0px;
}

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

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

.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 bitcot-qa-theme/styles/css/vtex.carousel.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

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

.containerImg .img {
  max-width: 1520px;
}

```


[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 bitcot-qa-theme/styles/css/vtex.search-result.css from the bitcot-qa-theme 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 bitcot-qa-theme/styles/css/vtex.slider-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.sliderLayoutContainer {
  justify-content: center;
}
.sliderLayoutContainer--carousel {
  background-color: #F0F0F0;
}

.sliderTrackContainer {
  max-width: 1520px;
}

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

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

.slide--shelf {
  margin-bottom: 25px;
  padding-left: .5rem;
  padding-right: .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 bitcot-qa-theme/styles/css/vtex.stack-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.stackItem--product {
  width: 100%;
}

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

```


[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 bitcot-qa-theme/styles/configs/style.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "typeScale": [
        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
      ],
      "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
      "customMedia": [
        { "s": 20 },
        { "ns": {
            "value": 40,
            "minWidth": true
          }
        },
        { "m": {
            "value": 40,
            "minWidth": true
          }
        },
        { "l": {
          "value": 64,
          "minWidth": true
        }
        },
        { "xl": {
            "value": 80,
            "minWidth": true
          }
        }
      ],
      "colors": {
        "black-90": "rgba(0,0,0,.9)",
        "black-80": "rgba(0,0,0,.8)",
        "black-70": "rgba(0,0,0,.7)",
        "black-60": "rgba(0,0,0,.6)",
        "black-50": "rgba(0,0,0,.5)",
        "black-40": "rgba(0,0,0,.4)",
        "black-30": "rgba(0,0,0,.3)",
        "black-20": "rgba(0,0,0,.2)",
        "black-10": "rgba(0,0,0,.1)",
        "black-05": "rgba(0,0,0,.05)",
        "black-025": "rgba(0,0,0,.025)",
        "black-0125": "rgba(0,0,0,.0125)",

        "white-90": "rgba(255,255,255,.9)",
        "white-80": "rgba(255,255,255,.8)",
        "white-70": "rgba(255,255,255,.7)",
        "white-60": "rgba(255,255,255,.6)",
        "white-50": "rgba(255,255,255,.5)",
        "white-40": "rgba(255,255,255,.4)",
        "white-30": "rgba(255,255,255,.3)",
        "white-20": "rgba(255,255,255,.2)",
        "white-10": "rgba(255,255,255,.1)",
        "white-05": "rgba(255,255,255,.05)",
        "white-025": "rgba(255,255,255,.025)",
        "white-0125": "rgba(255,255,255,.0125)"
      },
      "semanticColors": {
        "background": {
          "base": "#ffffff",
          "base--inverted": "#03044e",
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "disabled": "#f2f4f5",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-background": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-background": {
          "action-primary": "#0c389f",
          "action-secondary": "#d2defc",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "text": {
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "link": "#0F3E99",
          "emphasis": "#f71963",
          "disabled": "#979899",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "visited-text": {
          "link": "#0c389f"
        },
        "hover-text": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "active-text": {
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "border": {
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "disabled": "#e3e4e6",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-border": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-border": {
          "action-primary": "#0c389f",
          "action-secondary": "#d2defc",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "on": {
          "base": "#3f3f40",
          "base--inverted": "#ffffff",
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "disabled": "#979899",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a",
          "muted-1": "#ffffff",
          "muted-2": "#ffffff",
          "muted-3": "#3f3f40",
          "muted-4": "#3f3f40",
          "muted-5": "#3f3f40"
        },
        "hover-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        },
        "active-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        }
      },
      "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
      "borderRadius": [0, 0.125, 0.25, 0.5, 1],
      "widths": [1, 2, 4, 8, 16],
      "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
      "heights": [1, 2, 4, 8, 16],
      "sizes": [
        {"name": "small", "value": 2},
        {"name": "regular", "value": 2.5},
        {"name": "large", "value": 3}
      ],
      "typography":{
        "measure": [30, 34, 20],
        "styles": {
          "heading-1": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "3rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-2": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "2.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-3": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "1.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-4": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.5rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-5": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-6": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "body": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "small": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.875rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "mini": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "action": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--small": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "0.875rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--large": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1.25rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "code": {
            "fontFamily": "Consolas, monaco, monospace",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          }
        }
      },
      "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
}

```


[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 bitcot-qa-theme/styles/css/contact/vtex.flex-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--contact {
  max-width: 700px;
  margin: auto;
}

.flexRowContent--contact :global(.vtex-input__label),
.flexRowContent--contact :global(.vtex-textarea__label) {
  font-size: 1rem;
  color: #3f3f40;
}

.flexRowContent--contact :global(.vtex-input),
.flexRowContent--contact :global(.vtex-textarea) {
  display: block;
  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 bitcot-qa-theme/styles/css/faq/vtex.flex-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--faq {
  max-width: 700px;
  margin: auto;
}

```


[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 bitcot-qa-theme/styles/css/faq/vtex.disclosure-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.trigger--question {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.trigger--question :global(.vtex-rich-text-0-x-paragraph) {
  font-weight: bold;
}

.trigger--question:focus,
.trigger--question:focus :global(.vtex-rich-text-0-x-paragraph) {
  color: #0F3E99;
}

.trigger :global(.vtex-store-icons-0-x-caretIcon) {
  margin-right: 1rem;
}

.content--answer {
  transition: opacity 250ms ease-in-out, height 250ms ease-in-out, transform 250ms ease-in-out;
  opacity: 0;
  height: 0;
  transform: translate3d(0, -10%, 0);
}

.content--answer[data-enter] {
  opacity: 1;
  height: fit-content;
  transform: translate3d(0, 0, 0);
}

.content--answer[data-leave] {
  height: 0;
  overflow: hidden;
}

```


[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 bitcot-qa-theme/styles/css/search/vtex.rich-text.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--layout-option {
  margin-left: 0.3em;
}

.paragraph--layout-option {
  margin: 0;
}

.paragraph--summarySpecificationBullet {
  margin: 0;
  line-height: initial;
  font-size: 1.25rem;
  line-height: 1.15rem;
}

```


[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 bitcot-qa-theme/styles/css/search/vtex.product-summary.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.nameContainer--summaryListDesktop {
  padding-top: 0.25rem;
  padding-bottom: 0.75rem;
  justify-content: start;
}

.nameContainer--summaryListMobile {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  justify-content: start;
}

.brandName--summaryListMobile {
  font-weight: 400;
  font-size: 0.875rem;
  color: black;
}

.container--listLayout {
  max-width: none !important;
}

.image--summaryListDesktop {
  width: 180px !important;
}

.image--summaryListMobile {
  width: 140px !important;
  min-width: 140px;
  height: inherit !important;
}

```


[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 bitcot-qa-theme/styles/css/search/vtex.store-components.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productBrandName--summaryListDesktop {
  text-decoration: none;
  font-weight: 500;
  color: #0067C7;
  font-size: .875rem;
}

.productBrandName--summaryListMobile {
  text-decoration: none;
  color: #0067C7;
  font-size: .875rem;
}

```


[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 bitcot-qa-theme/styles/css/search/vtex.flex-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--orderByAndSwitcher {
  padding-right: 1.5em;
}

.flexRowContent--savingsSummaryListDesktop {
  justify-content: flex-start;
}

.flexCol--summaryRightListDesktop {
  justify-content: space-around;
}

.flexRow--buyNowButton :global(.vtex-button) {
  background: #eef3f7;
  border-color:#eef3f7;
  color: #0f3e99;
}

.flexRow--buyNowButton:hover :global(.vtex-button) {
  background: #dbe9fd;
  border-color:#dbe9fd;
}

.flexCol--productRating {
  margin-bottom: 3rem;
}

.flexCol--summaryDetailsListMobile {
  justify-content: space-between;
}

.flexCol--summaryUpDetailsListMobile {
  margin-bottom: 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 bitcot-qa-theme/styles/css/product-specification-table/vtex.flex-layout.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--productSpecificationGroup:not(:first-child) {
  margin-top: 1.5rem;
}

.flexRow--productSpecificationGroupName {
  background-color: #eaeaea;
  padding: 0.5rem 1rem;
}

.flexCol--productSpecificationName {
  padding: 1rem;
}

.flexCol--productSpecificationValue {
  padding: 1rem 1rem 1rem 0;
}

.flexRow--productSpecification:nth-child(even) {
  background-color: #f9f9f9;
}

```


[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 bitcot-qa-theme/styles/css/product-specification-table/vtex.product-specifications.css from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.groupName {
  font-size: 1.25rem;
}

.specificationName {
  font-weight: bold;
}

```


[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 bitcot-qa-theme/store/blocks/about-us.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": [
      "flex-layout.row#about-us",
      "video#about-us"
    ]
  },

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

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

  "rich-text#title-about-us": {
    "props": {
      "text":
      "# Create meaningful and relevant experiences.",
      "blockClass": "title"
    }
  },

  "image#mobile-phone": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",
      "maxHeight": "",
      "maxWidth": "",
      "blockClass": "storePrint"
    }
  },
  "video#about-us": {
    "props": {
      "src": "https://www.youtube.com/embed/JgkrlaF52WQ",
      "width": "100%",
      "height": "100%"
    }
  },
  "rich-text#about-us": {
    "props": {
      "text": "**Optimized store framework** \n Free your front-end with our React + Node store framework. Improve usability and SEO, while driving more conversion with modular components, single page applications, and a ready-for-PWA structure. \n **Multi-currency and language** \n Go international with multiple storefronts to support different languages and easily manage local currencies and payment conditions. \n **Serverless development platform** \n Reduce loading time, improve usability, and make the best out of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
      "blockClass": "about"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/product-price.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#selling-price": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price"
    ]
  },

  "flex-layout.row#list-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 2,
      "marginTop": 5
    },
    "children": [
      "product-list-price",
      "product-price-savings"
    ]
  }
}

```


[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 bitcot-qa-theme/store/blocks/minicart.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "add-to-cart-button": {
    "props": {
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  },

  "minicart.v2": {
    "props": {
      "customPixelEventId": "add-to-cart-button"
    },
    "children": ["minicart-base-content"]
  }
}

```


[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 bitcot-qa-theme/store/blocks/search.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10,
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#department": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#category": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#subcategory": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "search-result-layout": {
    "blocks": [
      "search-result-layout.desktop",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },

  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": false,
      "defaultGalleryLayout": "grid"
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow",
      "preventVerticalStretch": true
    }
  },
  "flex-layout.row#searchinfo": {
    "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
  },
  "flex-layout.row#orderByAndSwitcher": {
    "children": ["order-by.v2", "gallery-layout-switcher"],
    "props": {
      "horizontalAlign": "right",
      "preventHorizontalStretch": true,
      "blockClass": "orderByAndSwitcher",
      "colGap": 3
    }
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "search-fetch-previous": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "search-fetch-more": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "flex-layout.row#products": {
    "children": ["search-content"]
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },

  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#contentmobile",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      },
      "defaultGalleryLayout": "grid"
    }
  },
  "flex-layout.row#contentmobile": {
    "children": ["search-content"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },

  "flex-layout.row#searchinfomobile": {
    "children": [
      "flex-layout.col#orderByMobile",
      "flex-layout.col#filterMobile",
      "flex-layout.col#switcherMobile"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "colJustify": "around"
    }
  },

  "flex-layout.col#orderByMobile": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByMobileCol"
    }
  },

  "flex-layout.row#productCountMobile": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountMobileRow"
    }
  },

  "flex-layout.col#filterMobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterMobileCol"
    }
  },
  "flex-layout.col#switcherMobile": {
    "children": ["gallery-layout-switcher"],
    "props": {
      "verticalAlign": "middle"
    }
  },
  "search-not-found-layout": {
    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
  },

  "flex-layout.row#notfound": {
    "children": ["not-found"],
    "props": {
      "fullWidth": true
    }
  },

  "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },

  "gallery": {
    "props": {
      "layouts": [
        {
          "name": "grid",
          "component": "GridSummary",
          "itemsPerRow": {
            "(min-width:1300px)": 4,
            "desktop": 3,
            "tablet": 3,
            "phone": 2
          }
        },
        {
          "name": "list",
          "component": "ListSummary",
          "itemsPerRow": 1
        }
      ],
      "ListSummary": "product-summary.shelf#listLayout",
      "GridSummary": "product-summary.shelf"
    }
  },
  "gallery-layout-switcher": {
    "children": [
      /*
       * For accessbility to work properly,
       * It's important to define the options in the same order as the layouts
       */
      "gallery-layout-option#grid",
      "gallery-layout-option#list"
    ]
  },
  "gallery-layout-option#grid": {
    "props": {
      "name": "grid"
    },
    "children": [
      "icon-grid",
      "responsive-layout.desktop#textOptionGrid"
    ]
  },
  "gallery-layout-option#list": {
    "props": {
      "name": "list"
    },
    "children": [
      "icon-inline-grid",
      "responsive-layout.desktop#textOptionList"
    ]
  },
  "responsive-layout.desktop#textOptionGrid": {
    "children": [
      "rich-text#option-grid"
    ]
  },
  "responsive-layout.desktop#textOptionList": {
    "children": [
      "rich-text#option-list"
    ]
  },
  "rich-text#option-grid": {
    "props": {
      "text": "Grid",
      "textColor": "c-auto",
      "blockClass": "layout-option"
    }
  },
  "rich-text#option-list": {
    "props": {
      "text": "List",
      "textColor": "c-auto",
      "blockClass": "layout-option"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/contact.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#contact-us": {
    "children": [
      "flex-layout.row#contact-us"
    ]
  },

  "flex-layout.row#contact-us": {
    "props": {
      "blockClass": "contact"
    },
    "children": [
      "flex-layout.col#contact-us"
    ]
  },

  "flex-layout.col#contact-us": {
    "children": [
      "rich-text#contact-us",
      "form#contact-us"
    ]
  },
  "rich-text#contact-us": {
    "props": {
      "text": "## Contact Us"
    }
  },

  "form#contact-us": {
    "props": {
      "entity": "contact",
      "schema": "site-contact"
    },
    "blocks": [
      "form-success#contact-us"
    ],
    "children": [
      "form-input.text#title",
      "form-input.text#name",
      "form-input.text#email",
      "form-input.textarea#message",
      "form-submit#contact"
    ]
  },

  "form-success#contact-us": {
    "children": [
      "rich-text#success-submit"
    ]
  },
  "rich-text#success-submit": {
    "props": {
      "text": "Thanks for reaching out! We will come back shortly.",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },

  "form-input.text#title": {
    "props": {
      "pointer": "#/properties/title"
    }
  },
  "form-input.text#name": {
    "props": {
      "pointer": "#/properties/name"
    }
  },
  "form-input.text#email": {
    "props": {
      "pointer": "#/properties/email"
    }
  },
  "form-input.textarea#message": {
    "props": {
      "pointer": "#/properties/message"
    }
  },

  "form-submit#contact": {
    "props": {
      "label": "Submit"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/orderplaced.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "order-placed": {
    "blocks": ["op-header", "op-order"]
  },
  "op-header": {
    "children": [
      "op-section#confirmation",
      "op-section#notices",
      "op-summary-section",
      "op-bank-invoice-section"
    ]
  },
  "op-section#confirmation": {
    "props": {
      "name": "confirmation",
      "marginBottom": 9,
      "borderless": true
    },
    "children": [
      "op-confirmation-icon",
      "op-confirmation-title",
      "op-confirmation-message",
      "flex-layout.row#confirmation-buttons"
    ]
  },
  "flex-layout.row#confirmation-buttons": {
    "props": {
      "blockClass": "confirmationButtons",
      "marginTop": 8,
      "marginBottom": 8,
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    },
    "children": ["flex-layout.col#confirmation-buttons"]
  },
  "flex-layout.col#confirmation-buttons": {
    "children": ["op-print-button"]
  },
  "op-section#notices": {
    "props": {
      "name": "notices",
      "marginBottom": 9,
      "borderless": true
    },
    "children": ["op-notices"]
  },
  // each order section
  "op-order": {
    "children": [
      "flex-layout.row#order-header",
      "op-order-split-notice",
      "op-order-customer",
      "op-section#payments",
      "op-section#pickup-packages",
      "op-section#delivery-packages",
      "op-order-takeaway-packages",
      "op-order-total"
    ]
  },
  // each order header
  "flex-layout.row#order-header": {
    "props": {
      "fullWidth": true,
      "colSizing": "auto",
      "colGap": 5,
      "marginBottom": 5
    },
    "children": [
      "flex-layout.col#order-header-info",
      "flex-layout.col#order-header-options"
    ]
  },
  "flex-layout.col#order-header-info": {
    "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
  },
  "flex-layout.col#order-header-options": {
    "children": ["responsive-layout.desktop#order-options-desktop"]
  },
  "responsive-layout.desktop#order-options-desktop": {
    "children": ["op-order-options"]
  },
  // payment section
  "op-section#payments": {
    "props": {
      "name": "paymentMethods"
    },
    "children": [
      "op-order-payment",
      "responsive-layout.mobile#order-options-mobile"
    ]
  },
  // bottom of top section of order header
  "responsive-layout.mobile#order-options-mobile": {
    "children": ["op-order-options#mobile"]
  },
  "op-order-options#mobile": {
    "props": {
      "blockClass": "mobile",
      "fullWidth": true
    }
  },
  "op-section#pickup-packages": {
    "props": {
      "name": "pickupPackages"
    },
    "children": ["op-order-pickup-packages"]
  },
  "op-section#delivery-packages": {
    "props": {
      "name": "deliveryPackages"
    },
    "children": ["op-order-delivery-packages"]
  }
}

```


[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 bitcot-qa-theme/store/blocks/faq.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#faq": {
    "children": [
      "flex-layout.row#faq"
    ]
  },

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

  "flex-layout.col#faq": {
    "children": [
      "rich-text#faq",
      "disclosure-layout-group#group"
    ]
  },
  "rich-text#faq": {
    "props": {
      "text": "## FAQ"
    }
  },

  "disclosure-layout-group#group": {
    "children": [
      "disclosure-layout#first",
      "disclosure-layout#second",
      "disclosure-layout#third",
      "disclosure-layout#fourth"
    ]
  },

  "disclosure-layout#first": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#first", "disclosure-content#first"]
  },
  "disclosure-trigger#first": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question1"]
  },
  "disclosure-content#first": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer1"]
  },
  "rich-text#question1": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer1": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#second": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#second", "disclosure-content#second"]
  },
  "disclosure-trigger#second": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question2"]
  },
  "disclosure-content#second": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question2": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer2": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-layout#third": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#third", "disclosure-content#third"]
  },
  "disclosure-trigger#third": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question3"]
  },
  "disclosure-content#third": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer3"]
  },
  "rich-text#question3": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer3": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#fourth": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#fourth", "disclosure-content#fourth"]
  },
  "disclosure-trigger#fourth": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question4"]
  },
  "disclosure-content#fourth": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question4": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer4": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-state-indicator": {
    "props": {
      "Show": "icon-caret#down",
      "Hide": "icon-caret#up"
    }
  },
  "icon-caret#down": {
    "props": {
      "orientation": "down"
    }
  },
  "icon-caret#up": {
    "props": {
      "orientation": "up"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/home/home.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "list-context.image-list#demo",
      /* You can make references to blocks defined in other files.
       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      "__fold__.experimentalLazyAssets",
      "flex-layout.row#deals",
      "rich-text#shelf-title",
      "flex-layout.row#shelf",
      "info-card#home",
      "rich-text#question",
      "rich-text#link",
      "newsletter"
    ]
  },

  "list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "height": 720,
      "images": [
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        }
      ]
    }
  },
  "slider-layout#demo-images": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true,
      "showNavigationArrows": "desktopOnly",
      "blockClass": "carousel"
    }
  },

  "rich-text#shelf-title": {
    "props": {
      "text": "## Summer",
      "blockClass": "shelfTitle"
    }
  },
  "flex-layout.row#shelf": {
    "children": ["list-context.product-list#demo1"]
  },
  "list-context.product-list#demo1": {
    "blocks": ["product-summary.shelf"],
    "children": ["slider-layout#demo-products"],
    "props": {
      "orderBy": "OrderByTopSaleDESC"
    }
  },
  "slider-layout#demo-products": {
    "props": {
      "itemsPerPage": {
        "desktop": 5,
        "tablet": 3,
        "phone": 1
      },
      "infinite": true,
      "fullWidth": false,
      "blockClass": "shelf"
    }
  },

  "info-card#home": {
    "props": {
      "id": "info-card-home",
      "isFullModeStyle": false,
      "textPosition": "left",
      "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
      "headline": "Clearance Sale",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-home",
      "textAlignment": "center"
    }
  },

  "rich-text#question": {
    "props": {
      "text": "**This is an example store built using the VTEX platform.\nWant to know more?**",
      "blockClass": "question"
    }
  },

  "rich-text#link": {
    "props": {
      "text": "\n**Reach us at**\nwww.vtex.com.br",
      "blockClass": "link"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/home/deals.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#deals": {
    "children": [
      "flex-layout.col#deals1",
      "flex-layout.col#deals2",
      "flex-layout.col#deals3",
      "flex-layout.col#deals4"
    ],
    "props": {
      "blockClass": "deals"
    }
  },

  "flex-layout.col#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "Free shipping",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/delivery-fast.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "One day delivery",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/store.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "Pick up in store",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/coupon.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "Exclusive deals",
      "blockClass": "deals"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/footer/footer.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "vtex.menu@2.x:menu#Products",
      "vtex.menu@2.x:menu#footer-clothing",
      "vtex.menu@2.x:menu#footer-decoration",
      "vtex.menu@2.x:menu#footer-bags",
      "footer-spacer",
      "social-networks"
    ],
    "props": {
      "blockClass": "menu-row",
      "paddingTop": 6,
      "paddingBottom": 3
    }
  },

  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/vtexonline/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vtextruecloud/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/vtexonline"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/user/VTEXTV"
        }
      ]
    }
  },

  "flex-layout.row#footer-2-desktop": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
    }
  },

  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#1-footer-mobile",
      "flex-layout.row#2-footer-mobile"
    ]
  },
  "flex-layout.row#2-footer-mobile": {
    "children": ["flex-layout.col#footer-1-mobile"],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#footer-1-mobile": {
    "children": [
      "accepted-payment-methods",
      "social-networks",
      "rich-text#footer-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4,
      "rowGap": 4
    }
  },
  "flex-layout.row#1-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": ["vtex.menu@2.x:menu#footer-mobile"]
  },
  "rich-text#footer-mobile": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/footer/menu.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#Products": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#news",
      "menu-item#blackfriday",
      "menu-item#sale",
      "menu-item#personalization"
    ]
  },
  "menu-item#news": {
    "props": {
      "id": "menu-item-news",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "News",
        "text": "News"
      }
    }
  },
  "menu-item#blackfriday": {
    "props": {
      "id": "menu-item-black-friday",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "BlackFriday",
        "text": "Black Friday"
      }
    }
  },
  "menu-item#sale": {
    "props": {
      "id": "menu-item-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Sale",
        "text": "Sale"
      }
    }
  },
  "menu-item#personalization": {
    "props": {
      "id": "menu-item-personalization",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Personalization",
        "text": "Personalization"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-decoration": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#smartphones": {
    "props": {
      "id": "menu-item-smartphones",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/smartphones",
        "noFollow": true,
        "tagTitle": "Smartphones",
        "text": "Smartphones"
      }
    }
  },

  "menu-item#videogames": {
    "props": {
      "id": "menu-item-videogames",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/videogames",
        "noFollow": true,
        "tagTitle": "Videogames",
        "text": "Videogames"
      }
    }
  },

  "menu-item#tvs": {
    "props": {
      "id": "menu-item-tvs",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/tvs",
        "noFollow": true,
        "tagTitle": "TVs",
        "text": "TVs"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-bags": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#bags",
      "menu-item#backpacks",
      "menu-item#necessaire"
    ]
  },

  "menu-item#bags": {
    "props": {
      "id": "menu-item-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/d",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },

  "menu-item#backpacks": {
    "props": {
      "id": "menu-item-backpacks",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/backpacks",
        "noFollow": true,
        "tagTitle": "Backpacks",
        "text": "Backpacks"
      }
    }
  },

  "menu-item#necessaire": {
    "props": {
      "id": "menu-item-necessaire",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/necessaire",
        "noFollow": true,
        "tagTitle": "Necessaire",
        "text": "Necessaire"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-clothing": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing",
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "vtex.menu@2.x:menu#footer-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing-mobile",
      "menu-item#decoration-mobile",
      "menu-item#sale-mobile"
    ]
  },

  "menu-item#clothing-mobile": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
  },
  "vtex.menu@2.x:submenu.accordion#clothing": {
    "children": ["vtex.menu@2.x:menu#clothing-accordion"]
  },

  "vtex.menu@2.x:menu#clothing-accordion": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "menu-item#decoration-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Decoration",
        "text": "Decoration"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
  },
  "vtex.menu@2.x:submenu.accordion#decoration": {
    "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
  },

  "vtex.menu@2.x:menu#footer-decoration-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#sale-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Sale",
        "text": "Sale"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
  },
  "vtex.menu@2.x:submenu.accordion#sale": {
    "children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
  },

  "vtex.menu@2.x:menu#footer-sale-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#clothing": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },

  "menu-item#shorts": {
    "props": {
      "id": "menu-item-shorts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shorts",
        "noFollow": false,
        "tagTitle": "Shorts",
        "text": "Shorts"
      }
    }
  },

  "menu-item#tank-tops": {
    "props": {
      "id": "menu-item-tank-tops",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/tank-tops",
        "noFollow": false,
        "tagTitle": "Tank tops",
        "text": "Tank tops"
      }
    }
  },

  "menu-item#shirts": {
    "props": {
      "id": "menu-item-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shirts",
        "noFollow": false,
        "tagTitle": "Shirts",
        "text": "Shirts"
      }
    }
  },

  "menu-item#sweatshirt": {
    "props": {
      "id": "menu-item-sweat-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/sweatshirt",
        "noFollow": false,
        "tagTitle": "Sweatshirt",
        "text": "Sweatshirt"
      }
    }
  },

  "menu-item#cropped": {
    "props": {
      "id": "menu-item-cropped",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/cropped",
        "noFollow": false,
        "tagTitle": "Cropped",
        "text": "Cropped"
      }
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/product-summary/product-summary.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "flex-layout.col#productRating",
      "product-summary-space",
      "product-list-price#summary",
      "flex-layout.row#selling-price-savings",
      "product-installments#summary",
      "add-to-cart-button"
    ]
  },
  "flex-layout.col#productRating": {
    "props": {
      "blockClass": "productRating"
    },
    "children": ["product-rating-inline"]
  },

  "stack-layout#prodsum": {
    "children": [
      "product-summary-image#shelf",
      "vtex.product-highlights@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },

  "product-summary-image#shelf": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 300
    }
  },

  "vtex.product-highlights@2.x:product-highlights#collection": {
    "props": {
      "type": "collection"
    },
    "children": ["product-highlight-wrapper"]
  },
  "product-highlight-wrapper": {
    "props": {
      "blockClass": "collection"
    },
    "children": ["product-highlight-text"]
  },
  "product-highlight-text": {
    "props": {
      "message": "{highlightName}"
    }
  },

  "product-list-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "flex-layout.row#selling-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price#summary",
      "product-price-savings#summary"
    ]
  },
  "product-installments#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-selling-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-price-savings#summary": {
    "props": {
      "markers": [
        "discount"
      ],
      "blockClass": "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 bitcot-qa-theme/store/blocks/product-summary/quickview.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "modal-trigger#quickview": {
    "children": [
      "icon-expand",
      "modal-layout#quickview"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },

  "modal-layout#quickview": {
    "children": [
      "modal-header#quickview",
      "flex-layout.row#quickview-main-row"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },
  "modal-header#quickview": {
    "props": {
      "blockClass": "quickview"
    }
  },

  "modal-content#quickview": {
    "children": [
      "vtex.store-components:product-name",
      "flex-layout.col#quickviewPrice",
      "product-summary-sku-selector#quickview"
    ],
    "props": {
      "blockClass": "quickviewContent"
    }
  },
  "flex-layout.col#quickviewPrice": {
    "children": [
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-installments"
    ]
  },
  "modal-actions#quickview": {
    "props": {
      "blockClass": "quickview"
    },
    "children": [
      "flex-layout.row#quickview-actions-1",
      "flex-layout.row#quickview-actions-2"
    ]
  },
  "flex-layout.row#quickview-actions-1": {
    "children": [
      "flex-layout.col#quickview-product-quantity",
      "flex-layout.col#quickview-add-to-card-button"
    ],
    "props": {
      "colSizing": "auto",
      "colGap": 6,
      "blockClass": "addToCartRow"
    }
  },

  "flex-layout.col#quickview-product-quantity": {
    "children": [
      "product-summary-quantity#quickview"
    ]
  },
  "product-summary-quantity#quickview": {
    "props": {
      "showLabel": false,
      "size": "regular"
    }
  },
  "flex-layout.col#quickview-add-to-card-button": {
    "children": [
      "add-to-cart-button"
    ],
    "props": {
      "width": "grow"
    }
  },

  "flex-layout.row#quickview-actions-2": {
    "children": [
      "link.product#button-pdp"
    ]
  },
  "link.product#button-pdp": {
    "props": {
      "buttonProps": {
        "variant": "secondary"
      },
      "displayMode": "button",
      "label": "View details",
      "href": "/{slug}/p"
    }
  },
  "flex-layout.row#quickview-main-row": {
    "children": [
      "flex-layout.col#quickview-images",
      "flex-layout.col#quickview-product-details"
    ],
    "props": {
      "blockClass": "quickviewMainRow"
    }
  },
  "flex-layout.col#quickview-images": {
    "children": [
      "product-images#quickview"
    ]
  },
  "flex-layout.col#quickview-product-details": {
    "children": [
      "modal-content#quickview",
      "modal-actions#quickview"
    ],
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "quickviewDetails"
    }
  },
  "product-summary-sku-selector#quickview": {
    "props": {
      "thumbnailImage": "skuvariation",
      "imageHeight": 28,
      "blockClass": "quickview",
      "visibility": "more-than-one"
    }
  },
  "vtex.store-components:product-name": {
    "props": {
      "blockClass": "quickview"
    }
  },
  "product-images#quickview" : {
    "props": {
      "blockClass": "quickview",
      "showNavigationArrows": 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 bitcot-qa-theme/store/blocks/product-summary/product-summary-list.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf#listLayout": {
    "props": {
      "blockClass": "listLayout"
    },
    "children": [
      "responsive-layout.desktop#productSummaryList",
      "responsive-layout.mobile#productSummaryList"
    ]
  },
  "responsive-layout.desktop#productSummaryList": {
    "children": [
      "flex-layout.row#summaryListDesktop"
    ]
  },
  "responsive-layout.mobile#productSummaryList": {
    "children": [
      "flex-layout.row#summaryListMobile"
    ]
  },
  "product-price-savings#summaryPercentage": {
    "props": {
      "message": "{savingsPercentage}",
      "blockClass": "summaryPercentage"
    }
  },
  "flex-layout.row#savingsSummaryListDesktop": {
    "props": {
      "colSizing": "auto",
      "colGap": 3,
      "blockClass": "savingsSummaryListDesktop"
    },
    "children": [
      "product-price-savings#summaryPercentage",
      "product-price-savings#summary"
    ]
  },
  "flex-layout.row#summaryListDesktop": {
    "props":{
      "fullWidth": true,
      "colSizing": "auto",
      "blockClass": "summaryListDesktop"
    },
    "children": [
      "flex-layout.row#summaryLeftListDesktop",
      "flex-layout.col#summaryRightListDesktop"
    ]
  },
  "flex-layout.row#summaryLeftListDesktop": {
    "props": {
      "blockClass": "summaryLeftListDesktop",
      "colSizing": "auto",
      "colGap": 7
    },
    "children": [
      "stack-layout#summaryListDesktop",
      "flex-layout.col#summaryDetailsListDesktop"
    ]
  },
  "flex-layout.col#summaryDetailsListDesktop": {
    "props": {
      "preventVerticalStretch": true
    },
    "children": [
      "vtex.store-components:product-brand#summaryListDesktop",
      "product-summary-name#summaryListDesktop",
      "flex-layout.col#productRating",
      "flex-layout.row#productSpecifications"
    ]
  },
  "flex-layout.row#productSpecifications": {
    "children": [
      "product-specification-group#summary"
    ]
  },
  "product-summary-name#summaryListDesktop": {
    "props": {
      "blockClass": "summaryListDesktop"
    }
  },
  "vtex.store-components:product-brand#summaryListDesktop": {
    "props": {
      "displayMode": "text",
      "blockClass": "summaryListDesktop"
    }
  },
  "flex-layout.col#summaryRightListDesktop": {
    "props": {
      "blockClass": "summaryRightListDesktop",
      "preventVerticalStretch": true
    },
    "children": [
      "flex-layout.row#savingsSummaryListDesktop",
      "flex-layout.col#priceSummaryListDesktop",
      "flex-layout.row#buyButtonsSummaryListDesktop"
    ]
  },
  "flex-layout.row#buyButtonsSummaryListDesktop": {
    "props": {
      "colSizing": "auto",
      "colGap": 5
    },
    "children": [
      "add-to-cart-button",
      "flex-layout.row#buyNowButton"
    ]
  },
  "flex-layout.row#buyNowButton": {
    "props": {
      "blockClass": "buyNowButton"
    },
    "children": [
      "add-to-cart-button#buyNow"
    ]
  },

  "add-to-cart-button#buyNow": {
    "props": {
      "text": "BUY NOW",
      "isOneClickBuy": true,
      "onClickEventPropagation": "enabled",
      "blockClass": "buyNow"
    }
  },
  "flex-layout.col#priceSummaryListDesktop": {
    "children": [
      "product-selling-price#summary",
      "product-list-price#summary"
    ]
  },
  "stack-layout#summaryListDesktop": {
    "children": [
      "product-summary-image#summaryListDesktop",
      "vtex.product-highlights@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },
  "product-summary-image#summaryListDesktop": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 180,
      "blockClass": "summaryListDesktop"
    }
  },
  "flex-layout.row#summaryListMobile": {
    "props":{
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "blockClass": "summaryListMobile",
      "colGap": 5
    },
    "children": [
      "stack-layout#summaryListMobile",
      "flex-layout.col#summaryDetailsListMobile"
    ]
  },
  "stack-layout#summaryListMobile": {
    "children": [
      "product-summary-image#summaryListMobile",
      "vtex.product-highlights@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },
  "product-summary-image#summaryListMobile": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 220,
      "blockClass": "summaryListMobile"
    }
  },
  "flex-layout.col#summaryDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true,
      "width": "grow",
      "blockClass": "summaryDetailsListMobile"
    },
    "children": [
      "flex-layout.col#summaryUpDetailsListMobile",
      "flex-layout.col#summaryDownDetailsListMobile"
    ]
  },
  "flex-layout.col#summaryUpDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "summaryUpDetailsListMobile"
    },
    "children": [
      "vtex.store-components:product-brand#summaryListMobile",
      "product-summary-name#summaryListMobile",
      "product-rating-inline"
    ]
  },
  "flex-layout.col#summaryDownDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true
    },
    "children": [
      "product-selling-price#summary",
      "product-installments#summary"
    ]
  },
  "vtex.store-components:product-brand#summaryListMobile": {
    "props": {
      "displayMode": "text",
      "blockClass": "summaryListMobile"
    }
  },
  "product-summary-name#summaryListMobile": {
    "props": {
      "tag": "div",
      "blockClass": "summaryListMobile"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/product-summary/product-specification-list.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#summary": {
    "children": [
      "product-specification#summary",
    ]
  },
  "product-specification#summary": {
    "children": [
      "flex-layout.row#summarySpecificationValues"
    ]
  },
  "flex-layout.row#summarySpecificationValues": {
    "props": {
      "preventHorizontalStretch": true,
      "colGap": 3
    },
    "children": [
      "rich-text#summarySpecificationBullet",
      "product-specification-values"
    ]
  },
  "rich-text#summarySpecificationBullet": {
    "props": {
      "text": "•",
      "textColor": "c-action-primary",
      "blockClass": "summarySpecificationBullet"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/pdp/product-assembly.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "sticky-layout#buy-button": {
    "props": {
      "position": "bottom"
    },
    "children": ["flex-layout.row#buy-button"]
  },
  "product-assembly-options": {
    "children": [
      "flex-layout.row#product-assembly-options",
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  },
  "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 bitcot-qa-theme/store/blocks/pdp/product-gifts.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-gifts": {
    "props": {
      "maxVisibleItems": {
        "desktop": 1,
        "mobile": 1
      }
    },
    "children": ["flex-layout.row#product-gifts-text", "product-gift-list"]
  },

  "flex-layout.row#product-gifts-text": {
    "props": {
      "verticalAlign": "middle",
      "colSizing": "auto",
      "preserveLayoutOnMobile": true
    },
    "children": [
      "rich-text#product-gifts",
      "flex-layout.col#product-gifts-text"
    ]
  },
  "flex-layout.col#product-gifts-text": {
    "children": ["modal-trigger#product-gifts"],
    "props": {
      "verticalAlign": "middle"
    }
  },
  "rich-text#product-gifts": {
    "props": {
      "text": "**+ GIFT**"
    }
  },
  "gift-text": {
    "props": {
      "blockClass": "default",
      "text": "{exceedingItems, plural, =0{} one {+ # gift} other {+ # gifts}}"
    }
  },
  "product-gift-list": {
    "children": ["flex-layout.row#gift"]
  },
  "flex-layout.row#gift": {
    "props": {
      "fullWidth": true
    },
    "children": ["flex-layout.col#gift-name-description", "gift-image"]
  },
  "flex-layout.col#gift-name-description": {
    "props": {
      "verticalAlign": "middle",
      "rowGap": 3
    },
    "children": ["gift-name", "gift-description"]
  },

  "modal-trigger#product-gifts": {
    "children": ["modal-layout#product-gifts", "gift-text"],
    "props": {
      "blockClass": "product-gifts"
    }
  },
  "modal-layout#product-gifts": {
    "props": {
      "blockClass": "product-gifts",
      "fullScreen": {
        "phone": true,
        "desktop": false,
        "tablet": false
      }
    },
    "children": ["product-gifts#modal"]
  },

  "product-gifts#modal": {
    "children": ["product-gift-list"]
  }
}

```


[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 bitcot-qa-theme/store/blocks/pdp/product.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "condition-layout.product#availability",
      "flex-layout.row#description",
      "flex-layout.row#specifications-title",
      "product-specification-group#table",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#specifications-title": {
    "children": ["rich-text#specifications"]
  },
  "rich-text#specifications": {
    "props": {
      "text": "##### Product Specifications"
    }
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#description": {
    "props": {
      "marginBottom": 7
    },
    "children": ["product-description"]
  },
  "condition-layout.product#availability": {
    "props": {
      "conditions": [
        {
          "subject": "isProductAvailable"
        }
      ],
      "Then": "flex-layout.row#product-main",
      "Else": "flex-layout.row#product-availability"
    }
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "props": {
      "blockClass": "product"
    },
    "children": [
      "flex-layout.row#product-image",
      "product-bookmark",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "60%",
      "rowGap": 0
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "aspectRatio": {
        "desktop": "auto",
        "phone": "16:9"
      },
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "flex-layout.row#product-name",
      "product-rating-summary",
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-installments",
      "product-separator",
      "product-identifier.product",
      "sku-selector",
      "product-quantity",
      "product-assembly-options",
      "product-gifts",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },

  "flex-layout.row#product-name": {
    "props": {
      "marginBottom": 3
    },
    "children": ["vtex.store-components:product-name"]
  },

  "sku-selector": {
    "props": {
      "variationsSpacing": 3,
      "showValueNameForImageVariation": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["add-to-cart-button"]
  },

  "flex-layout.row#product-availability": {
    "props": {
      "colGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7
    },
    "children": [
      "flex-layout.col#stack",
      "flex-layout.col#right-col-availability"
    ]
  },
  "flex-layout.col#right-col-availability": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0,
      "blockClass": "info-availability"
    },
    "children": [
      "flex-layout.row#product-name",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#availability"
    ]
  },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
    },
    "children": ["availability-subscriber"]
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": 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 bitcot-qa-theme/store/blocks/pdp/product-specifications-table.jsonc from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#table": {
    "children": [
      "flex-layout.row#spec-group"
    ]
  },
  "flex-layout.row#spec-group": {
    "props": {
      "blockClass": "productSpecificationGroup"
    },
    "children": [
      "flex-layout.col#spec-group"
    ]
  },
  "flex-layout.col#spec-group": {
    "children": [
      "flex-layout.row#spec-group-name",
      "product-specification"
    ]
  },
  "flex-layout.row#spec-group-name": {
    "props": {
      "blockClass": "productSpecificationGroupName"
    },
    "children": [
      "product-specification-text#group"
    ]
  },
  "product-specification": {
    "children": [
      "flex-layout.row#spec-item"
    ]
  },
  "flex-layout.row#spec-item": {
    "props": {
      "blockClass": "productSpecification"
    },
    "children": [
      "flex-layout.col#spec-name",
      "flex-layout.col#spec-value"
    ]
  },
  "flex-layout.col#spec-name": {
    "props": {
      "blockClass": "productSpecificationName",
      "width": {
        "mobile": "50%",
        "desktop": "25%"
      }
    },
    "children": [
      "product-specification-text#specification"
    ]
  },
  "flex-layout.col#spec-value": {
    "props": {
      "blockClass": "productSpecificationValue"
    },
    "children": [
      "product-specification-values"
    ]
  },
  "product-specification-values": {
    "children": [
      "product-specification-text#value"
    ]
  },
  "product-specification-text#group": {
    "props": {
      "message": "{groupName}"
    }
  },
  "product-specification-text#specification": {
    "props": {
      "message": "{specificationName}"
    }
  },
  "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 bitcot-qa-theme/store/blocks/header/category-menu.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "props": {
      "experimentalOptimizeRendering": true
    },
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ]
  },
  "menu-item#category-apparel": {
    "props": {
      "id": "menu-item-category-apparel",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/",
        "noFollow": false,
        "tagTitle": "Apparel & Accessories",
        "text": "Apparel & Accessories"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#category-apparel"
    ]
  },
  "vtex.menu@2.x:submenu#category-apparel": {
    "props": {
      "width": "auto"
    },
    "children": [
      "vtex.menu@2.x:menu#category-apparel"
    ]
  },
  "vtex.menu@2.x:menu#category-apparel": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-apparel-clothing",
      "menu-item#category-apparel-accessories",
      "menu-item#category-apparel-eyeglasses"
    ]
  },
  "menu-item#category-apparel-clothing": {
    "props": {
      "id": "menu-item-category-apparel-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/clothing/",
        "noFollow": false,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },
  "menu-item#category-apparel-accessories": {
    "props": {
      "id": "menu-item-category-apparel-accessories",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/accessories/",
        "noFollow": false,
        "tagTitle": "Accessories",
        "text": "Accessories"
      }
    }
  },
  "menu-item#category-apparel-eyeglasses": {
    "props": {
      "id": "menu-item-category-apparel-eyeglasses",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/eyeglasses/",
        "noFollow": false,
        "tagTitle": "Eyeglasses",
        "text": "Eyeglasses"
      }
    }
  },
  "menu-item#category-home": {
    "props": {
      "id": "menu-item-category-home",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/home---decor/",
        "noFollow": false,
        "tagTitle": "Home & Decor",
        "text": "Home & Decor"
      }
    }
  },
  "menu-item#more": {
    "props": {
      "id": "menu-item-custom-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "More",
        "text": "More"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#more"
    ]
  },
  "vtex.menu@2.x:submenu#more": {
    "props": {
      "width": "100%"
    },
    "children": [
      "flex-layout.row#menu-more"
    ]
  },
  "flex-layout.row#menu-more": {
    "children": [
      "flex-layout.col#menu-more-1",
      "flex-layout.col#menu-more-2"
    ]
  },
  "flex-layout.col#menu-more-1": {
    "children": [
      "vtex.menu@2.x:menu#more"
    ]
  },
  "flex-layout.col#menu-more-2": {
    "children": [
      "info-card#home"
    ]
  },
  "vtex.menu@2.x:menu#more": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#about-us",
      "menu-item#faq"
    ]
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": true,
        "tagTitle": "About us",
        "text": "About us"
      }
    }
  },
  "menu-item#faq": {
    "props": {
      "id": "menu-item-faq",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/faq",
        "noFollow": true,
        "tagTitle": "FAQ",
        "text": "FAQ"
      }
    }
  },
  "menu-item#contact-us": {
    "props": {
      "id": "menu-item-contact-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/contact-us",
        "noFollow": true,
        "tagTitle": "Contact Us",
        "text": "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 bitcot-qa-theme/store/blocks/header/header.jsonc from the bitcot-qa-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": [
      "flex-layout.row#1-desktop",
      "flex-layout.row#2-desktop",
      "flex-layout.row#3-desktop",
      "sticky-layout#4-desktop"
    ]
  },

  "flex-layout.row#1-desktop": {
    "children": ["telemarketing"],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.row#2-desktop": {
    "children": ["notification.bar#home"],
    "props": {
      "fullWidth": "true"
    }
  },
  "notification.bar#home": {
    "props": {
      "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"
    }
  },
  "flex-layout.row#3-desktop": {
    "props": {
      "blockClass": "menu-link",
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "vtex.menu@2.x:menu#websites",
      "flex-layout.col#spacer",
      "vtex.menu@2.x:menu#institutional"
    ]
  },
  "flex-layout.col#spacer": {
    "props": {
      "width": "grow"
    }
  },
  "sticky-layout#4-desktop": {
    "props": {
      "blockClass": "sticky-header"
    },
    "children": ["flex-layout.row#4-desktop"]
  },
  "flex-layout.row#4-desktop": {
    "props": {
      "blockClass": "main-header",
      "horizontalAlign": "center",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "flex-layout.col#logo-desktop",
      "flex-layout.col#category-menu",
      "flex-layout.col#spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart.v2"
    ]
  },
  "flex-layout.col#logo-desktop": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["logo#desktop"]
  },
  "flex-layout.col#category-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["vtex.menu@2.x:menu#category-menu"]
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
      "width": "180"
    }
  },
  "header-layout.mobile": {
    "children": ["sticky-layout#1-mobile"]
  },
  "sticky-layout#1-mobile": {
    "children": ["flex-layout.row#1-mobile"]
  },
  "flex-layout.row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "flex-layout.col#spacer",
      "login",
      "minicart.v2"
    ],
    "props": {
      "blockClass": "main-header-mobile",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "drawer": {
    "children": ["menu#drawer"]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
      "width": "70"
    }
  }
}

```


[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 bitcot-qa-theme/store/blocks/header/top-menu.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#websites": {
    "children": [
      "menu-item#shop",
      "menu-item#about-us"
    ]
  },
  "menu-item#shop": {
    "props": {
      "id": "menu-item-shop",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Shop",
        "text": "Shop"
      }
    }
  },
  "vtex.menu@2.x:menu#institutional": {
    "children": [
      "menu-item#vtex-website"
    ]
  },
  "menu-item#vtex-website": {
    "props": {
      "id": "menu-item-vtex-website",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "external",
        "href": "http://vtex.com",
        "noFollow": false,
        "tagTitle": "visit vtex.com",
        "text": "visit vtex.com"
      }
    }
  }
}

```


[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 shopper-location-theme/sitemap/sitemap.json from the shopper-location-theme 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 shopper-location-theme/docs/README.md from the shopper-location-theme 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 shopper-location-theme/docs/contact-schema.json from the shopper-location-theme 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
  }
}

```