...
If you require the use of the custom fields to collect additional information from the customer during the checkout, you can insert the custom fields into the checkout.
Storefront Checkout
| Panel |
|---|
Main Menu → Storefronts → (Choose SF Host) → (Storefronts Menu) Templates |
With the storefronts templates, you'll need to remember to maintain the "responsiveness" of the pages for each device view, so make sure not to insert things like tables and instead use CSS for the styling of the custom content. Storefront templates typically contain multiple template snippets, so you may want to create your custom content to the templates as a snippet, which will make for easier template management for when you perform theme updates.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<table><table id='CustomFields'>
<tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField1 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField1"/>
</td>
</tr>
<tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField2 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField2"/>
</td>
</tr><tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField3 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField3"/>
</td>
</tr><tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField4 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField4"/>
</td>
</tr><tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField5 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField5"/>
</td>
</tr><tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField6 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField6"/>
</td>
</tr><tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField7 label text </span>
</td>
</tr>
<tr>
<td>
<input type='text' class="ucFormField" style="width:315px" name="customField7"/>
</td>
</tr>
</table> |
Legacy Checkout
| Panel |
|---|
Main Menu → Configuration (Checkout) → Screen Branding themes → (Edit Theme) → Screens (tab) → Edit "Single Page Checkout" → "Below Shipping/Billing Address" (section) |
...
The above HTML code would render into the single page checkout like this:
Seeing Custom Field Values in Web Interface
...