Customizing the Featured Product Extension in SuiteCommerce

The Featured Product extension enables developers to prominently display specific products within a CMS area of a SuiteCommerce site. Customizable options include displaying the product price and availability, overlaying text on images, adding button text, and showcasing alternative images. However, for more complex alterations, modifications to the template and Sass files may be necessary.

Customizing the Featured Product Extension

To customize the Featured Product extension using the override method, follow these steps:

Note: Each instance of a featured product generates an HTTP call to the item's API. To avoid performance issues, refrain from using this method for a large set of featured products; instead, consider utilizing the Featured Category extension.

1. Navigate to Workspace/Extras/Extensions/SuiteCommerce/FeaturedProduct/Modules/FeaturedProductCCT/Sass/_featuredproductcct.scss.
2. Copy this source file to your clipboard.
3. Paste a copy into the corresponding location within your theme's Overrides directory, for instance, Workspace/Theme/Overrides/SuiteCommerce/FeaturedProduct/Modules/FeaturedProductCCT/Sass/_featuredproductcct.scss.

   Important: Do not rename these files. They must retain the same name for the override method to function.

4. Open the newly placed Sass file from your Overrides directory.
5. Start your local server using gulp theme:local.

   Note: Files must be in the correct locations prior to starting the local server; otherwise, changes will not be detected. Monitor the CLI log to confirm which overrides are being watched.

6. With your server running, you can add your desired styles to the copied Sass file. For example, to resize the product image and adjust the product details to show a shorter description, use the following code:
   javascriptCopy

   1.home-page .featureproductcct-layout {
   2    .pdp-features, .pdp-basics, .pdg-materials {
   3        display: none;
   4    }
   5    .product-image {
   6        max-height: 250px;
   7    }
   8}

7. When ready, utilize your theme developer tools to test or deploy the updated theme. Refer to the Test and Deploy Your Theme documentation for specific procedures.

Visual Results

After implementing the above customizations, the appearance of the blog post can be modified to include additional featured products and various button styles, as illustrated in the following image:

By following this guide, developers can effectively customize the Featured Product extension to enhance user experience and site functionality in SuiteCommerce.

Source: This article is based on Oracle's official NetSuite documentation.