Magento PWA Studio: How to add custom attribute as a swatch

When you shop for any product especially clothing or shoes, when you click on the product, along with the product the colours available for it are also displayed. You can simply click on each colour and view the product. How is this feature made possible in Magento? In Magento PWA Studio this is made possible through colour swatches. Customers can click on the swatch and check all the colour options for a particular product. So here’s a blog dedicated to how to add a custom attributes in PWA Studio.

This is the third blog in our series dedicated to Magento PWA Studio, the first two being How to add a newsletter to the footer and How to add banner on a category page, both interesting reads which you can check out.

Without further ado let’s see how it’s done.

Check out our Cenia Pro Theme for Magento 2 PWA, a fast and seamless PWA solution

How to add a custom attribute in PWA Studio?

Magento has a feature to show product attributes as a swatch be it visual swatch for colors or product swatch. In Venia Pwa Studio, By default, only fashion_color attribute is added as a swatch attribute. So if your website has custom attributes as a swatch then it will not display as a swatch image out of the box. So here we have come up with the solution of how you can show your custom attribute as a swatch image on product pages. For this, you need to specify your attribute in the option type array list inside   

/venia-ui/lib/components/ProductOptions/getOptionType.js

Click to embrace the technological evolution with our Magento 2 PWA Theme

To achieve this first create a Venia project through scaffolding https://magento.github.io/pwa-studio/pwa-buildpack/scaffolding/ yarn create @magento/pwa

Once you have your scaffolded Venia project:

• go inside your project directory
• we need to include our attribute with its type in customAttributes array of

  node_modules/@magento/venia-ui/lib/components/ProductOptions/getOptionType.js

  We are going to add it with the help of targetable introduced in PW Studio.

  Interesting Reads: Benefits of Magento PWA for eCommerce websites

  Why should you choose PWA Magento for eCommerce website?

  Here I am taking Magento with sample data installed as a backend. So my default installation looks like this

  To show the color attribute as a swatch I will add the below code in the local-intercept.js file

  local-intercept.js [YOUR_PROJECT_NAME/local-intercept.js]

  const { Targetables } = require('@magento/pwa-buildpack');
  module.exports = targets => {
  const targetableFactory = Targetables.using(targets);
  // Create a TargetableModule instance that points to the getOptionType.js source
  const OptionsType = targetableFactory.module(
  '@magento/venia-ui/lib/components/ProductOptions/getOptionType.js'
  );
  const instruction = {
  after: 'const customAttributes = {',
  insert: "color: 'swatch',"
  };
  OptionsType.spliceSource(instruction);
  };

  Get a tour of our Demo marketplace

  After that run your project yarn build yarn start

  Now check your product page. It should show your attribute as a swatch like this

  This is the procedure that you can follow for Magento PWA Studio to add a custom attribute in PWA Studio. We hope we were able to share it in a simple way and would encourage you to give it a try.

  You can expect similar articles as we want to share what we have learned, things that have made Cedcommerce what we are today.

  Contact us for any related queries and we will be happy to help!