Pull Custom Product Attribute Data and Display it on Cart/Checkout Page

[QuickReviewPro]

Hi there! I've been testing and trying a handful of different things to get this working properly and can't seem to find the magic recipe to make things function properly.

I've recently added some code into the main-product.liquid file (I've pasted the code below). This code displays 2 input fields on our product pages, allowing users to enter in a Business Name & Address.

{%  if product.metafields.custom.business_info %}
            
            <div class="main-product-property">
            <label>Business Name</label>
            <input type="text" name="properties[Business Name]">
            </div>

            <div class="main-product-property">
            <label>Business Address</label>
            <input type="text" name="properties[Business Address]">
            </div>

  {% endif %}

Now that we have this implemented, we want this data to show up when the customer is viewing their cart/checkout pages. What is the simplest and most efficient way to pull the data from this code and have it displayed on the cart/checkout pages?

Any information, help or guidance regarding this situation is greatly appreciated!

Website Notes** We are using the 'Taste' Shopify Theme. If I can send over any other information about the site, please let me know and I'll get the required information sent over right away.

Thanks for any help, information or guidance, we really appreciate the help!!

[QuickReviewPro]

Just a little update to the situation here and for anyone willing to help us out with this. We've got these input fields added to both the product pages and the featured product on the homepage. (I'm inputting the code snippet we're using to do so, below.)

{%  if product.metafields.custom.business_info %}
            
            <div class="main-product-property"><label for="google-business-search">Business Name:</label>
<input type="text" id="google-business-search" name="google_business_search" placeholder="" required>
<div id="autocomplete"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByawoA7XQoC_rA3cets2XC3Cu7gBEZxIc&libraries=places"></script>
<script>
  function initializeAutocomplete() {
    var input = document.getElementById('google-business-search');
    var autocomplete = new google.maps.places.Autocomplete(input);

    // Limit the search to business types only
    autocomplete.setTypes(['establishment']);
  }

  // Call the initializeAutocomplete function after the Google Maps API has loaded
  google.maps.event.addDomListener(window, 'load', initializeAutocomplete);
</script></div>

  {% endif %}

This code has been pasted in the main-product.liquid file and the featured-product.liquid file, that way this field gets displayed both on our product pages and our featured product on the homepage.

The issue here is that when our customers enter in that information and click the 'Add to Cart' button or 'Checkout' button, the information they submitted in the 'Business Name' field, does not get carried over or saved anywhere within the Shopify backend.

If anyone knows how we're able to collect and store this data that the customer enters into the Business Name field, your help would be greatly appreciated! We need this data to get saved whenever a customer places their order, this information is extremely important for us to have, as we need it in order to complete their order.

Again, any help, suggestions or guidance would be greatly appreciated. I've tried applying multiple different solutions, but I believe I'm having the most trouble deciding on where my code needs to go, in order to make this work properly.

[J2112O]

Hi,

I am a beginner trying to learn Shopify development (coming from more WordPress/WooCommerce/PHP) and was practicing this very thing a few weeks back in Dawn Theme on my development store. I think your input fields need the form="product-form-{{ section.id }}" attribute in them. I believe when going to checkout, this is how the data from your custom fields gets to the checkout page. Again, I could be wrong but it might be worth a try. I'm a newb with Shopify too. The section.id portion of the code might be specific to just Dawn theme too so I am not sure. Hope this gets you going in the right direction at least. Good luck!

[DeeDee-TDY]

Agreed with prior user but added note below (and also I am a beginner at Shopify too).

You also have to consider where the liquid block is placed in your main-product.liquid file. Try placing it right before {%- endform -%} to test - and you should see it under the price on you cart page. Example input element block from my store:

<p class="line-item-property__field">
<label for="iscoDiscount">Discount</label>
<input id="iscoDiscount" type="number" name="properties[item-discount]" form="product-form-{{ section.id }}" onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)" value="0.00" min="0.00" max="10.00" step="0.01" >
<span>%</span>
</p>
{%- endform -%}