...
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 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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="$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>
|
CSS Example CSS for the Custom Field Div's
| 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> |
...