> For the complete documentation index, see [llms.txt](https://help.smallbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smallbuilder.com/smallbuilder-documents/advanced-examples/invoice.md).

# Creating an invoice template

* Enter the Target Object (e.g. Quote), a template name, and save to create a placeholder for the invoice.

<figure><img src="/files/YJSOO8msu3bOnSG3AQNg" alt=""><figcaption></figcaption></figure>

***

* Use the Page Header component to maintain a consistent company style for your documents by placing company information at the top or bottom of each document.

{% content-ref url="/pages/wXmP2avh9rdxn3XjxvIK" %}
[How to pin a logo image to the top of the page](/smallbuilder-documents/basic-examples/howto-logo.md)
{% endcontent-ref %}

***

* Use a Table component to display key information on the invoice.

<figure><img src="/files/WTqe8sqk2wu5T43VfY15" alt=""><figcaption><p>Add a component by selecting `Component` > `Add Component` > `Table`. Now you can enter the contents of the table.</p></figcaption></figure>

<figure><img src="/files/2pm8ARzzqtXxTvZUpBp1" alt=""><figcaption><p>Optionally, select the cells you want to merge to make a title for the invoice, and press Merge to select the merge direction and the number of cells to merge.</p></figcaption></figure>

***

* To add a value from a Salesforce object to the invoice, hover your cursor over the desired location and click the `Field` button to add a field.

<figure><img src="/files/Wn18iq469HTSRKFuqset" alt=""><figcaption><p>Select where you want to enter the field. Click `Component` then `Field`, then choose the field to add. Finally, select a display format based on the data type.</p></figcaption></figure>

***

* Use the Empty and Divider components to control the spacing between components in the invoice, or to separate content to make the document more readable.

{% content-ref url="/pages/b4PEm1YxCk4R8XxQG7Wt" %}
[How to leave a gap between the components](/smallbuilder-documents/basic-examples/howto-gap.md)
{% endcontent-ref %}

{% content-ref url="/pages/L93IrbaYUEu6JZ95AfkF" %}
[How to add separators between the components](/smallbuilder-documents/basic-examples/howto-separators.md)
{% endcontent-ref %}

***

* Use the **Table (Related)** to display a list of the products you are charging your customer for.

<figure><img src="/files/V8hKzcgadeQYeXmuSrBB" alt=""><figcaption><p>Component > Add Component > Related List</p></figcaption></figure>

<figure><img src="/files/t5hGyIvu96KkHDLqQw6i" alt=""><figcaption><p>Select the appropriate object for the product you want to add -> Select the fields to display -> Apply</p></figcaption></figure>

<figure><img src="/files/ylkZfYLyYEezg9cWyn1J" alt=""><figcaption><p>Use the arrows to change the order of the fields -> Choose whether to sum or number fields -> Confirm</p></figcaption></figure>

***

<figure><img src="/files/9oxzgRTcAZ8Nbc1O2NQa" alt=""><figcaption><p>Preview</p></figcaption></figure>

<figure><img src="/files/DPDnxhX3h3oEdQlT4cXh" alt=""><figcaption></figcaption></figure>