How to create personalisation/customisation entry field on Empire Shopify Theme.

I had need to add a field entry for my customers to enter personalisation requests for their products, and I'm using the Empire Shopify Theme. Whilst there are instructions to be found for Debut, I couldn't find any for Empire. Anyway, I figured it out and this is how you can do it. I'm going to do this using the Metafields capability in the shopify backend.

Natively in empire, there is a "notes field" which you can enable which shows a text box to the customer at checkout. But I didn't find this works too well, because a customer should be able to submit their personalisation request at the same time as selecting any other product attributes. Also, options like "quickbuy" tend to bypass the final cart page and head straight for the payment pages so a customer will miss the opportunity to submit their personalisation request.

I have verified this as working on both Empire Theme v6.0.0 and v5.11.4

Step1. Backup you theme.

Step 1 is very important. I know some of you are thinking, "ah but I won't mess this up, so I do not need a backup", can I suggest you go have a cup of coffee and contemplate life for a few minutes. When you have returned, you can now proceed with this Step1 !! 

Go to your shopify admin and then Online Store -> (Current Theme) Actions -> Duplicate

One all done, scroll down to the Theme Library section and click Actions -> Rename, and then give it a name something like "Backup_<date>"

Step 2. 

Please check you have done step 1. Last chance, don't say I didn't warn you!

Step3. Setup Metafields

The point of Metafields is to enable you to setup some custom attributes. We are going to create some custom product attributes and we will then configure these on a product-by-product basis as to whether the product has a personalisation option.

(I have seen some tutorials where you can create a new product template instead of using metafields, but I found this to be unsatisfactory because there are so many different ways to view a product that I found it a bit of a mess). 

OK, head to your shopify admin again and hit the settings button in the bottom left hand corner. Then select "Metafields" (which at the time of writing is the last setting on the list)

You should then have a list, which (at the time of writing) says:

- Products

- Variants

- Collections

- Customers

- Orders.

Click on the "Products" link, the first one on the list...and then you should be able to click "Add definition" at the top right of the screen. You should see the following screen

Use the following settings:

Name set to "personalise"

Description, set to whatever you want..something like "setting for personalisation"

Click the "Select content type" and select "True or False". Leave all remaining settings as is.

Finally click Save. 

Now, repeat this metafield process to create another two text metafields.  Make the name of the second metafield personalise_instructions but this time when you hit "Select content type", pick Text. It should default to a "single line text" setting and all other settings can remain default. Hit Save.

For the third metafield, make the name  personalise_entertexthere and also when you hit "Select content type", again pick Text. It should default to a "single line text" setting and all other settings can remain default. Hit Save.

You should have three metafields setup, and you should now see them listed something like this.

So the way we are going to do use these fields, is as follows:

- The personalise field will be set to True when we want to enable personalisation on the product

- The personalise_instructions will be some introductory text to the customer explaining what to do

- The entertexthere field will be some default text inside the text box

Step 4: Make changes to the theme code 

Next step here is what we will make an update to the theme code to read and act upon the metafields against the product. So we are heading back to the admin consolde, going to Online Store -> Themes -> (Current Theme) -> Actions -> Edit Code

(and of course we are going to check that you did do step 1 !!!? This is the moment of no return).

Open up the Snippets section and click on the product-form.liquid file. Head to about line 661, and you want to paste the following immediately before this bit:

<button
class="product-form--atc-button

Paste in this code immediately before that <button flag:

{% if product.metafields.my_fields.personalise == true %}
<div class="cart-ordernote">
<span class="cart-ordernote-heading" style="font-size:12pt; margin-top:1rem;">{{ product.metafields.my_fields.personalise_instructions.value }}</span>


<div class="form-field">
<textarea class="form-field-input form-field-textarea" style="margin-bottom:1rem" name="properties[personalisation]" id="personal-note"></textarea>
<label class="form-field-title" for="personal-note">{{ product.metafields.my_fields.personalise_entertexthere.value }}</label>
</div>
</div>
{% endif %}

Now hit save  (top right of screen).

Step 5: Update your products 

Now go to your admin screen, and click Products and select the product that you want to enable personalisation for. Scroll to the bottom and you should see those metafields that you can fill in. Configure them as follows:

The personalise field, set to True by toggling the slider. 

The personalise_entertexthere set to "Enter text here" or words to that effect.

The personalise_instructions set to something like "Enter below, the personalised text you would like" (obviously set this to something relevant to the product you are selling). 

Hit save

And thats it. 

Step 6: Optional extra. Turn off "select options"

In the Empire theme, if you enable "Quick Shop" then customers can purchase an item without leaving the main product display grid. But also, there is a "Select Options" button.. and this does the same thing as Quick Shop. I  found this a bit strange, basically two buttons doing very similar things. So I turned off the "select options" button. Do this by adding the following code to the end of the theme.css.liquid file (in the Assets section)

.productitem--action.atc--button {

display: none;

}

Step 7: Closing thoughts

If anyone has any improvements or suggestions, i'd be happy to hear them! I'm hardly the greatest web designer so any formatting improvements or other suggestions gladly received.