Adding custom fields to your Shopify theme lets your customers provide extra details like special instructions, personalisation requests, or measurements. This improves order handling and creates a better shopping experience. Here’s how you can get started:
- Why Add Custom Fields?
- Collect customer preferences (e.g., engraving text, dietary needs).
- Simplify processes by gathering all info upfront.
- Make products more customisable for your customers.
- How to Set Up Custom Fields
- Backup Your Theme: Duplicate your theme to avoid losing any data.
- Edit Theme Files: Modify
product.liquidand related files to include custom fields. - Add Input Fields: Use HTML for text inputs, dropdowns, or file uploads.
- Style Fields: Update CSS for seamless integration with your design.
- Advanced Options
- Add dropdowns, radio buttons, or file upload fields for more customisation.
- Validate inputs with JavaScript to ensure accurate data collection.
- Managing Data
- Use Shopify Liquid to display and process custom field data in orders.
- Show customisation details on product pages and order notifications.
Custom fields make your store more user-friendly and help you handle unique customer needs effortlessly. Start by backing up your theme, then follow the steps above to add and manage fields effectively.
Setting Up Your Theme for Changes
Before adding custom fields, it’s important to set up a proper development environment. This step helps protect your live store from potential errors and ensures any changes are tested safely.
Create a Theme Backup
- Go to Online Store > Themes in your Shopify admin panel.
- Click the three-dot menu (⋮) on your active theme and choose Duplicate.
- Rename the duplicate with the date (02/04/2025) and include “Custom Fields Backup” for easy reference.
Setting Up a Test Environment
A development environment allows you to test changes without affecting your live store.
| Environment Type | Best For | Key Features |
|---|---|---|
| Development Store | Major modifications | Full testing capabilities |
| Theme Preview | Minor adjustments | Quick visual checks |
| Password Protection | Limited testing | Collect limited data |
For custom fields, the Development Store option is ideal. It provides a secure space to experiment with field configurations without impacting your production setup.
Locating Theme Files
To add custom fields, you’ll need to edit specific theme files.
- Open the Theme Editor: In your theme settings, click Actions, then select Edit code.
- Go to the Templates folder.
- Locate the file named
product.liquidor the variant for your product template.
Files to modify:
product.liquid: The main product template.product-form.liquid: Snippet for the product form.theme.scss.liquid: Stylesheet for custom field design.theme.js: JavaScript file for field functionality.
Tip: Always work in your development environment first. Test your changes thoroughly before applying them to your live store.
Adding Simple Custom Fields
You can enhance your product forms by embedding custom fields directly into your theme files. This allows for easier data collection from customers during checkout.
Modify Product Template
To include custom fields, place the following code right before the closing </form> tag in your product template. This ensures the fields are submitted correctly with the form.
{% form 'product', product %}
<!-- Existing product form content -->
<!-- Custom fields section -->
<div class="custom-fields-container">
{{ content_for_custom_fields }}
</div>
<!-- Add to cart button -->
{% endform %}
Input Field HTML Code
Add this code to create the custom fields:
<div class="custom-field">
<label for="customer-note">Special Instructions</label>
<input
type="text"
id="customer-note"
name="properties[Customer Note]"
class="custom-input"
placeholder="Enter any special requirements"
>
</div>
<div class="custom-field">
<label for="gift-message">Gift Message</label>
<textarea
id="gift-message"
name="properties[Gift Message]"
class="custom-textarea"
rows="3"
placeholder="Enter your gift message here"
></textarea>
</div>
Each field should have:
- A unique ID for proper identification.
- A name starting with
properties[]to ensure the data is stored with the order. - Clear labels and placeholders for user guidance.
- Relevant styling classes to match your theme.
CSS Styling Guide
To make the custom fields blend seamlessly with your theme, add these styles to your theme.scss.liquid file:
.custom-fields-container {
margin: 20px 0;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 4px;
}
.custom-field {
margin-bottom: 15px;
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #333;
}
.custom-input,
.custom-textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
&:focus {
outline: none;
border-color: #666;
}
}
}
This styling ensures:
- Consistent padding and spacing.
- Alignment with your theme’s colours.
- Responsive design for different devices.
- Accessible focus states for better usability.
Once added, these custom fields will appear on your product pages. Customers can use them to provide additional details, such as special instructions or gift messages. You can view this information in your Shopify admin panel under the order details.
sbb-itb-19747f8
Complex Custom Field Types
Upgrade your custom fields with advanced input options to provide more tailored product customisation.
Dropdown Menu Setup
Add dropdown menus to give customers predefined choices. Insert the following code into your custom fields container:
<div class="custom-field">
<label for="size-preference">Size Preference</label>
<select
id="size-preference"
name="properties[Size Preference]"
class="custom-select"
>
<option value="">Please select...</option>
<option value="standard">Standard Fit</option>
<option value="relaxed">Relaxed Fit</option>
<option value="slim">Slim Fit</option>
</select>
</div>
Style the dropdown menu with this CSS:
.custom-select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #fff;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
}
Once your dropdown is ready, you can move on to multiple-choice options.
Checkbox and Radio Options
For multiple-choice selections, use checkboxes or radio buttons. Here’s an example for radio groups:
<div class="custom-field">
<fieldset class="custom-options">
<legend>Gift Wrapping Options</legend>
<div class="option-group">
<input
type="radio"
id="wrap-standard"
name="properties[Gift Wrap]"
value="standard"
class="custom-radio"
>
<label for="wrap-standard">Standard ($5)</label>
</div>
<div class="option-group">
<input
type="radio"
id="wrap-premium"
name="properties[Gift Wrap]"
value="premium"
class="custom-radio"
>
<label for="wrap-premium">Premium ($10)</label>
</div>
</fieldset>
</div>
Style these options with:
.custom-options {
border: none;
padding: 0;
margin: 0 0 20px;
legend {
font-weight: 500;
margin-bottom: 10px;
}
.option-group {
display: flex;
align-items: center;
margin-bottom: 8px;
label {
margin-left: 8px;
cursor: pointer;
}
}
}
File Upload Fields
To expand customisation further, add file upload fields. Here’s an example setup:
<div class="custom-field">
<label for="custom-artwork">Upload Custom Artwork</label>
<input
type="file"
id="custom-artwork"
class="custom-file-input"
accept=".jpg,.png,.pdf"
data-max-size="5"
>
<small class="file-instructions">
Accepted formats: JPG, PNG, PDF (max 5MB)
</small>
</div>
Use the following JavaScript to validate file size:
document.querySelector('.custom-file-input').addEventListener('change', function(e) {
const file = e.target.files[0];
const maxSize = this.dataset.maxSize * 1024 * 1024; // Convert to bytes
if (file.size > maxSize) {
alert('File size exceeds 5MB limit');
this.value = '';
}
});
Style the file input field with:
.custom-file-input {
width: 100%;
padding: 10px;
border: 2px dashed #ddd;
border-radius: 4px;
cursor: pointer;
&:hover {
border-color: #666;
}
}
.file-instructions {
display: block;
margin-top: 5px;
color: #666;
font-size: 0.875em;
}
These advanced input fields not only enhance functionality but also align with your theme. Ensure you test them across different browsers and devices for smooth performance.
Managing Custom Field Data
Once you’ve set up custom field configurations, it’s time to manage and display the collected data across your store effectively.
Using Liquid for Data
You can retrieve custom field values with Liquid’s product.properties. Here’s an example:
{% if product.properties %}
{% for property in product.properties %}
<div class="property-item">
<strong>{{ property.first }}:</strong>
<span>{{ property.last }}</span>
</div>
{% endfor %}
{% endif %}
For instance, if product.properties['Size Preference'] is set to “relaxed”, you can display a note about sizing:
{% if product.properties['Size Preference'] == 'relaxed' %}
<div class="sizing-note">
Note: Relaxed fit items run approximately one size larger
</div>
{% endif %}
This data can enhance the user experience by adding relevant information to your product pages.
Product Page Display
You can showcase custom fields on the product page using the following code snippet:
<div class="product-customisation">
<h3>{{ product.title }} Options</h3>
<div class="custom-fields-container">
{% for field in custom_fields %}
<div class="field-display">
<span class="field-label">{{ field.first }}</span>
{% if field.last contains '.jpg' or field.last contains '.png' %}
<img src="{{ field.last }}" alt="Custom artwork" class="preview-image">
{% else %}
<span class="field-value">{{ field.last }}</span>
{% endif %}
</div>
{% endfor %}
</div>
</div>
To make this display visually appealing, you can style it like this:
.custom-fields-container {
margin: 20px 0;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 4px;
.field-display {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
.field-label {
font-weight: 500;
display: block;
margin-bottom: 5px;
}
.preview-image {
max-width: 150px;
border-radius: 4px;
}
}
Order Information Setup
To extend custom field functionality to order processing, you can update your order-notification.liquid template with the following code:
{% if order.properties != blank %}
<div class="order-customisation">
<h4>Custom Options</h4>
<table class="custom-options-table">
<tbody>
{% for property in order.properties %}
{% unless property.last == blank %}
<tr>
<td>{{ property.first }}:</td>
<td>{{ property.last }}</td>
</tr>
{% endunless %}
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
Additionally, you can validate required fields in the cart form using JavaScript:
document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(e) {
const requiredFields = this.querySelectorAll('[data-required="true"]');
requiredFields.forEach(field => {
if (!field.value) {
e.preventDefault();
field.classList.add('error');
alert(`Please complete the ${field.getAttribute('name')} field`);
}
});
});
This ensures that all necessary custom fields are filled out before an order is submitted.
Conclusion
Key Takeaways
Custom fields can improve functionality and tailor the shopping experience to your customers’ needs. Here’s a quick rundown of the steps for implementation:
- Backup your theme and validate fields to protect your data.
- Add custom field HTML and styling to fit your store’s design.
- Set up data management with Liquid for smooth handling of custom fields.
- Process orders using the data from custom fields.
- Collect important product details to simplify order handling and improve customer satisfaction.
For more complex requirements, reaching out to professionals is often the best move.
Need Expert Help?
If your customisation needs go beyond the basics, it’s worth consulting an expert. While simple changes are manageable, advanced customisation often requires professional skills. Once your custom fields are in place, ensure everything runs smoothly by working with experienced developers.
Alinga, a certified Shopify Plus partner, provides tailored eCommerce solutions, including custom field implementation. Their team specialises in advanced integrations and optimisations, helping businesses make the most of their custom fields while keeping their sites running at peak performance.
For businesses needing advanced solutions, partnering with seasoned Shopify developers ensures seamless integration with your theme and improved functionality.
Do you need support with your eCommerce plans? Alinga, a leading eCommerce expert, is here to help businesses excel online. We offer IT expertise and innovative concepts for all projects, assisting from the beginning to completion and beyond. Let Alinga boost your online presence if you’re new or are looking to enhance your online business. Be in touch with us now to get started!
