Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreCustomizing sections and componentsSection override
Overriding native component's props
Overriding props allows you to customize a component's behavior while preserving its native integration. This approach is useful when you want to customize specific aspects of a native component, for example, an icon or a button label.
For this guide, we'll use the Buy Button component to make the customization.
Here's how the initial component looks with the size prop set as regular in the Product Details Page (PDP):
{"base64":"  ","img":{"width":2858,"height":1582,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3012700,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-pdp-buy-button-initial___a4b7ae9d88ed888da5649b2b6cc1eecd.png"}}

Before you begin

Make sure your @faststore/core package has the 3.x version or above. If you need to update it, refer to this release note.

Step by step

Step 1 - Setting up the component file

  1. After choosing a native section to be customized from the list of available native sections, open your FastStore project in any code editor of your preference.
  2. Go to the src folder, create the components folder, and inside it, create the sections folder. You can run the following command to create them:
    The naming of the sections folder is arbitrary, as overrides can be created in any file, since the import is made in the src/components/index.tsx file.
    macOS and Linux
    Windows
  3. In the sections folder, create a new file for your customized section. For example, create a new file named ProductDetailsWithCustomButton.tsx under the src/components/sections directory.
    macOS and Linux
    Windows
  4. Copy and paste the following code snippet into the file:
    ProductDetailsWithCustomButton.tsx

    _10
    import { ProductDetailsSection, getOverriddenSection } from '@faststore/core'
    _10
    _10
    const ProductDetailsWithCustomButton = getOverriddenSection({
    _10
    Section: ProductDetailsSection,
    _10
    components: {},
    _10
    })
    _10
    _10
    export default ProductDetailsWithCustomButton;

    Change the value of the Section variable to the section you wish to override. In the given example, we set the Section variable to the component ProductDetailsSection to override this specific section.
  5. Save your changes.

Step 2 - Setting up the override

  1. Open the ProductDetailsWithCustomButton.tsx file created in the Step 1 - Setting up the component file and add the following code:
    ProductDetailsWithCustomButton.tsx

    _10
    import { ProductDetailsSection, getOverriddenSection } from '@faststore/core'
    _10
    _10
    const ProductDetailsWithCustomButton = getOverriddenSection({
    _10
    Section: ProductDetailsSection,
    _10
    components: {
    _10
    BuyButton: { props: { size: "small", iconPosition: "right" } }
    _10
    },
    _10
    });
    _10
    _10
    export default ProductDetailsWithCustomButton;

  2. In the components folder, create the index.tsx file and add the following:
    index.tsx

    _10
    import ProductDetailsWithCustomButton from "./sections/ProductDetailsWithCustomButton";
    _10
    _10
    export default { ProductDetailsWithCustomButton };

This code overrides the BuyButton props size and iconPosition. You'll see a smaller button than the initial one, and the cart icon positioned on the right side.

Step 3 - Adding the component to the CMS

To integrate the section into the Headless CMS, follow the steps below:
  1. Create a folder named cms in the FastStore root directory.
  2. Inside cms, create the faststore folder.
  3. Within the cms/faststore folder, create the sections.json file.
  4. Add the schema of the new section to the sections.json file, named ProductDetailsWithCustomButton, to the sections.json file:
    sections.json

    _135
    [
    _135
    {
    _135
    "name": "ProductDetailsWithCustomButton",
    _135
    "requiredScopes": ["pdp"],
    _135
    "schema": {
    _135
    "title": "Product Details WithCustom Button",
    _135
    "type": "object",
    _135
    "description": "Display Product Details Section with custom button",
    _135
    "properties": {
    _135
    "productTitle": {
    _135
    "title": "Product Title",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "discountBadge": {
    _135
    "title": "Discount Badge",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "showDiscountBadge": {
    _135
    "title": "Show Discount Badge?",
    _135
    "type": "boolean",
    _135
    "default": false
    _135
    },
    _135
    "size": {
    _135
    "title": "Size",
    _135
    "type": "string",
    _135
    "enumNames": ["Big", "Small"],
    _135
    "enum": ["big", "small"]
    _135
    }
    _135
    }
    _135
    },
    _135
    "refNumber": {
    _135
    "title": "Show Reference Number?",
    _135
    "type": "boolean",
    _135
    "default": false
    _135
    }
    _135
    }
    _135
    },
    _135
    "buyButton": {
    _135
    "title": "Buy Button",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "title": {
    _135
    "title": "Title",
    _135
    "type": "string",
    _135
    "default": "Add to Cart"
    _135
    },
    _135
    "icon": {
    _135
    "title": "Icon",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "icon": {
    _135
    "title": "Icon",
    _135
    "type": "string",
    _135
    "enumNames": ["Shopping Cart"],
    _135
    "enum": ["ShoppingCart"]
    _135
    },
    _135
    "alt": {
    _135
    "type": "string",
    _135
    "title": "Alternative Label",
    _135
    "default": "Shopping Cart"
    _135
    }
    _135
    }
    _135
    }
    _135
    }
    _135
    },
    _135
    "notAvailableButton": {
    _135
    "title": "Not Available Button",
    _135
    "description": "Shown when a SKU is not available",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "title": {
    _135
    "title": "Title",
    _135
    "type": "string",
    _135
    "default": "Not Available"
    _135
    }
    _135
    }
    _135
    },
    _135
    "shippingSimulator": {
    _135
    "title": "Shipping Simulation",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "title": {
    _135
    "title": "Title",
    _135
    "type": "string",
    _135
    "default": "Shipping"
    _135
    },
    _135
    "inputLabel": {
    _135
    "title": "Input Label",
    _135
    "type": "string",
    _135
    "default": "Postal Code"
    _135
    },
    _135
    "link": {
    _135
    "title": "Postal Code Discovery",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "text": {
    _135
    "title": "Link Text",
    _135
    "type": "string",
    _135
    "default": "I don't know my Postal Code"
    _135
    },
    _135
    "to": { "title": "URL", "type": "string" }
    _135
    }
    _135
    },
    _135
    "shippingOptionsTableTitle": {
    _135
    "title": "Shipping Options Table Header",
    _135
    "type": "string"
    _135
    }
    _135
    }
    _135
    },
    _135
    "productDescription": {
    _135
    "title": "Product Description",
    _135
    "type": "object",
    _135
    "properties": {
    _135
    "initiallyExpanded": {
    _135
    "type": "string",
    _135
    "title": "Initially Expanded?",
    _135
    "enumNames": ["First", "All", "None"],
    _135
    "enum": ["first", "all", "none"]
    _135
    },
    _135
    "displayDescription": {
    _135
    "title": "Should display description?",
    _135
    "type": "boolean",
    _135
    "default": true
    _135
    },
    _135
    "title": {
    _135
    "title": "Description section title",
    _135
    "type": "string",
    _135
    "default": "Description"
    _135
    }
    _135
    }
    _135
    }
    _135
    }
    _135
    }
    _135
    }
    _135
    ]

This schema Adds the new Product Details with custom button section to the Headless CMS.
  1. Open a new terminal window and log in to your vtex account by running vtex login {accountName}.
  2. run the following command to sync your changes with the Headless CMS:

    _10
    yarn cms-sync

  3. Access the VTEX Admin and proceed to Storefront > Headless CMS.
  4. Click on the page you desire to add the new section.
  5. Click the add button (+) and add the new section and complete values from the sections fields.
  6. Click Save.
    Remember: props changed via Headless CMS overlap the changes made through overrides. For example, if you change a prop through override and also change it using Headless CMS, the final prop's value will be the one added using CMS.

Step 4 - Visualizing the component on the page locally

To see your changes locally you need to set the Headless CMS preview to the development mode. Refer to the How to preview Headless CMS changes in development mode guide for more information.
Once you have set the preview for development mode, you should see your new Buy Button in a Product Details Page (PDP):
{"base64":"  ","img":{"width":2864,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3431632,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-pdp-buy-button-props___898b016bd82c908b5b24c8822be6789a.png"}}

Step 5 - Publishing your changes

If your changes are working in the development mode and you want to publish them, follow the steps below:
  1. Go to the Headless CMS in the VTEX Admin.
  2. Click on a PDP page.
  3. Click Publish to make the new button available on the production store.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page