• 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
  1. Backup Your Theme: Duplicate your theme to avoid losing any data.
  2. Edit Theme Files: Modify product.liquid and related files to include custom fields.
  3. Add Input Fields: Use HTML for text inputs, dropdowns, or file uploads.
  4. 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

1. Go to Online Store > Themes in your Shopify admin panel.
2. Click the three-dot menu (⋮) on your active theme and choose Duplicate.
3. 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.

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.

1. Open the Theme Editor: In your theme settings, click Actions, then select Edit code.
2. Go to the Templates folder.
3. Locate the file named product.liquid or 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!

Related posts

• Ultimate Guide to Shopify Plus Custom Development
• How to Use Dynamic Sources in Shopify Themes
• Conditional Sections in Shopify 2.0 Themes
• Schema Validation in Shopify Themes

The post How to Add Custom Fields in Shopify Themes appeared first on Alinga.