> This page is for Developer. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.bigcommerce.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server. # Lab - Variants, Variant Options, and Modifier Options Plan: Developer Foundations Lesson 8 of 21 ยท 45 min This lab activity will give you a chance to practice working with variants, variant options, and modifiers via the Catalog API. Each step will walk you through how to use all of the endpoints covered in the previous lesson. ### Prerequisites * BigCommerce store (sandbox or live) * Basic knowledge of APIs * REST client (Postman) * Completion of Catalog API labs 01 and 02 ### In this lab, you will: * Create a simple product * Create a variant option * GET variant options * Create a variant * GET all variants * Create a product and it's variants in a single call * Add a modifier option with price adjuster to an existing product ## Create a Simple Product 1. **Open** Postman 2. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products ``` 3. **Find** a product with the same category id to which your new product will be added ![Finding a category ID](/_fern-img/c574270ad21ebcff23efc9a2f34f9ee8040bc4eb226dedc688f1596643369b57.webp) > **Info** > > The [four required fields](/developer/api-reference/rest/admin/catalog/products) for a product are name, price, weight, and type. 4. **Copy** and **paste** the code below into the Body section of Postman a. Under the URL field, **click** Body ```json showLineNumbers={false} { "name": "Shirt", "price": 10, "categories": [{id}], "weight": 4, "type": "physical" } ``` 5. **Edit** the request body a. Replace `{id}` with the category id ![Editing the request body](/_fern-img/b46c22c667b6dad539232cafc5cedba3e937af1e0d6002cdd63ca5a5934bf20b.webp) 6. **Select** POST next to the request url 7. **Click** the Send button 8. **Observe** response and the product created in the store 9. **Copy** the product ID for next steps > **Info** > > If you are in MSF, creating the product isn't enough to see it on the storefront, you also need a channel assignment. > **Info** > > There are a number of ways to gather a category's ID. The video below walks you through identifying a category's ID from the URL used to access the Edit a Category page in the control panel. > > Alternatively, you can send a **GET** request to the categories endpoint to retrieve a category ID and then skip to Step 2: > > `https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/categories?include_fields=name` ## Create Variant Options ### Create a Variant Option for 'Size' 1. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/options ``` 2. **Enter** the ID for the product created in Step 1 as the value of `product_id` in the Params tab 3. **Copy** and **paste** the code below into the Body section of Postman ```json showLineNumbers={false} { "display_name":"Size", "type":"rectangles", "option_values": [ { "is_default": true, "label": "Large" }, { "label": "Medium" } ] } ``` 4. **Select** POST next to the request url 5. **Click** the Send button 6. **Observe** the changes in the response and Sizes added to product ![Size option response](/_fern-files/bigcommerce.docs.buildwithfern.com/bf4142e647c6793785aeb12d58806da88db4c13e5ec73b5a473dd1e6e3326e7d/assets/learn/catalog-rest-api/00000184.png) ![Sizes added to product](/_fern-files/bigcommerce.docs.buildwithfern.com/11b75fe4f6436a39f1cb1d52502c41f0a315d734ba40e1db6bc147de79fc0275/assets/learn/catalog-rest-api/2019-03-19_1303.png) ### Create a Variant Option for 'Color' 7. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/options ``` 8. **Enter** the ID for the product created in Step 1 as the value of `product_id` in the Params tab 9. **Copy** and **paste** the code below into the Body section of Postman ```json showLineNumbers={false} { "display_name": "Color", "type": "rectangles", "option_values": [ { "is_default": true, "label": "Red" }, { "label": "Blue" } ] } ``` 10. **Select** POST next to the request url 11. **Click** the Send button 12. **Observe** the changes in the response and Colors added to product ![Color option response](file:assets/learn/catalog-rest-api/unnamed-\(1\).png) ![Colors added to product](/_fern-files/bigcommerce.docs.buildwithfern.com/4c12001e5fd6250b5de630c2e7a77929200d613fd6fcef59516a75d0487fc0f0/assets/learn/catalog-rest-api/2019-03-19_1310.png) ### GET All Variant Options 1. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/options ``` 2. **Enter** the ID of the product used in the previous steps as the value of `product_id` in the Params tab 3. **Select** GET next to the request url (if not already selected) 4. **Click** the Send button 5. **Observe** response and copy the option IDs and variant option IDs (paste into text editor for use in next steps) ![Option IDs and variant option IDs in response](/_fern-img/6cbe102a1e119e7195cdaff87a541f82ea38120994e506b1405d025e8b91876f.webp) ### Create a Variant In this step you will create a variant for a Large Red Shirt. 1. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/variants ``` 2. **Enter** the ID of a product used in previous steps as the value for `product_id` in the Params tab 3. **Copy** and **paste** the code below into the Body section of Postman 4. **Replace** the `{id}` in the body request below with option IDs and variant option IDs copied in previous step ```json showLineNumbers={false} { "sku": "SKU-R-LG", "price": "10.00", "inventory_level": "5", "option_values": [ { "id": {{id}}, "option_id": {{id}} }, { "id": {{id}}, "option_id": {id} } ] } ``` > **Info** > > The `option_values` array combines the options Large and Red to create the SKU `SKU-R-LG`. The `id` in the `option_values` array is the id from the variant option response `option_values` > `id` (in other words, the id for the value of RED). The `option_id` is the id of the variant option itself (in other words, the id for the option COLOR). 5. **Select** POST next to the request url 6. **Click** the Send button 7. **Observe** the changes in the response and SKU/Variant added to product ![SKU/Variant created on product](/_fern-files/bigcommerce.docs.buildwithfern.com/b596137c0db1403d2d3adaa837ae16d7b983d9a4d2a8035fdc2e51dbfcd39388/assets/learn/catalog-rest-api/2019-03-19_1404.png) ### GET All Variants 1. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/variants ``` 2. **Enter** the ID of the product used in previous steps as the value for `product_id` in the Params tab 3. **Select** GET next to the request url (if not already selected) 4. **Click** the Send button 5. **Observe** response ### Create a Product and All of Its Variants in a Single Call 1. **Gather** a category ID - use one of the methods from the first activity in this lab 2. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products ``` 3. **Copy** and **paste** the code below into the Body section of Postman ```json showLineNumbers={false} { "name": "Awesome Shirt", "type": "physical", "price": 10.25, "description": "

Great shirt

The best shirt ever.", "weight": 1.20, "categories": [ {id} ], "variants": [ { "sku": "SKU-R-SM", "option_values": [ { "option_display_name": "Color", "label": "Red" }, { "option_display_name": "Size", "label": "Small" } ] }, { "sku": "SKU-B-SM", "option_values": [ { "option_display_name": "Color", "label": "Blue" }, { "option_display_name": "Size", "label": "Small" } ] }, { "sku": "SKU-R-MD", "option_values": [ { "option_display_name": "Color", "label": "Red" }, { "option_display_name": "Size", "label": "Medium" } ] }, { "sku": "SKU-B-MD", "option_values": [ { "option_display_name": "Color", "label": "Blue" }, { "option_display_name": "Size", "label": "Medium" } ] }, { "sku": "SKU-R-LRG", "price": 10.50, "weight": 1.25, "option_values": [ { "option_display_name": "Color", "label": "Red" }, { "option_display_name": "Size", "label": "Large" } ] }, { "sku": "SKU-B-LG", "price": 10.50, "weight": 1.25, "option_values": [ { "option_display_name": "Color", "label": "Blue" }, { "option_display_name": "Size", "label": "Large" } ] } ] } ``` 4. In the request body, **replace** the category `{id}` with the ID copied in previous step 5. **Select** POST next to the request url 6. **Click** the Send button 7. **Observe** response and product created in store ## Create Modifier Options ### Add a Modifier Option with Price Adjuster to a Product 1. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/modifiers ``` 2. Enter the ID of the product used in previous steps as the value for `product_id` in the Params tab 3. **Copy** and **paste** the code below into the Body section of Postman ```json showLineNumbers={false} { "type": "checkbox", "required": false, "config": { "default_value": "Yes", "checked_by_default": false, "checkbox_label": "Check for Donation" }, "display_name": "Add a $5 Donation" } ``` 4. **Select** POST next to the request url 5. **Click** the Send button 6. **Observe** response and modifier option added to product 7. **Copy** modifier ID for next step ### Update the Modifier Option Value 1. **Copy** and **paste** the request below into Postman ```http showLineNumbers={false} https://api.bigcommerce.com/stores/{{store_hash}}/v3/catalog/products/:product_id/modifiers/:modifier_id/values/:value_id ``` 2. Enter the ID of the product used in previous steps as the value for `product_id` in the Params tab 3. **Enter** the ID of the modifier created in the previous step as the value for `modifier_id` in the Params tab 4. **Enter** the ID of the "Yes" value in modifier option as the value for `product_id` in the Params tab 5. **Copy** and **paste** the code below into the Body section of Postman ```json showLineNumbers={false} { "is_default": false, "adjusters": { "price": { "adjuster": "relative", "adjuster_value": 5 } } } ``` 6. **Select** PUT next to the request url 7. **Click** the Send button 8. **Observe** response