Form, calculator, specification, category and invoice elements

Six page builder elements pull their content in from somewhere else: a plugin, your product custom fields, your navigation menu or the order a customer has placed. This guide covers what each shows, what it needs first, which template it belongs on, and what its settings do.

Considerations

• Form and Calculator need their plugin installed. Until it is, the element's settings show a message saying the plugin is not installed and to get it from the Plugin Store.
• Both are styled inside the plugin, not in the page builder. The Design tab says Styled in Form Builder or Styled in Calculator Builder and points you back there.
• The other four read the page around them, and hide themselves when that content is missing. A spec table with no filled-in custom fields, a subcategory list with no child categories, and an invoice button on an order with no VAT all show nothing.

Form

Your customer sees a form you built in the Form Builder plugin, sitting in the page like any other element. They fill it in and submit it there.

Install the Form Builder plugin first and build at least one form in it. See Building forms with Form Builder. The element is under the Ecommerce chip in the Elements panel, so it can go on any page you build, and Form Builder also offers it as a product widget.

• Form: which form this element shows. The dropdown lists the forms in your plugin, and the default entry shows your default form.

Calculator

Your customer sees a calculator you built in the Calculator Builder plugin. They type in their numbers and get a result, in the page.

Install the Calculator Builder plugin first and build at least one calculator. See Building calculators with Calculator Builder. The element is under the Ecommerce chip, so it can go on any page, and the plugin also offers it as a product widget.

• Calculator: which calculator this element shows. The default entry shows your default calculator.

Specifications

Your customer sees a tidy table of product details, with a label on the left and its value on the right. Yes and No, dates, numbers and links are all formatted for them.

The table is built from your product custom fields, so set those up first and fill them in. Only fields that are visible on the storefront and have a value appear. The element is under the Ecommerce chip and needs a product, so put it on your product template. Product Preview picks which product to preview while you design.

• Show Heading and Heading Text: a heading above the table, and its wording. Suggested text: Specifications.
• Fields to Show: Show all gives one flat table of every storefront-visible custom field with a value. Hand-picked lets you build the table row by row.
• Include Variant Fields: merges the selected variant's fields over the product-level ones, so the table changes as the customer picks a variant.
• Add Field: on Hand-picked, adds a row for a custom field. Rows a product has no value for hide on their own.
• Add Section Header: on Hand-picked, starts a new titled group of rows, such as Screen.
• Label override: each hand-picked row has a box for a different label, when the field's own name is not what you want customers to read.

Category Breadcrumb

Your customer sees the trail to the category they are on: Home, then Categories, then each parent, then the current one. Every crumb but the last is a link.

It is under the Category Page chip and belongs on your category page template. The parent crumbs come from your category hierarchy, so nest your categories first. Select Category picks which category to preview while you design.

• Wrapper Tag: Nav (semantic) or Div.
• Separator Style: the mark between crumbs. Slash, Chevron, Arrow or Dot.
• Show Home Link and Home Label: whether the trail starts at your home page, and what that crumb is called. The default is Home.
• Show All-Categories Link: adds a Categories crumb after Home.

Subcategories

Your customer sees the current category's child categories as cards, each with its image and name, so they can narrow down before browsing products.

The children come from a navigation menu, not from the category tree. Build a menu under Storefront, then Navigation, with each category nested under its parent. The element is under the Category Page chip and belongs on your category page template.

• Navigation menu: which menu to read the children from. Default (first menu) uses your main menu.
• Limit: how many cards to show. The default is 6, the most is 50.
• Show Description, Show Product Count, Show Arrow: what each card carries besides the image and name.
• Title Lines: how many lines a long category name can run to before it is cut. The default is 2.
• Behavior: what happens when the category has no children. Hide element or Show message.
• Message: the text to show when you picked Show message. The default is No subcategories found.

Download Invoice Button

Your customer sees a button on the order confirmation page that downloads the VAT invoice for their order. It opens in a new tab, so the order page stays open.

It is under the Order Acknowledgement chip and belongs on your order confirmation template. Nothing to set up beyond your VAT settings. The button only appears when the order had VAT charged and your store is VAT registered. On every other order it stays hidden.

• Button Text: the label. The default is Download VAT invoice.
• Show Icon: a small document icon next to the label.
• Open In New Tab: keeps the order page open while the PDF opens. On by default.

Related guides

• Adding and arranging elements
• Designing your category pages
• Designing your order confirmation page
• Adding custom fields