...
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.
Example HTML
Place the following code into a new snippet file
(Example: "cart_customfields.vm" place into the snippets folder of the activated theme.)
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
## This snippet contains custom fields for inclusion in to the checkout
<div class="row js-show-shipping">
<div class="columns small-16">
<div class="UcCustomTable">
<div class="UcCustomTableTitle">
<p>Complete<h2>Complete the following, if applicable.</p>h2>
</div>
<div class="UcCustomTableHeading">
<div class="UcCustomTableCell">
<p>Heading<p>Table 1<Heading</p>
</div>
<div
class="UcCustomTableCell">
<p>Heading 2</p>
</div>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom<h3>Custom Field 1 Label</p>h3>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField1()"/><br>
</div>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom Field 2 Label</p>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField2()"/><br>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom Field 3 Label</p>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField3()"/><br>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom Field 4 Label</p>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField4()"/><br>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom Field 5 Label</p>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField5()"/><br>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom Field 6 Label</p>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField6()"/><br>
</div>
<div class="UcCustomTableRow">
<div class="UcCustomTableCell">
<p>Custom Field 7 Label</p>
</div>
<div class="UcCustomTableCell">
<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField7()"/><br>
</div>
</div>
</div>
</div>
</div>
|
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<style type="text/css">
.UcCustomTable
{
display: table;
}
.UcCustomTableTitle
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.UcCustomTableHeading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.UcCustomTableRow
{
display: table-row;
}
.UcCustomTableCell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style> |
Preview of the fields appearing in the checkout:
Legacy Checkout
| Panel |
|---|
Main Menu → Configuration (Checkout) → Screen Branding themes → (Edit Theme) → Screens (tab) → Edit "Single Page Checkout" → "Below Shipping/Billing Address" (section) |
Example of placing the custom field HTML into the single page checkout editor:
| 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> |
...