Checkout Next Theme Settings Starter

gistfile1.html

<fieldset data-overrides-fieldset="checkout">
  <legend>Checkout</legend>
  <table>
    <tr>
      <td colspan="2">
        <h3>Banner</h3>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_use_header_image">Use a custom banner background?</label>
      </th>
      <td>
        <input id="checkout_use_header_image" name="checkout_use_header_image" type="checkbox"/>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_header_image.png">Banner background image</label>
        <small>For best results, we recommend uploading a 1000 x 400 px image</small>
      </th>
      <td>
        <input id="checkout_header_image.png" name="checkout_header_image.png" type="file"/>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_banner_background_color">Background color</label>
        <small>Color of the banner when not using a custom background image</small>
      </th>
      <td>
        <input id="checkout_banner_background_color" name="checkout_banner_background_color" class="color" value="#fff"/>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h3>Logo</h3>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_logo">Logo image</label>
      </th>
      <td>
        <select id="checkout_logo" name="checkout_logo">
          <option value="logo.png">Storefront logo</option>
          <option value="checkout_logo.png">Custom logo</option>
          <option value="" selected="selected">No logo</option>
        </select>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_logo.png">Custom checkout logo</label>
      </th>
      <td>
        <input id="checkout_logo.png" name="checkout_logo.png" type="file"/>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_headline">Tagline</label>
        <small>Your shop description will be displayed underneath your logo.</small>
      </th>
      <td>
        <input id="checkout_headline" name="checkout_headline"/>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h3>Colors</h3>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_accent_color">Accent</label>
        <small>Changes link and focus color</small>
      </th>
      <td>
        <input id="checkout_accent_color" name="checkout_accent_color" class="color" value="#2a9dcc"/>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_button_color">Buttons</label>
        <small>Changes section, discount and gift card button</small>
      </th>
      <td>
        <input id="checkout_button_color" name="checkout_button_color" class="color" value="#2a9dcc"/>
      </td>
    </tr>
    <tr class="horizontal">
      <th>
        <label for="checkout_call_to_action_color">Call to action</label>
        <small>Changes the background color of the &ldquo;Complete my purchase&rdquo; button</small>
      </th>
      <td>
        <input id="checkout_call_to_action_color" name="checkout_call_to_action_color" class="color" value="#8fc243"/>
      </td>
    </tr>
  </table>
</fieldset>