Forma 3D Toolkit

Description

Forma 3D Toolkit adds the store features of the Forma 3D theme:

  • Appearance > Forma Setup: four one-click starter sites, each with products, photos, categories, a homepage and its own design (see below).
  • Four store designs: Original, Noir (dark, gold, high-contrast serif), Soft (oat and sage, terracotta, rounded serif, arched cards) and Studio (pale grey and black, light sans-serif). Each starter site comes with its own design; change it any time in Appearance > Customize > Forma 3D options.
  • “Try the Look” block: a carousel of styled outfits. Shoppers add single pieces or the whole look with a bundle discount that is applied in the cart.
  • Forma Templates library: a button in the page editor’s toolbar opens 35 templates (pages, homepages and sections). Preview each one live with your store’s design, at desktop, tablet or phone width, and import it into the page.
  • Four template collections for other kinds of sites, 12 pages built with core blocks: Personal profile (homepage, résumé, contact), eCommerce (store homepage, sale, shipping & returns), IT company (homepage, services, pricing) and Photography (homepage, portfolio, packages & booking). They follow the store design you choose and are also in the block inserter under Patterns.
  • Six page templates, offered when you create a new page: About us, Contact, Lookbook, FAQ, Shop the room and a 3D campaign landing page.
  • Eight homepage blocks for the block editor (Hero, Statement, 3D Showcase, Shop by Room, Anatomy, Marquee, Product Grid, Promise) and the “Forma 3D homepage” pattern.
  • A “Forma Display” product tab: finishes (colour swatches that recolour the 3D model), stage colour, materials and designer.
  • The chosen finish is saved on the cart line and the order.
  • .glb uploads in the media library.

Starter sites

  • Furniture (Original design): 16 sofas, chairs, tables and storage pieces. Included in the plugin.
  • Lighting (Noir design): 14 chandeliers, pendants, table lamps, wall lights and lanterns. Downloaded when you import it.
  • Home Decor (Soft design): 14 vases, faux plants, clocks, mirrors and decorative objects. Downloaded when you import it.
  • Fashion (Studio design): six styled looks with 19 pieces (jackets, denim, knitwear, shoes and accessories) and a “Try the Look” homepage. Photos only, no 3D models. Downloaded when you import it.

The blocks are drawn by the Forma 3D theme, so they show nothing with another theme. The 3D models on product pages are shown by the free 3D Viewer plugin, and the store runs on WooCommerce.

External services

The Lighting, Home Decor and Fashion starter sites are not included in the plugin. When you choose one of them in Appearance > Forma Setup and click Import, the plugin downloads one zip file for that starter site from GitHub (github.com, which serves the file from codeload.github.com), from a tagged release of the public repository https://github.com/Rubyat13/Forma, for example https://github.com/Rubyat13/Forma/archive/refs/tags/starter-lighting-v2.zip. The zip holds a demo.json file with the product and page data, the 3D models (.glb) and the product photos (.webp). It is unpacked into wp-content/uploads/forma-3d-starter/ and deleted after the import.

Nothing is downloaded until you click Import, and no information about your site, your store or your users is sent. As with any web request, GitHub receives your server’s IP address and the standard request headers. GitHub’s terms of service: https://docs.github.com/site-policy/github-terms/github-terms-of-service. GitHub’s privacy statement: https://docs.github.com/site-policy/privacy-policies/github-general-privacy-statement.

The Furniture starter site is included in the plugin and needs no download.

Credits

Furniture starter site 3D models: Poly Haven (CC0, https://polyhaven.com) and Khronos glTF Sample Assets (https://github.com/KhronosGroup/glTF-Sample-Assets): SheenChair (CC0, Wayfair), GlamVelvetSofa (CC BY 4.0, Wayfair / Eric Chadwick), SheenWoodLeatherSofa (CC BY 4.0, Eric Chadwick / Darmstadt Graphics Group).

Lighting and Home Decor starter site 3D models: Poly Haven (CC0, https://polyhaven.com).

Fashion starter site photos: CC0 photos from Unsplash (published under CC0 before 2017) via Wikimedia Commons, by Brooke Cagle, Elijah Henderson, Jakob Owens, freestocks.org, Mohammad Faruque and Pete Bellis. Backgrounds removed and garments cropped for the demo.

Demo product photos and the starter site previews are renders of these models and use the same licences.

Template collection photos: CC0 photos from Unsplash (published under CC0 before 2017) via Wikimedia Commons, by Michael Dam, Patryk Sobczak, Melinda Pack, Aleks Dorohovich, rawpixel.com, Sai Kiran Anagani, Helloquence, Carl Heyerdahl, Michael Fruehmann, Joe Roberts, Adrian (aows), Eric Alves, Ben Warren, Matt Nelson, Anne Edgar, Tobias Fischer, Matthew Kane, Shardayyy Photography and Ali Inay.

Fonts in the Noir and Soft designs, all under the SIL Open Font License 1.1 (licence files in assets/designs/fonts): Bodoni Moda (The Bodoni Moda Project Authors, https://github.com/indestructible-type/Bodoni), Jost (The Jost Project Authors, https://github.com/indestructible-type/Jost), Fraunces (The Fraunces Project Authors, https://github.com/undercasetype/Fraunces) and DM Sans (The DM Sans Project Authors, https://github.com/googlefonts/dm-fonts).

Blocks

This plugin provides 9 blocks.

  • Forma Statement A paragraph whose words light up as you scroll, plus three facts.
  • Forma Promise Four promises with icons and a customer quote.
  • Forma Shop by Room Product categories that scroll sideways.
  • Forma Product Grid A grid of product cards: newest, featured or on sale.
  • Forma 3D Showcase Pinned section where products rotate into view one by one as visitors scroll.
  • Forma Anatomy A product turns while three labels point out its details.
  • Forma Marquee Large scrolling words that speed up with the page.
  • Forma Try the Look A carousel of styled outfits. Shoppers add single pieces or the whole look with a bundle discount.
  • Forma Hero Big headline with the turning 3D product and a shop button.

Installation

  1. Install and activate the Forma 3D theme, WooCommerce and 3D Viewer.
  2. Install and activate Forma 3D Toolkit.
  3. Go to Appearance > Forma Setup, choose a starter site and click Import.

FAQ

What does a starter site import change on my site?

It adds the starter site’s products with their 3D models and photos, its product categories and a “Home” page set as the front page. It also sets centimetres and kilograms as units, prices without cents, product reviews off, uncropped product thumbnails and pretty permalinks, and turns on the 3D Viewer WooCommerce integration. On the first import, an existing “Home” page that has content is kept.

Can I switch to another starter site later?

Yes. Choose another starter site in Forma Setup. By default the products of the previous starter site move to the Trash (you can restore them from Products > Trash), and the Home page gets the new design; its previous version stays in the page’s revisions.

Can I run the import again?

Yes. Products are matched by SKU and updated, and media files that were already imported are reused.

Can I use a design without its starter site?

Yes. Go to Appearance > Customize > Forma 3D options and choose Original, Noir, Soft or Studio under “Store design”. Importing a starter site switches to that starter site’s design.

How does the “Complete the look” discount work?

In the Try the Look block settings, set the bundle discount (10% by default, 0 turns it off). When a shopper clicks “Add full look to bag”, every piece of the look is added and tagged with the look. While all pieces of that look are in the cart, the cart shows a “Complete the look” discount line. Removing a piece removes the discount.

How do I use the template library?

Open any page in the block editor and click “Forma Templates” in the top toolbar. Pick Pages, Homepages, Sections or one of the collections (Personal profile, eCommerce, IT company, Photography), click Preview to see the template live with your store’s design, and Import to put it on the page. An untitled page gets the template’s title. If the page already has content, you choose between replacing it and adding the template below.

How do I use the page templates?

Go to Pages > Add New Page. The “Choose a pattern” window lists the Forma 3D page templates; pick one and edit the text and photos. They are also in the block inserter under Patterns > Forma 3D pages.

Does it work without the Forma 3D theme?

The product fields and .glb uploads do. The homepage blocks, the campaign page template and the starter site homepages need the Forma 3D theme.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Forma 3D Toolkit” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Forma 3D Toolkit” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.1.0

  • New: Lighting and Home Decor starter sites in Forma Setup, next to Furniture. Pick one and import it in one click.
  • New: switching starter sites moves the previous starter site’s products to the Trash and gives the Home page the new design (the old version stays in its revisions).
  • New: Forma Templates library in the page editor: browse 35 pages, homepages and sections, preview them live and import them.
  • New: four template collections in the library and the block inserter: Personal profile, eCommerce, IT company and Photography, three pages each.
  • New: Fashion starter site with six styled looks and the new “Try the Look” block (carousel, single pieces and a “Complete the look” bundle discount in the cart).
  • New: four store designs (Original, Noir, Soft and Studio) with their own colours, fonts and shapes. Lighting uses Noir, Home Decor uses Soft and Fashion uses Studio; switch in Appearance > Customize.
  • Starter sites without 3D models turn off the shop’s “Try it in your room” section.
  • New: six page templates for new pages: About us, Contact, Lookbook, FAQ, Shop the room and a 3D campaign landing page.
  • Imported product data is sanitised, and starter site homepages keep only Forma blocks.

1.0.2

  • The model picker in the “Forma Display” tab and the welcome notice now load their scripts with wp_enqueue_script().
  • The model picker’s labels can be translated.

1.0.1

  • The demo import now brings in the demo’s own homepage (hero product and headings), its tagline when the site has none, and its store settings: prices without cents, product reviews off and uncropped product thumbnails.
  • On the first import, the widgets a new WordPress site puts in the footer move to Inactive widgets, so the footer matches the demo.
  • The welcome notice can be dismissed and only shows with the Forma 3D theme.
  • Finish data is sanitised when a product is saved.

1.0.0

  • Initial release.