Multi-line text (as dynamic source)

[King-Kang]

Hello everyone,

I'm using Dawn theme (version 5.0.0) and I want to add a Multi-line text  bellow the Add to cart button for each product, but I don't want to use the Collapsible Row.

The theme blocks available for the Product information are the following:

- Text
- Custom Liquid
- Collapsible Row
- Pop-up
- Product Rating

The only options I see, that can maybe cover my needs are the Text (which I tried to use but does not accept Multi-line text as dynamic source) and the Custom Liquid with any specific kind of code.

Note: I can not use the the product's description from the product's admin page, because I'm using it to display the color swatches above the Add to Cart button - This way I can have individual pages for each product's color, which benefits in many aspects.

Can you help me with this survey?

Thank you in advance.

[MarinaPetrovic · Accepted solution]

Hi @King-Kang , open your file  (Sections > main-product.liquid). Find this element:

<product-form class="product-form" data-cart-type="{{ settings.cart_type }}">
                <div class="product-form__error-message-wrapper" role="alert" hidden>
                  <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                    <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                    <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                    <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                    <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                  </svg>
                  <span class="product-form__error-message"></span>
                </div>

                {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
                  <div class="product-form__buttons">
                    <button
                      type="submit"
                      name="add"
                      class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                      {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                    >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                    </button>
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}
                  </div>
                {%- endform -%}
              </product-form>

And right bellow that add:

<div>{{section.settings.text_area}}</div>

And last step, go to the bottom of the file, you'll see schema part, starts with '{% schema %}' and ends with '{% endschema %}. Find last element:

{
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }

And just bellow that element add:

{
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
{
"type":"textarea",
"id":"text_area",
"label":"My custom Field"
}

Hope this helps 🙂 

[King-Kang]

Hello @MarinaPetrovic ,

Thank you very much for helping me with this survey. I followed your instructions carefully. I just want to make sure, in the last step the only thing you want me to paste is

,
{
"type":"textarea",
"id":"text_area",
"label":"My custom Field"
}

I guess it's not to paste also this... right?

{
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
}

So after paste the code that starts with the comma, right before

  ]
}
{% endschema %}

I saved.

Unfortunately it didn't show anything in the product page customize...

Not sure if I did something wrong or if something is missing. But I think that the path you are providing will reach to the solution 🙂

[MarinaPetrovic]

That's right @King-Kang , just pay attention that comma doesn't go in a new line, but right after previous element, like this:

{
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
{
"type":"textarea",
"id":"text_area",
"label":"My custom Field"
}

[King-Kang]

Exactly like I did 🙂
But unfortunately it does not output anything...

[MarinaPetrovic]

So, when you open customizer and go to the product page - you can't see the field labeled "My custom field"? 🤔

[King-Kang]

Yes, It does not show.

[MarinaPetrovic]

Oh, it won't show there. Please click on product information (first main item) and it should be displayed. 🙂 

[King-Kang]

Oh I see, you are right, it shows!

But It does not allow me to use insert dynamic source so It can gathers the admin product Multi-line text - like the collapsible rows do in the row content. We are really near to the solution 🙂

Thank you for helping me so far

[King-Kang]

Thanks to you @MarinaPetrovic I have found what I was looking for, all I had to do was replace the code you gave for this one

<div>{{section.settings.content}}</div>

,
{
  "type":"richtext",
  "id":"content",
  "label":"Product description"
}

[MarinaPetrovic]

@King-Kang Awesome!!! Glad I could help! 🙂

[AMCEnterprise51]

Hi. What if there is no insert dynamic source button at the text headings? What Can I do to add it?