Sometimes you need to let your customers customize a product before checkout on your Shopify store by adding custom fields. For instance, you offer monograms, or you need to let them choose from other custom options.
There are apps that can do this, but they are mostly expensive and they bloat your store by adding extra scripts and slows down your site.
Fortunately, a lot you can do to offer customized products without paying for an app or hiring a developer. Plus, these methods only requires a tiny amount of code (no JavaScript), so your site doesn’t get unnecessarily slowed down.
Steps for the Custom fields
Below is the example of the types of custom product options you can set up. You can create any combination of the options shown below, including text inputs (small or large text areas), checkboxes, file uploads, drop-down selects, and radio buttons.
1. Create a new product template
In your Shopify Dashboard, go to Online Store > Themes > … > Edit HTML/CSS.
In the Templates section, click “Add a new template.”
In the window that appears, choose product from the template & name it ‘ custom ‘.
Click on the Create template button.
After this, go to products from the dashboard, open particular product you want to customize & choose template ‘ custom from right bottom side of the product dashboard.
Note: if your theme uses section instead of creating a product template create the section template and the functionality will still work the same
2. Add code for the form fields
Now the question arises where to add the code? Well the code need o be inside the form tag
You can add the code wherever you want the fields to appear on the site. I recommend adding it above the quantity field.
In some themes, you’ll not find the form in the template file, you can find it in the snippets section and look for a Snippet called “product-form,”
In the themes which works on sections, check in the Section titled “product-template.liquid”.
You can add the custom fields code just above the highlighted text below
add the following code:
{% if template contains 'custom-1' %}
[replace this with your custom fields]
{% endif %}Small Text
<div class="line-item-property__field">
<label for="customize-text">Customize Text</label>
<input id="customize-text" type="text" name="properties[Customize Text]">
</div>Radio Buttons
<div class="line-item-property__field">
<label>Choose an option</label>
<div>
<input required class="required" type="radio" name="properties[Choose an option]" value="Option 1">
<span>Option 1</span>
</div>
<div>
<input required class="required" type="radio" name="properties[Choose an option]" value="Option 2">
<span>Option 2</span>
</div>
<div>
<input required class="required" type="radio" name="properties[Choose an option]" value="Option 3">
<span>Option 3</span></div>
</div>
</div>Large Text(Custom Message)
<div class="line-item-property__field">
<label for="custom-message">Custom Message</label>
<textarea required class="required" id="custom-message" name="properties[Custom Message]">
</textarea>
</div>Checkboxes
<div class="line-item-property__field">
<label>Optional features</label>
<div>
<input required class="required" type="checkbox" id="Feature-1" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature 1">
<span for="Feature-1"> Feature 1</span>
</div>
<div>
<input required class="required" type="checkbox" id="Feature-2" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature 2">
<span for="Feature-2"> Feature 2</span>
</div>
<div>
<input required class="required" type="checkbox" id="Feature3" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature3">
<span for="Feature3"> Feature3</span>
</div>
<input type="hidden" id="Optional-Features" name="properties[Optional Features]">
<script>
function fillHidden(hiddenname) {
var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
var hiddenfield = document.getElementById(hiddenname);
hiddenfield.value = ""
var i;
for (i = 0; i < checkboxes.length; i++) {
var x = checkboxes[i];
if(x.checked){
if(hiddenfield.value==""){
hiddenfield.value = x.value;
}else{
hiddenfield.value = hiddenfield.value + ", " + x.value;
}
}
}
}
</script>
</div>Dropdown select
<div class="line-item-property__field" style="margin: 0 0 20px;">
<label>Choose an Option</label>
<select required class="required" id="choose-an-option" name="properties[Choose an Option]">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>File upload
<div class="line-item-property__field">
<label for="custom_photo">Photo (JPG or PNG)</label>
<input required id="custom_photo" type="file" name="properties[Photo]">
</div>Note: Kindly note that the file upload will not work if the cart is of drawer functionality / popup (ajax) cart update.
Customize cart to show the custom options
Some themes already have the necessary code present on the cart page to show the line item properties. To check and see if your theme already have this, just try adding the product in cart which has the line-item properties if the data is shown, then its already present.
if its not then next step is waiting for you 🙂
1) In your Theme Editor, open the cart.liquid template.
2) Find the code {{ item.product.title }}. Just below it, add the following code:
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}Voila its done, Now you can test the baby out!
Incase of any query do comment down below, will surely get back to your queries if any.