Shopify主题能否收集用户尺寸信息并在非结账页展示？附方案咨询

Great question! Let’s break down all your options for collecting and displaying custom user size data on your Shopify clothing store—from native Shopify tools to client-side workarounds.

First, let’s cover the built-in tools Shopify offers, since these integrate seamlessly with your store’s orders and workflows.

1. Line Item Properties (Best for Product-Specific Custom Sizes) #

If you need customers to provide unique sizes for individual products (e.g., custom measurements for a tailored dress), Line Item Properties are your go-to. These are custom fields attached to specific cart items, and they show up directly in your Shopify admin orders.

To set this up:

• Go to your product’s edit page in Shopify admin.
• Scroll to the Variants section, then click More options > Add custom field.
• Choose a field type (text input, dropdown, radio buttons) and name it (e.g., "Shoulder Width", "Waist Circumference").

Most modern Shopify themes (like Dawn, Refresh, or Sense) will automatically render these fields on the product page. If your theme doesn’t, you can add a simple Liquid snippet to your product template:

<div class="custom-size-fields">
  <label for="shoulder-width">Shoulder Width (cm):</label>
  <input type="number" id="shoulder-width" name="properties[Shoulder Width]" required>
  
  <label for="waist">Waist (cm):</label>
  <input type="number" id="waist" name="properties[Waist]" required>
</div>

2. Theme-Built Custom Field Support #

Many Shopify themes include pre-built blocks for custom form fields in the theme editor. To check:

• Go to Online Store > Themes > Customize.
• Navigate to your product page template.
• Click Add block and look for options like "Custom Liquid" or "Form Field".
• Configure the block to collect your desired size data—no code needed!

Yes, you absolutely can show this data on other pages (cart, product pages, custom pages) using Shopify’s Liquid templating language.

Shopping Cart Page #

Add this snippet to your cart template (usually cart.liquid or a cart section file) to display custom sizes for each cart item:

{% for item in cart.items %}
  {% if item.properties %}
    <div class="cart-item-custom-sizes">
      <h5>Custom Sizes for {{ item.title }}:</h5>
      {% for property in item.properties %}
        {% if property.last != blank %}
          <p>{{ property.first }}: {{ property.last }}</p>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
{% endfor %}

Custom Pages #

If you want to show a customer’s saved sizes on a dedicated "My Sizes" page, note that Shopify’s Liquid can’t access past user data unless the customer is logged in and you’ve stored the data in their customer profile (via Shopify API or an app). For temporary, session-specific data, the client-side solution below works better.

If you need to collect and display size data across multiple pages before a customer adds items to their cart, this approach is perfect. It uses localStorage to save data locally on the customer’s device, then lets you display it anywhere.

Step 1: Add a Size Collection Form #

Put this form on your product page, account page, or a dedicated "Set My Sizes" page:

<form id="custom-size-form" class="size-form">
  <h3>Save Your Custom Sizes</h3>
  <div class="form-group">
    <label for="shoulder">Shoulder Width (cm):</label>
    <input type="number" id="shoulder" min="0" step="0.5" required>
  </div>
  <div class="form-group">
    <label for="waist">Waist Circumference (cm):</label>
    <input type="number" id="waist" min="0" step="0.5" required>
  </div>
  <button type="submit" class="btn">Save Sizes</button>
</form>

Step 2: Save Data to LocalStorage #

Add this JavaScript snippet to your theme’s theme.liquid file (or a dedicated JS asset) to save the form data when submitted:

document.addEventListener('DOMContentLoaded', function() {
  const sizeForm = document.getElementById('custom-size-form');
  if (sizeForm) {
    sizeForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const userSizes = {
        shoulder: document.getElementById('shoulder').value,
        waist: document.getElementById('waist').value
      };
      
      // Save to localStorage
      localStorage.setItem('userCustomSizes', JSON.stringify(userSizes));
      
      alert('Your sizes have been saved! They’ll show up on product and cart pages.');
    });
  }
});

Step 3: Display Saved Data on Other Pages #

Add this snippet to any page where you want to show the saved sizes (e.g., product pages, cart pages):

<div id="saved-sizes-display" class="saved-sizes"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const displayArea = document.getElementById('saved-sizes-display');
  const savedSizes = localStorage.getItem('userCustomSizes');
  
  if (savedSizes) {
    const sizes = JSON.parse(savedSizes);
    displayArea.innerHTML = `
      <h4>Your Saved Custom Sizes:</h4>
      <p>Shoulder Width: ${sizes.shoulder} cm</p>
      <p>Waist: ${sizes.waist} cm</p>
    `;
  } else {
    displayArea.innerHTML = '<p>No saved sizes found. <a href="/pages/set-my-sizes">Set your custom sizes here</a>.</p>';
  }
});
</script>

Step 4: Submit Data to Your Store (Optional) #

If you want to store these sizes in your Shopify admin, you can extend the script to submit the data via Shopify’s contact form API:

// Modify the submit handler to include contact form submission
sizeForm.addEventListener('submit', function(e) {
  e.preventDefault();
  
  const userSizes = {
    shoulder: document.getElementById('shoulder').value,
    waist: document.getElementById('waist').value
  };
  
  localStorage.setItem('userCustomSizes', JSON.stringify(userSizes));
  
  // Submit to Shopify contact form
  fetch('/contact', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json'
    },
    body: `form_type=contact&name=Custom Size Data&email=customer-size-data@yourstore.com&body=${encodeURIComponent(`Shoulder Width: ${userSizes.shoulder} cm\nWaist: ${userSizes.waist} cm\nCustomer Session: ${Date.now()}`)}`
  })
  .then(response => {
    if (response.ok) {
      alert('Sizes saved locally and sent to your store!');
    } else {
      alert('Sizes saved locally, but we couldn’t send them to the store. Please try again later.');
    }
  })
  .catch(error => {
    console.error('Submission error:', error);
    alert('Sizes saved locally, but we couldn’t send them to the store.');
  });
});

• Use Line Item Properties if you need size data tied directly to specific orders (e.g., custom-tailored products).
• Use the client-side localStorage approach for general, reusable size data that customers can access across your store without adding items to cart.
• Start with checking your theme’s built-in custom field options first—many themes eliminate the need for custom code.

内容的提问来源于stack exchange，提问作者Mahade Walid