Product pages - Get customization information for products

TyW
Community Manager
451 63 1206

You can collect customization information for products using line item properties. Line item properties are custom form fields that you can add to the product page, allowing customers to make choices or add information about a product. For example, if you offer product engraving, then you can use line item properties to let customers enter the text that they want engraved on the product.

 

custom01.jpg

 

Tip: Line item properties are different from order notes and cart attributes. Order notes, which are available in every free Shopify theme, let you capture special instructions on how to prepare and deliver an order. Cart attributes are specified by customers on the cart page, and are used to record additional information about an entire order.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 279 (279)
stratify
Shopify Staff (Retired)
20 2 13

I'm happy to help! Every theme is different and therefore has a specific structure that should be followed. The reason you're seeing specific elements within elements is because most Shopify themes follow the BEM (Block, Element, Modifier) naming convention, which is very helpful for scaffolding reusable theme files and elements. You can always add your own CSS styles to whatever elements you'd like! But it's best to follow the existing CSS/HTML structure, to avoid styles overlapping and causing some unexpected, hair-pulling frustration...

To learn more visit the Shopify Help Center or the Community Blog.

andrew_threlfal
Visitor
3 0 0

Not really a CSS question, however having successfully added the file upload functionality to a specific product template, it now then blocks out the variant options once a file is selected to upload. Not sure what/why this is triggered. I have moved the upload file option lower down the page to hopefully get user to make selections, however it is frustrating that once a file is uploaded, the variant options are then not available to be altered. https://www.catfishdesigns.com.au/products/greatnessheatherteels

kezder
Visitor
1 0 0

are you able to see the pictures that were uploaded

hdesh
Visitor
1 0 0

Hello there, did you find a solution for this. I am having the same issue

B_R-25
Shopify Partner
65 1 6

Hello,

thanks for your tutorial, 

I have problem finding the {{ line.title }}, I can find only {% assign line_title = line.title %} or I can find {{ line_title }} in this line below

<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

I never changed the email template so it's standard format.

Anyone can help?

 

Thank You

Show customizations in email templates

 

 

You can optionally also display line item properties in email notifications. This will let customers see their product customizations when they receive an email about their order.

 

  1. From your Shopify admin, go to Settings > Notifications.
  2. Click the name of the notification template that you want to add line item properties to.
  3. Find the following code:

    {{ line.title }}

    Replace it with:

    {{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

     

  4. Click Save.

Repeat these steps for any other email notifications that you want to include line item properties.

nybrob
Visitor
1 0 0

Hi!

I added an input field where the customer can upload a file. But where does the file end up once they have placed the order? I can't seem to find the files they have uploaded. 

Thanks!

Sshimm
Visitor
3 0 0

Hi. i also have the same question. where does the file that is uploaded by my customer will saved to? in our domain? because i have use this for quite sometime and my domain disk space is getting bigger and bigger, and i cant find the file. anyone can help?

CFFATHOME
Visitor
2 0 3

I have successfully got this to work with a few tweaks on Venture theme...

 

However, i need the additional info given by the customer to appear on the order confirmation email which is sent to us as this is what we pick our orders from.

 

Can anyone help and tell me how i pull this information through to those emails? 

 

Thanks

Theriion
Excursionist
33 0 8

Hi there,

Im struggling a little bit with this. Can someone please help me? 

I am using Brooklyn theme and Im kind of stuck at the step with editing cart. 

 

So its working ok at the product page and all, but once order is placed there is nothing in the cart or in the order notes. 

 

Update item quantity fields in the cart

Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:

  1. From your Shopify admin, go toOnline Store>Themes.
  2. Find the theme you want to edit, and then clickActions>Edit code.
  3. In theTemplatesdirectory, clickcart.liquid.
  4. Find any input tag that has an name value ofupdates[{{ item.id }}].
  5. Change the full name value toname="updates[]".
  6. Repeat these steps for anyinputtag incart.liquidthat has an name value ofupdates[].
  7. ClickSave.

I cant find my way around this. Please have a look at my code and maybe you can help ? 

 

 

<!-- /templates/cart.liquid -->
{% comment %}

  For info on test orders:
    - General http://docs.shopify.com/manual/your-store/orders/test-orders
    - Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments

{% endcomment %}
<div class="grid">
  <div class="grid__item large--five-sixths push--large--one-twelfth">
    {% if cart.item_count > 0 %}
      <header class="section-header text-center">
        <h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
        <hr class="hr--small">
      </header>

      <form action="{{ routes.cart_url }}" method="post" novalidate class="cart">

        <div class="cart__row medium-down--hide cart__header-labels">
          <div class="grid--full">
            <div class="grid__item large--two-fifths push--large--three-fifths">
              <div class="grid--full">
                <div class="grid__item one-third medium-down--half text-center">
                  {{ 'cart.label.quantity' | t }}
                </div>
                <div class="grid__item two-thirds medium-down--half text-right">
                  {{ 'cart.label.total' | t }}
                </div>
              </div>
            </div>
          </div>
        </div>

        {% comment %}
          Loop through products in the cart
        {% endcomment %}
        {% for item in cart.items %}
          <div class="cart__row">
            <div class="grid--full cart__row--table-large">

              <div class="grid__item large--three-fifths">
                <div class="grid">

                  <div class="grid__item one-third">
                    <a href="{{ item.url | within: collections.all }}" class="cart__image">

                      {% comment %}
                        More image size options at:
                          - http://docs.shopify.com/themes/filters/product-img-url
                      {% endcomment %}
                      <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                    </a>
                  </div>

                  <div class="grid__item two-thirds">
                    <a href="{{ item.url }}" class="h4 cart__product-name">
                      {{ item.product.title }}
                      
                      
                      
                      
                      
                      
                      
                      {% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}
                      
                      
                      
                      
                      
                    </a>
                    {% unless item.variant.title contains 'Default' %}
                      <p class="cart__product-meta">
                        {{ item.variant.title }}
                      </p>
                    {% endunless %}

                    {% if settings.product_vendor_enable %}
                      <p class="cart__product-meta">{{ item.vendor }}</p>
                    {% endif %}

                    {% assign property_size = item.properties | size %}
                    {% if property_size > 0 %}
                      {% for p in item.properties %}
                        {% assign first_character_in_key = p.first | truncate: 1, '' %}
                        {% unless p.last == blank or first_character_in_key == '_' %}
                          {{ p.first }}:

                          {% if p.last contains '/uploads/' %}
                            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                          {% else %}
                            {{ p.last }}
                          {% endif %}

                          <br>
                        {% endunless %}
                      {% endfor %}
                    {% endif %}

                    <p class="cart__product-meta">
                      
                      
                      
                      
                      
                      <a href="/cart/change?line={{ forloop.index }}&quantity=0">
                      	 
                        
                        
                        
                        
                        
                        {{ 'cart.general.remove' | t }}
                      </a>
                    </p>
                  </div>

                </div>
              </div>

              <div class="grid__item large--two-fifths cart__pricing">
                <div class="grid--full cart__row--table{% if item.line_level_discount_allocations != blank %} cart__row--table-with-discount{% endif %}">

                  <div class="grid__item one-third text-center">

                    <label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
                    <input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">

                  </div>

                  <div class="grid__item two-thirds text-right">

                    {%- if item.original_line_price != item.final_line_price -%}
                      <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                      <del class="cart__price">{{ item.original_line_price | money }}</del>
                      <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
                      <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
                    {%- else -%}
                      <span class="cart__price">{{ item.original_line_price | money }}</span>
                    {%- endif -%}

                    {%- if item.unit_price_measurement -%}
                      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
                      <span class="cart__unit-price">
                        {%- capture unit_price_separator -%}
                          <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
                        {%- endcapture -%}
                        {%- capture unit_price_base_unit -%}
                          {%- if item.unit_price_measurement.reference_value != 1 -%}
                            {{- item.unit_price_measurement.reference_value -}}
                          {%- endif -%}
                          {{ item.unit_price_measurement.reference_unit }}
                        {%- endcapture -%}

                        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
                      </span>
                    {%- endif -%}

                    {%- if item.line_level_discount_allocations != blank -%}
                      <ul class="order-discount order-discount--list order-discount--title order-discount--cart-list" aria-label="{{ 'customer.order.discount' | t }}">
                        {%- for discount_allocation in item.line_level_discount_allocations -%}
                          <li class="order-discount__item">
                            <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                          </li>
                        {%- endfor -%}
                      </ul>
                    {%- endif -%}

                  </div>
                </div>
              </div>

            </div>
          </div>
        {% endfor %}

        <div class="cart__row cart__row--last">
          <div class="grid--full cart__row--table-large">
            {%- comment -%}
              Optional, add a textarea for special notes
                - Your theme settings can turn this on or off. Default is on.
                - Make sure you have name="note" for the message to be submitted properly
            {%- endcomment -%}
            {% if settings.cart_notes_enable %}
            <div class="grid__item large--seven-twelfths cart__note-container">
              <div class="cart__note">
                <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
                <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
              </div>
            </div>
            {% endif %}

            <div class="grid__item large--five-twelfths text-center large--text-right{% if settings.cart_notes_enable %} cart__subtotal-container{% else %} push--large--seven-twelfths{% endif %}">
              {%- if cart.cart_level_discount_applications != blank -%}
              <div class="grid--full cart__row--table">
                <div class="cart__discounts">
                  {%- for discount_application in cart.cart_level_discount_applications -%}
                    <span class="order-discount order-discount--title order-discount--cart">
                      <span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
                    </span>
                    <span class="order-discount order-discount--cart">-{{ discount_application.total_allocated_amount | money }}</span>
                  {%- endfor -%}
                </div>
              </div>
              {%- endif -%}
              <div class="grid--full cart__row--table">
                <div class="grid__item one-half large--two-thirds large--text-center">
                  <p class="cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
                </div>
                <div class="grid__item one-half large--one-third">
                  <p class="cart__subtotal">{{ cart.total_price | money }}</p>
                </div>
              </div>

              {%- capture taxes_shipping_checkout -%}
                {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
                  {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                {%- elsif shop.taxes_included -%}
                  {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
                {%- elsif shop.shipping_policy.body != blank -%}
                  {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                {%- else -%}
                  {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
                {%- endif -%}
              {%- endcapture -%}

              <p class="rte"><em>{{ taxes_shipping_checkout }}</em></p>
              <button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
              <button type="submit" name="checkout" class="btn cart__checkout">
                {{ 'cart.general.checkout' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span>
              </button>

              {% if additional_checkout_buttons and settings.cart_type != 'drawer' %}
                <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
              {% endif %}
            </div>
        </div>

      </form>

    {% else %}
      {% comment %}
        The cart is empty
      {% endcomment %}
      <header class="section-header text-center">
        <h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
        <hr class="hr--small">
        <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
        <p class="cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t: link: routes.all_products_collection_url }}</p>
        <p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
      </header>

    {% endif %}
  </div>
</div>

I would greatly appreciate any help.

 

 

Kind regards

Theriion

 

Joy_Redmond
Visitor
2 0 0

Hi, I've followed your advice but unfortunately, the feature of choosing either product.liquid template or product.customizable.liquid on the product page doesn't work and now all products are showing the customization.
Secondly, I only want to show the customization if they select a particular variant of which there are 2 or 3. Is this possible?Screenshot 2020-05-03 at 18.35.54.png

mnam_klara
Visitor
2 0 1

Hello, thank you so much for the guide. I have used it to create the customized box made of multiple pieces and customer can choose 5-12 preferred products in the box. However, I have one visual issue that I am not able to remove. Check it here: https://mnambox.sk/products/tvoj-vlastny-mnambox.

My problem is that the checkbox and the text are in two different lines, no matter how long the name is.

 

Could you help me to manage this please?

Thanks!

Kunndi
Visitor
2 0 0

Hi,
I am trying to do this with the Supply Theme.  Everything else works, but I don't see this {{line.title}} in my notifications section at all.  Any ideas?

in "Show Customizations in email templates," I don't see the following code:

  1. {{ line.title }}
    to Replace with:

    {{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

 

There's only one line.title found:
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}


Thanks!

PaulNewton
Shopify Partner
6274 573 1319

@jonas9495 If you have predefined width*height just make width & height your variant option titles.

Meaurement based pricing is much more advanced and typically needs your product data in the admin setup a certain way and advanced theme customization. More complicated if you want to accept any input from users.

 

Beyond that You will want to research the forums for stuff like "food,units,grams,weight based products",etc, though if you are in germany look for unit based selling in the help docs

 

@Kunndi 

 

in "Show Customizations in email templates," I don't see the following code:

There's only one line.title found:
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}

Look for where line_title is used instead of line.title and place your code there.

If both are not present for some reason you will need to experiment with line location to get your desired output.

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Kunndi
Visitor
2 0 0

@PaulNewton ,
Thanks for the response.  I found the line_title, just like you suggested. 
One thing (double checking) though:

I changed the 'line.title' in the recommended code to 'line_title' - if i understood what was going on here:

<span class="order-list__item-title">{{ line_title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %} × {{ line_display }}</span><br/>

 

(the help documentation said to use line.title in the line above, but based on the reassignment of that variable, I put line_title..

 

Did I do that correctly?  Am I able to test this on myself, possibly, with a fake purchase?

 

PaulNewton
Shopify Partner
6274 573 1319

@Kunndi 

I changed the 'line.title' in the recommended code to 'line_title' 

....

Did I do that correctly?  Am I able to test this on myself, possibly, with a fake purchase?

Yes you got it code in forums and docs are general reference that needs to be updated to match what's actually present.

To test it:

https://help.shopify.com/en/manual/checkout-settings/test-orders

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


AndromedaEyes
Tourist
6 0 8

Hello 🙂

 

I am using the Prestige theme, and I did finally find the true="submit" code and pasted the generated code above it. 

 

I didn't find it under product-customizable-template.liquid but rather under the cart-template.liquid. 

 

It seems to work, as the box appears and the desired measurements showed up in a test order. However there are products that won't require it, but I guess because I pasted it into the cart code, its now going to show up on every single product I list, regardless if it requires input from the customer or not.

 

Is there a way for me to fix this? I don't really want to leave the box up there, as it can confuse my customers and just looks unfinished and unprofessional.

 

Thank you!

 

 

Najwa
Visitor
1 0 0

How do I export WITH custom fields that i have added? 

YMOfans
Visitor
1 0 0
Thanks very much, this help me a lot. I have got customization information for product pages. However, because the theme I use is brooklyn, which has a "featured product" part in its homepage. When I select the product which can display customization information note in its product page to be the "featured product", the customization information note hasn't appear. Do you know what's helpful for this problem? Thanks again.
kieranp4
Visitor
2 0 0

Hi!

 

I was able to successfully add the engraving option using the below code as provided in the tutorial and it shows on the correct products. However after testing I still do not see the text that customers type for customization on the orders, it comes through as a standard blank product. I looked everywhere for answers, hope someone has a quick fix here!

 

<p class="line-item-property__field">
<label for="type-your-engraving here">Type Your Engraving Here!</label>
<input id="type-your-engraving here" type="text" name="properties[Type Your Engraving Here!]">
</p>

 

Is there another step that I need to take? I am using the minimal theme if that helps. Thanks!

 

Kieran

PaulNewton
Shopify Partner
6274 573 1319

@kieranp4 if it's required add the 'required' attribute to the fields so it's never blank

The Shopify UI Elements Generator has that option.

 

If that doesn't work test getting rid of the exclamation mark(!) it shouldn't effect anything but /shrug

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


kieranp4
Visitor
2 0 0

@PaulNewton  Hi! Thanks for the response. I don't necessarily need it to be required, but I am having an issue when a customer types in their name to the engraving text box, it doesn't show on the cart, checkout, or even on the order on the customer's end and on our end receiving the orders, the product just comes through as a blank ordered item. 

I tried doing the 'show line items in cart' codes from this article, but nothing showed up still. Any ideas?

 

Thanks!!! 

 

Kieran

StinaNystrom
Visitor
1 0 1

Hi - very helpful, thank you. I have added a custom engraving field, but want it to be at an extra cost. What would be the best way to do this?

PaulNewton
Shopify Partner
6274 573 1319

@StinaNystrom Line Item Properties do not change the price.

 

Either bake the price into products or use variant options so there's a version with engraving.

You'll need to know CSS and possibly javascript if you want to also hide the engraving input when the non-egraved option is selected.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


JaimeRose
Visitor
1 0 0

Hi there,

I’m with Minimal theme. I’ve added customisation on my product but it will not show up in cart even after adding in code that was recommended here. 
Please help me

nokbient
Visitor
1 0 0

How would I go about adding the inputted information to an exported order CSV? Currently the information is only available on the order page on Shopify order page, but not visible in the CSV.

Thanks!

ChristinOlivia1
Tourist
4 0 1

Thank you! I got the products note field to work so someone can customize! Now...how/where do I place another generator code if I want to create another add in field for customization for different products. For example, one product might have "your name here" and another may have "your aircraft platform here." 

 

Thanks!

SoyStories
Excursionist
12 0 5

@TyW i have followed this step by step and it still doesnt show the options chosen from checkboxes in the car, i am using narrative. Are you able to help please

ElisabethYashar
Visitor
1 0 0

Thanks for the info it has worked well for one of my products. However, I would also like to know how to create these for multiple products with multiple customizations with different details. For example, I have used this to add a name & a message but I would like to create a customization for another product to add a different request such as style or color

lisavcain
Visitor
1 0 0

This was very helpful - I added a form field to a product, and I was wondering how it works if you want to have different form fields for different products? Can I just make a second copy of the product.liquid template and call it something different?

Thanks!

Tracy14
Tourist
5 0 0
Hi lisavcain,



Yes every form will need a different name and you need to link both the
template and sections every time.

for example, I create the form in sections calling it *product-m12-m12-m12*
then when I go to template, I select the *product* option and call it
*-m12-m12-m12* go in to the form and edit the section that says *{% section
'product-template' %}* to say *{% section 'product—m12-m12-m12' %}* then
save.

I have loads of personalisation options on my products so try to keep it
simple so I under stand what they mean. So *m* would be message *12* would
be the amount of characters maximum so the above product has 3 lines to add
messages to of 12 characters per line.

I hope this makes sense I am very new to this myself their maybe an easier
way to do it but this is the only way I know.

Good luck and if I can help any further please don’t hesitate to ask!

Regards

Trace
thestoragestore
Visitor
2 0 0

This tutorial is super helpful and I've managed to put the form fields onto my product page and then get it to pull through to the cart using the code below on the product page was enough, I didn't have to update the cart code for it to work. However, it's pulling through the information twice in the cart page - once in the title of the product and once underneath. If I add the underscore before the field to prevent it from pulling the information through then this works and it only shows up once, but it shows up with an underscore before the description. I'm not sure what I'm doing wrong! HELP!!

 
<form>
          <p class="line-item-property__field">
  <label for="wording-separate-multiple-entries-with-a-comma">Wording (separate multiple entries with a comma)</label>
  <textarea id="wording-separate-multiple-entries-with-a-comma" name="properties[Wording (separate multiple entries with a comma)]"></textarea>
</p>
       
      <p class="line-item-property__field">
  <label>Choose a font </label>
  <select required class="required" id="choose-a-font" name="properties[Choose a font ]">
            <option value="Font 1">Font 1</option>
            <option value="Font 2">Font 2</option>
            <option value="Font 3">Font 3</option>
            <option value="Font 4">Font 4</option>
            <option value="Font 5">Font 5</option>
            <option value="Font 6">Font 6</option>
  </select>
</p>
          
          <p class="line-item-property__field">
            <label>Choose a font colour</label>
            <select required class="required" id="choose-a-font-colour" name="properties[Choose a font colour]">
            <option value="Black">Black</option>
            <option value="White">White</option>
            <option value="Rose gold">Rose gold</option>
            <option value="Silver gloss">Silver gloss</option>
            <option value="Silver matt">Silver matt</option>
            <option value="Gold matt">Gold matt</option>
  </select>
</p>
        
w-works
Excursionist
15 0 10

Can anyone advise how to add customization information to packing slip (was able to add to order confirmation emails without issue, but cannot figure out how to add to packing slip - ideally, before SKU line) Thanks! 

binky
Visitor
2 0 0

Thank you so much for this. Works like a charm to get my required, standard text input field in but... it replaced the quantity picker? Using Debut theme and it's as if there are a fixed number of form elements it's allowing. Add one, the other goes away.

So, when I remove the new required field, the quantity picker returns?

If anyone has any ideas, let me know. Going mad here lol...

binky
Visitor
2 0 0

Actually, nevermind. Solved the issue and super smooth now. Thx!

Bruh
Visitor
1 0 0

How do I export my custom form field with CSV?

 

Is there a way I can add the new data fields I made to the CSV that I can export from Orders -> Export?

acs49
Visitor
2 0 0

Whenever I add this code, it removes the quantity. Why?

acs49
Visitor
2 0 0

Okay, I'm dumb - I figured it out 🙂 

swinbank1992
Visitor
1 0 3

I know this thread is quite old, so not sure i'll get a reply to this. 

I'm sooooo close. So, I have followed the step by step guide and the personalised text boxes are showing and when I do a test order it comes through to me when I select "add to cart", however when I do a test run and select "Buy Now" it doesn't pull through the personalisation text.

Can someone help please?

Thanks

Emma

Aneby
Excursionist
20 0 2

Hi @TyW 

Couple of issues that I'm experiencing (1. is the same as Emma above me). 

1. The code is correctly forcing the customer to enter personalisation text when selecting 'add to cart' - but not when selecting 'buy it now'. Is there an easy fix for this? 

2. When added to cart, the personalisation default text is being added to the product title (highlighted yellow below). Again, if anyone has an easy fix to remove this, it'd be much appreciated.

Other than that, what a fantastic tutorial - thank you so much for your time!  

 Image8.JPG

 

Regards
Stephanie

mohangpt
Visitor
1 0 1

I have created an app which uses line item properties to get additional data from user, I hide them using "_" but this is not working in some themes on theme store. these are public themes and should support. for example Icon theme.

SlateAvenue
Visitor
2 0 0

I'm using the free "Supply" theme and I was able to add a field to the Product page to collect personalized product text.  However, the code to show it on the shopping cart is not working.  Does anyone know if there is something different for the Supply theme?

 

Alidavaha
Visitor
1 0 1

Does anyone know how to get the personalization field to show up in the Shopify Packing slip? TIA!

 

TealDreams
Tourist
8 0 4

I have spent an entire day trying to figure this out. I have the Dawn theme. There is NO product.liquid page. I have tried everything but I need a custom form on my page and a custom radio button option. The way I have choices for my crochet, means there are a large variety of color combinations, but there aren't actually ANY variants available. When I put the color options, say for something with two colors, they have to pick each one, this would make many variants. But I do not want any variants, just the ability for them to pick a color, two colors, or other information depending on the product.

however on the Dawn theme nothing I have tried works.

alarconatelier
Excursionist
16 0 5

Hi guys!

I figured it out how to add that to Dawn Theme.

 

First you create a new Section called "product-customizable-template". Just erase all the code, and copy and paste all the content from "main-product.liquid".

 

Then, if you need the content of the form to show on the product cart page, use this tutorial to add the proper code to the product-customizable-template, instead of the one in the first page of the forum.

 

Then you should create a new Template based on "product" , select JSON option and call it "customizable". Then find the code "main-product" and change it to "product-customizable-template".

 

Then you can select this on "Product Model" on each product page that you want the custom field.

 

I hope it works for you all.

 

Tutorial link> https://github.com/Shopify/dawn/pull/509

Wilksie81
Visitor
2 0 1

In the create custom form fields section.. I set my form field, but when it says copy the generated code and past in the product.liquid file, I’m between the <form> and </form> Tags, I can’t find that section.

is that in the template are  of the new one we added before?? Or in the section area?? 
either way I can’t find it to paste?? 

tsBrtnybtch
Visitor
2 0 0

https://community.shopify.com/c/wholesale-and-dropshipping/galleria-theme-3-0-file-upload-is-not-wor...

 

I'm editing the latest theme file for Galleria for a file upload option inside a product page but I am having a hard time as some of the templates I needed like product - is in product.json and I cannot do the [section %  'product-template' to 'product-customizable-template'] 

tsBrtnybtch_0-1644294465317.png

 

 

I needed a required upload file in product page for my jewelry collection. The sections look like this:

 

tsBrtnybtch_1-1644294465211.png

 

There is no /product.liquid but /main-product.liquid

DogPoundApparel
Visitor
1 0 0

Thank you so much, it worked!

AvinLW
Visitor
1 0 0

hey there, need some help... i've customized everything and it's all working, product loads the custom field, it captures and is displayed at check out, order forms captured the data, but, i can't seem to get that information to be captured in the notification. could you help me out here? 

As per your instructions, i only manage to locate line.title in this part of the notification

{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}

which must I replace in order to pull that data into the notification e-mail?

HayKat
Visitor
1 0 0

Do you need an app to apply the the customizable theme?  I am trying to apply this through the site and there are no codes under the template "product.customizable.liquid"