Page Comparison

...

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:

Code Block

theme	DJango
title	Inserting Custom Fields into the Storefront checkout
linenumbers	true

 
<table><table id='CustomFields'>
<tr>
<td>
<span class="ucColorSubHeader ucCommentsHeader">CustomField1 label text </span>
</td>
</tr>
<tr>
<td>
<div class="UcCustomTable">
    <div class="UcCustomTableTitle">
        <p>Complete the following, if applicable.</p>
    </div>
    <div class="UcCustomTableHeading">
        <div class="UcCustomTableCell">
            <p>Heading 1</p>
        </div>
        <div class="UcCustomTableCell">
            <p>Heading 2</p>
        </div>
        
    </div>
    <div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 1 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField1$cart.getCustomField1()"/>><br>
        </td>div>
        
    </tr>div>
  <tr> <td> <span<div class="ucColorSubHeader ucCommentsHeader">CustomField2 label text </span>
</td>
</tr>
<tr>
<td>"UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 2 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField2$cart.getCustomField2()"/>><br>
        </td>
</tr><tr>
<td>
<spandiv>
    <div class="ucColorSubHeader ucCommentsHeader">CustomField3 label text </span>
</td>
</tr>
<tr>
<td>"UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 3 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField3$cart.getCustomField3()"/>><br>
        </td>
</tr><tr>
<td>
<spandiv>
	<div class="UcCustomTableRow">
        <div class="ucColorSubHeader ucCommentsHeader">CustomField4 label text </span>
</td>
</tr>
<tr>
<td>UcCustomTableCell">
            <p>Custom Field 4 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField4$cart.getCustomField4()"/>><br>
        </td>
</tr><tr>
<td>
<spandiv>	
	<div class="UcCustomTableRow">
        <div class="ucColorSubHeader ucCommentsHeader">CustomField5 label text </span>
</td>
</tr>
<tr>
<td>UcCustomTableCell">
            <p>Custom Field 5 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField5$cart.getCustomField5()"/>><br>
        </td>
</tr><tr>
<td>
<spandiv>
	<div class="UcCustomTableRow">
        <div class="ucColorSubHeader ucCommentsHeader">CustomField6 label text </span>
</td>
</tr>
<tr>
<td>UcCustomTableCell">
            <p>Custom Field 6 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField6$cart.getCustomField6()"/>><br>
        </td>
</tr><tr>
<td>
<spandiv>
	<div class="UcCustomTableRow">
        <div class="ucColorSubHeader ucCommentsHeader">CustomField7 label text </span>
</td>
</tr>
<tr>
<td>UcCustomTableCell">
            <p>Custom Field 7 Label/p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="customField7"/>$cart.getCustomField7()"/><br>
        </div>	
    </td>
</tr>
</table>div>
</div>

CSS

Code Block

theme	DJango
title	Inserting Custom Fields into the Storefront checkout
linenumbers	true

 
<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>

Legacy Checkout

Panel
Main Menu → Configuration (Checkout) → Screen Branding themes → (Edit Theme) → Screens (tab) → Edit "Single Page Checkout" → "Below Shipping/Billing Address" (section)

...

Versions Compared

Old Version 14

New Version 15

Key

Legacy Checkout