Change placeholder attribute on checkout form

Here are the steps for changing the placeholder attribute within the checkout form.

In this example we will use the single page checkout within StoreFronts.


  1. From the StoreFronts menu, click on Templates tab.

  2. Under the Templates section click on the Checkout tab.

  3. For this example we are going to edit the single page checkout, so we can scroll down the list until we find the template we are looking for and simply click on it to open the viewer.

  4. On the code view we want to scroll down until we find the first section with an fields, in this case it will be the Shipping address.

  5. After clicking on "snippets/cart_shipping_address.vm" to be take the code view, we can now locate the placeholder attribute we would like to change. For this example lets change the Daytime phone.

    In the code block here we can see that the 'placeholder' is set to (212) 555 1212, so we are going to go ahead and change that to simply (555) 555 5555, and see what that looks like.

  6. Once we have changed the placeholder text we can save the code and take a look at the cart.

As you can see the placeholder has now been changed within the Daytime Phone field. The placeholder attribute is set for all the fields within the checkout and can be changed in the same way as listed above.