Matching Additional Fields on Customer Register Form Match the Rest of my Theme

Store Design
, ,
1

Hello!

I needed some additional information fields while gathering customer information when they register for an account and used Shopify’s tutorial but the fields don’t match the rest of my form. I’m a novice with coding, but can “fake it” when needed. Could someone guide me through how to get the rest of these fields to match the original fields?

Here is the code I’ve added before the button.

Owner Name
Business Name
Business EIN
Phone Number
Additional Comments
{{ 'customer.register.submit' | t }} {%- endform -%}

Every time I try to mess with it, I get this error on the field “translation missing: en.customer.note.additional_comments”

Here’s the page I’m working on if you’re interested in seeing how I need it to match. I’m not interested in an app at the moment, just a little guidance on what I can do to get these fields to match my theme.

Many thanks!

2

Hi @AmTay19

Please follow these steps:

  1. You can put the label after the input of the newly added fields as follows:
  1. Go to online store > themes > edit code. Find the file base.css, and add the following code:
.customer.register .field .owner.name, .customer.register .field .business.name, .customer.register .field .business.EIN, .customer.register .field .phone.number, .customer.register .field .additional.comments {
    position: relative;
}
.customer.register .field .owner.name input, .customer.register .field .business.name input, .customer.register .field .business.EIN input, .customer.register .field .phone.number input, .customer.register .field .additional.comments input{
    flex-grow: 1;
    text-align: left;
    padding: 1.5rem;
    margin: var(--inputs-border-width);
    appearance: none;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--duration-short) ease;
    border-radius: var(--inputs-radius);
    height: 4.5rem;
    min-height: calc(var(--inputs-border-width) * 2);
    min-width: calc(7rem + (var(--inputs-border-width) * 2));
    position: relative;
    border: 1px solid rgb(11,10,10);
}
.customer.register .field .owner.name input:focus, .customer.register .field .business.name input:focus, .customer.register .field .business.EIN input:focus, .customer.register .field .phone.number input:focus, .customer.register .field .additional.comments input:focus {
    box-shadow: 0 0 0 calc( var(--inputs-border-width)) rgba(var(--color-foreground));
    padding: 2.2rem 1.5rem 0.8rem 2rem;
    margin: var(--inputs-border-width);
}
.customer.register .field .owner.name input:focus-visible, .customer.register .field .business.name input:focus-visible, .customer.register .field .business.EIN input:focus-visible, .customer.register .field .phone.number input:focus-visible, .customer.register .field .additional.comments input:focus-visible {
	outline: none;
}
.customer.register .field .owner.name label, .customer.register .field .business.name label, .customer.register .field .business.EIN label, .customer.register .field .phone.number label, .customer.register .field .additional.comments label {
    font-size: 1.6rem;
    left: calc(var(--inputs-border-width) + 2rem);
    top: calc(1rem + var(--inputs-border-width));
    margin-bottom: 0;
    pointer-events: none;
    position: absolute;
    transition: top var(--duration-short) ease,font-size var(--duration-short) ease;
    color: rgba(var(--color-foreground),.75);
    letter-spacing: .1rem;
    line-height: 1.5;
    z-index: 100;
}
.customer.register .field .owner.name input:focus~label, .customer.register .field .business.name input:focus~label, .customer.register .field .business.EIN input:focus~label, .customer.register .field .phone.number input:focus~label, .customer.register .field .additional.comments input:focus~label {
	font-size: 1rem;
    top: calc(var(--inputs-border-width) + 0.5rem);
    left: calc(var(--inputs-border-width) + 2rem);
    letter-spacing: .04rem;
}

If you don’t see any changes, find the css files and try adding the above code.

To fix the “translation missing: en.customer.note.additional_comments” error, find the file en.default.json. CTRL+F find ‘additional_comments’ and fix the red text in quotes to “Additional comments”.

view (13).png
view (13).png364×239 5.19 KB

I hope that it will work for you.

3

Thank you for taking the time to put this together for me, but
unfortunately, the first string of code you sent only added a new field and
had “additional comments” after the entry box whereas before adjusting
anything it was before the entry box. I’m trying to get the text to be
inside the entry box and the box to match the style of the original boxes.
I noticed after the other original boxes there was this code:

{{ ‘customer.register.last_name’ | t }}

And through trial and error, when I adjust the words inside the brackets,
that’s when I get the “translation missing:
en.customer.note.additional_comments” error. Any thoughts on what
adjustments I can make for it to accept the new fields?

  1. Do I add this at the end of the base.css file? If so, it didn’t do
    anything either. And when I went to search for “additional comments” in the
    en.default.json file it didn’t return any results.

Thanks again for your help,