Line Item Properties and the Dawn Theme

[bozopriester]

If the Dawn theme uses ajax cart js to add items to a cart, then how in the world does one get any line item properties to appear in (get passed along to) the cart items? I have looked at numerous older posts about this issue, but they seem to be outdated as none of them have worked for me.

[pawankumar · Accepted solution]

You can search for product-form__buttons in file main-product.liquid
and before that you can put such

                    <div class="product-form__input">
                     <label class="form__label" for="property1">
                      Property 1
                  </label>
                   <input type="text" placeholder="property 1" form="{{ product_form_id }}"  id="property1" name="properties[propery 1]" />
                   
                    </div>

code
Your code will look like this

and it goes to cart in case of ajax cart as well.
Please check if it helps!

[bozopriester]

This was the only effective difference between your code and what I already had out there:

form="{{ product_form_id }}"

But it works now!!!  Thanks!!!!

[FirstMosh]

Hi,

I need this solution and trying to apply it but can't allocate the text product-form__buttons in the file main-product.liquid. However, when right-click and inspect the "add to cart" button I can see the text exactly as you said. Probably Shopify shortened the code by including/tagging/etc. Appreciate if you could advise how can I find the text. Many thanks

[pawankumar]

It may the case that it is included in some of the snippet.
search for render or include in this file and then look for the text in that file, it may be a snippet like product-form or similar
Thanks!

[cmartinez006]

https://community.shopify.com/c/shopify-design/line-item-properties-in-dawn-theme-not-showing-in-car...

I posted My solution in this thread

[KyaraLucas]

Here's for those using the newer Dawn theme 8.0.0 and up:

1. Search for product-form__buttons in the file `buy-buttons.liquid`

2. Insert your code right before the <div class="product-form__buttons"> line:

<div class="product-form__input">
   <label class="form__label" for="data_file">
     Upload File
   </label>
 <input required class="required" type="file" accept=".zip,.rar,.7zip" placeholder="Data file" form="{{ product_form_id }}"  id="data_file" name="properties[Data file]" />
</div>    ​

3. Additionally, if you want the input to be required (s.t. the customer cannot add to cart without filling in the additional field). You have to remove the novalidate: 'novalidate' line in the product form, also located in `buy-buttons.liquid` file.

{%- form 'product',
        product,
        id: product_form_id,
        class: 'form',
         novalidate: 'novalidate',
        data-type: 'add-to-cart-form'
      -%}

[trucranems]

Thanks used this and it worked. As I have some forms that I only want on certain products to show up, I created a different buy-buttons.liquid for each of those unique forms that I needed. 

Then I created a unique main-product.liquid for each corresponding buy-buttons. Changing line 313(theme v10) line 426(theme v11)

{%- render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true -%}

and changed the render 'buy-buttons' to reflect the unique buy-buttons.liquid I created.

I then created a unique product.input.json to match and changed line 4(theme v10) line 22 (theme v11).

{
  "sections": {
    "main": {
      "type": "main-product",
      "blocks": {
        "vendor": {
          "type": "text",
          "settings": {
            "text": "{{ product.vendor }}",
            "text_style": "uppercase"
          }

changing the type 'main-product' to the matching one I created earlier.

Then under the products page I changed the Theme template to the ones I wanted as they now showed up.

[coastnerdchic]

How are you creating multiple buy-buttons.liquid? I needed to make a few product templates with an add-to-cart requirement using the methods above and removing "novalidate" but I also need 2 or 3 product templates that are optional text to add to the cart. Your solution seems amazing but I am having trouble understanding how to create multiple liquids for each. (I also really appreciate this, I have searched for days with zero help other than being told to use a free app, i had no issue doing this before with my old theme but it's time to upgrade)

[trucranems]

So all of these changes are done through code, not the UI. So you have to go to Edit code under your store theme. Then find the files, copy the contents of the file and then there is an option to make a new file. Make a new file with the naming you want and copy the contents into it, then make the adjustments.