# Order Confirmation

## General Settings

### Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-5a2593081321b8b29c2788c3ceca82f3c61234cc%2FOrder%20Confirmation%20-%20title.png?alt=media)

### Background Color

If you want to change the background color of your Image feature, you can do that by clicking on the content you want to adjust its background.

If you didn't find your color, you can also add custom colors if you have the color code of the exact color you are going for, just type it in the space provided and click "add color".

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-84d0d95128d81723d209dcaf31013a8dee1c2635%2FOrder%20Confirmation%20-%20BG%20Color.png?alt=media)

### Typography Type

Here you can edit the font of the button text/content.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-0a1cc96087e099ee0582aa766b7af6ac5c1546c9%2FOrder%20Confirmation%20-%20Typograpghy%20type.png?alt=media)

### **Order Heading Mobile and Desktop Font Size** <a href="#order-heading-mobile-and-desktop-font-size" id="order-heading-mobile-and-desktop-font-size"></a>

You can adjust the mobile and desktop font sizes of your order heading by adjusting the size bars.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-5cdfb2fb20bb19c61c3fce3bea95a57a8ce415ca%2FOrder%20Confirmation%20-%20Order%20hheadline%20font%20text.png?alt=media)

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-83ada7b6899403c163afe7054bcff2afbeef72d8%2FOrder%20Confirmation%20-%20Order%20%20mobile%20headline%20font%20text.png?alt=media)

### **Sub-Text Mobile and Desktop Font Size** <a href="#sub-text-mobile-and-desktop-font-size" id="sub-text-mobile-and-desktop-font-size"></a>

You can adjust the mobile and desktop font sizes of your sub-text simply by adjusting the size bars.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-48fcaf880d8a8e5ddac1f08f524bf689d58d86c9%2FOrder%20Confirmation%20-%20Order%20subheadline%20font%20text.png?alt=media)

## Color Options

* **Order Heading Text Color**\
  &#x20;\*\*\*\*You can only edit the Order heading text color here
* **Headline Text Color** \
  \*\*\*\*You can only edit the Headline text color here
* **Product Detail Text Color** \
  \*\*\*\*You can only edit the color of the Product detail (Dynamic Item) here.
* **Total Text Color**\
  &#x20;\*\*\*\*You can only edit the Total text color here
* **Shipping Address Color**\
  &#x20;\*\*\*\*If you have a shipping address on this page, you can only edit the color here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-754d39e49835ab267b71a26d40f324371dd2da20%2FOrder%20Confirmation%20-%20Color%20option.png?alt=media)

### Spacing Options

There are different spacing options available for adjusting your video content.

* **Padding Left, Right, Top, and Bottom**

  This Four (4) different toggle bar moves the content to either the left, right, top, or bottom depending on the toggle bar you click on.\\

* **Margin Top and Bottom**\
  You can adjust the top or bottom margin of your content by toggling its bars.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-9a3540400973a7a8559511c648b0fe4261e1097f%2FOrder%20Confirmation%20-%20Spacing%20option.png?alt=media)

### Advanced Settings

### Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-9118f88e629ade69b7f433ef2e484b9e6021f199%2FOrder%20Confirmation%20-%20Visibility.png?alt=media)

### Toggle Order Title

You can decide to show a form field for the "Order title" or you can hide it.

* **Order Title Text**\
  You can edit the description in the Order title (Order Confirmation) form field here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-f5c8ee5e1e9123465b84cfd814c673df97bb1189%2FOrder%20Confirmation%20-%20Order%20confirmation.png?alt=media)

### Select Item and Price Text <a href="#select-item-and-price-text" id="select-item-and-price-text"></a>

You can edit the description of your Item and Price text form field here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c43720711736b55d022068a05dfe906c893ebab2%2FOrder%20Confirmation%20-%20product%20price.png?alt=media)

### Toggle Total

You can decide to show a form field for the "Total" text or you can hide it.

* **Total Text**\
  You can edit the description in the Total form field here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-5588ff8249a2c5e55e0760289e0503f58b83a78f%2FOrder%20Confirmation%20-%20Total.png?alt=media)

### Toggle Shipping Details

You can decide to show a form field for "Shipping details" or you can hide it.

* **Shipping Details Title**\
  You can edit the description in the Shipping detail title form field here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c43720711736b55d022068a05dfe906c893ebab2%2FOrder%20Confirmation%20-%20product%20price.png?alt=media)

### CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-7602b8a622b05dc938926650ee742a0f884f035b%2FOrder%20Confirmation%20-%20CSS%20Selector.png?alt=media)
