Product pages - Get customization information for products

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

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.

• Sectioned themes
• Non-sectioned themes

[minniebox]

Hello, I am using the Debut theme and not finding the "submit" in my code to be able to add customization.  I also want to be clear on what info I am removing when added the new code under Sections.  Thank you!

[stratify]

Hi @minniebox it's tough to add a tutorial that works for every theme because every theme is different. I downloaded the most recent version of Debut, and I found the type="submit" in the "sections/product-template.liquid" theme file (within the Sections folder here):

For context, I can see that the product template is rendering two section files with the following code (within"layouts/product.liquid"):

{% section 'product-template' %}
{% section 'product-recommendations' %}


That's why I searched for type="submit" in the "sections/product-template.liquid" theme file 🙂

[coollyguy]

Hello,

I made it work on my product page and I can see the "Engraving" Section on my product page however, after receiving the order, I cant see it in my order details so I dont know where does this section locate to when customers fill it in. 

Can anyone help me with that as well ? 

P.s. I have done everything with the Carts and updated the necessary codes.

Best,

Abdulkadir

[stratify]

@coollyguy assuming the engraving option has been added to the product form correctly, and engraving information is provided before adding the item to the cart, the line item properties will show up in the Order screen (in the Admin > Orders section) under each item that has been "engraved" 🙂

[LobnaHegazy]

The fields were added successfully to the product and filled before checkout, however, I cannot see or access this data on the order page. Any help please?????

[DIZZYBEATSS]

Hi,

I just managed to follow the whole tutorial and it all works now. I only want to make the price change as well, is that possible?

So when you select another option, that the price changes with it?

Below a screenshot.

I really hope you can help me!!!!!

[Latidoshop]

Hello, on my previous page I used a free shopify template and it was very easy for me to carry out this guide, now it has changed templates and I have problems because I can't find the code to embed my customizable fields.
The code I use is

<form>

                  <p class="line-item-property__field">

  <label for="nombre-camiseta">Nombre camiseta</label>

  <input required class="required" id="nombre-camiseta" type="text" name="properties[Nombre camiseta]"></p>

See if you can tell me where I could put this code to view the custom fields in the cart

You can tell me where I could put this code to view the custom fields in the cart

Product customizable template

<!-- /sections/product-template.liquid -->

{%- assign enable_reviews = settings.enable_reviews -%}

{%- assign enable_swatches = settings.color_swatches -%}

{%- assign tab_1 = section.settings.page_tab_1 -%}

{%- assign tab_2 = section.settings.page_tab_2 -%}

{%- assign tab_3 = section.settings.page_tab_3 -%}

{%- comment -%}

Establish thumbnail grid

{%- endcomment -%}

{%- assign thumbnailLength = product.images | size -%}

{%- comment -%}

Hide if there are no variant images

{%- endcomment -%}

{%- assign thumbnailColumns = 'grid__item large--hide medium-down--hide' -%}

{%- if thumbnailLength == 1 -%}

{%- assign thumbnailColumns = 'grid__item large--hide medium-down--hide' -%}

{%- elsif thumbnailLength == 2 -%}

{%- assign thumbnailColumns = 'grid__item push--large--one-quarter large--one-quarter medium-down--one-half' -%}

{%- elsif thumbnailLength == 3 -%}

{%- assign thumbnailColumns = 'grid__item one-third' -%}

{%- elsif thumbnailLength > 3 -%}

{%- assign thumbnailColumns = 'grid__item one-quarter' -%}

{%- endif -%}

{%- comment -%}

Get first variant, or deep linked one

{%- endcomment -%}

{%- assign current_variant = product.selected_or_first_available_variant -%}

<style>.template-product { background-color: {{ section.settings.bg_color | default: '#fff' }}; }</style>

<section itemscope itemtype="http://schema.org/Product" data-section-type="product-template" data-section-id="{{ section.id }}" data-reviews="{{ enable_reviews }}" data-swatches="{{ enable_swatches }}" class="product-single wrapper product--{{ section.id }}">

<meta itemprop="name" content="{{ product.title }}">

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">

<meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

<div class="grid--full">

<div class="grid__item">

{%- if section.settings.show_breadcrumbs -%}

{%- include 'breadcrumbs' -%}

{%- endif -%}

<div class="grid">

<!-- Product Photos -->

<div class="grid__item product-images large--one-half text-center">

<div class="product-single__photos product-single__photos--{% if product.images.size > 1 %}slideshow{% else %}single{% endif %}" id="ProductPhoto">

{%- assign image_gallery = section.settings.image_gallery -%}

{%- assign image_gallery_class = '' -%}

{%- if image_gallery == 'zoom' -%}

{%- assign image_gallery_class = 'hover-zoom' -%}

{%- elsif image_gallery == 'lightbox' -%}

{%- assign image_gallery_class = 'mfp-zoom-in-cur' -%}

{%- endif -%}

<div class="product-images__slider" data-gallery="{{ image_gallery }}">

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

{%- assign image = featured_image -%}

{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}

{%- include 'theme-rias' -%}

<div class="product-images__slide" data-image-id="{{ image.id }}">

<div class="product-images__slide-placeholder" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}"></div>

<img class="{{ image_gallery_class }} productvarimg featured-image featured-image--{{ section.id }} lazyload"

{% if image_gallery == 'lightbox' %}

data-mfp-src="{{ image.src | img_url: '2048x' }}"

{% elsif image_gallery == 'zoom' %}

data-zoom="{{ image.src | img_url: '2048x' }}"

{% endif %}

data-src="{{ image_url_pattern }}"

data-widths= "[{{ image_widths }}]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

data-object-fit="contain"

alt="{{ image.alt | escape }}">

<span class="loader"></span>

<noscript>

<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}" class="{{ image_gallery_class }} productvarimg featured-image featured-image--{{ section.id }}" id="{{ image.id }}">

</noscript>

</div>

{%- assign featured_image_id = featured_image.id -%}

{%- for image in product.images -%}

{%- if image.id != featured_image_id -%}

{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}

{%- include 'theme-rias' -%}

<div class="product-images__slide" data-image-id="{{ image.id }}">

<div class="product-images__slide-placeholder" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}"></div>

<img class="{{ image_gallery_class }} featured-image featured-image--{{ section.id }} lazyload"

{% if image_gallery == 'lightbox' %}

data-mfp-src="{{ image.src | img_url: '2048x' }}"

{% elsif image_gallery == 'zoom' %}

data-zoom ="{{ image.src | img_url: '2048x' }}"

{% endif %}

id="{{image.id}}"

data-src="{{ image_url_pattern }}"

data-widths= "[{{ image_widths }}]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

data-object-fit="contain"

alt="{{ image.alt | escape }}">

<span class="loader"></span>

<noscript>

<img src="{{ image.src | img_url: '2048x' }}" alt="{{ image.alt | escape }}" id="{{ image.id }}" class="{{ image_gallery_class }} featured-image featured-image--{{section.id}}"> 

</noscript>

</div>

{%- endif -%}

{%- endfor -%}

</div>

</div>

<!-- Product Thumbnails -->

{%- if product.images.size > 1 -%}

<div id="ProductThumbs">

<div class="product-images__thumbs{% if product.images.size > 1 %} product-images__thumbs--slideshow{% endif %}">

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

{%- assign image = featured_image -%}

{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}

{%- include 'theme-rias' -%}

<div class="product-images__thumbs-slide">

<div class="product-images__thumbs-slide-img">

<img class="product-single__thumbnail lazyload"

data-src="{{ image_url_pattern }}"

data-widths= "[{{ image_widths }}]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

data-object-fit="cover"

alt="{{ image.alt | escape }}">

<span class="loader"></span>

<noscript>

<img src="{{ image | img_url: 'original' }}" alt="{{ image.alt | escape }}" class="product-single__thumbnail lazyload">

</noscript>

</div>

</div>

{%- assign featured_image_id = featured_image.id -%}

{%- for image in product.images -%}

{%- if image.id != featured_image_id -%}

{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}

{%- include 'theme-rias' -%}

<div class="product-images__thumbs-slide">

<div class="product-images__thumbs-slide-img">

<img class="product-single__thumbnail lazyload"

data-src="{{ image_url_pattern }}"

data-widths= "[{{ image_widths }}]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

data-object-fit="cover"

alt="{{ image.alt | escape }}">

<span class="loader"></span>

<noscript>

<img src="{{ image.src | img_url: 'original' }}" alt="{{ image.alt | escape }}" class="product-single__thumbnail"> 

</noscript>

</div>

</div>

{%- endif -%}

{%- endfor -%}

</div>

</div>

{%- endif -%}

</div>

<!-- Product Description -->

<div class="grid__item large--one-half product-description-wrapper {% if section.settings.text_alignment == 'text-center' %}text-center{% else %}text-left{% endif %}">

{%- if section.settings.enable_vendor -%}

<p class="product-vendor">{{ product.vendor }}</p>

{%- endif -%}

<h1 class="product-title" itemprop="name">{{ product.title }}</h1>

{%- if enable_reviews or settings.enable_yotpo and settings.yotpo_ID != '' -%}

              <div class="product__badge">

                {%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}

                  <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>

                {%- elsif enable_reviews -%}

                  <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

                {%- endif -%}

              </div>

            {%- endif -%}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

<meta itemprop="priceCurrency" content="{{ shop.currency }}">

<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<!-- Product Form Snippet -->

{%- include 'product-form' -%}

</div>

</div>

</div>

</div>

</div>

</section>

<script type="application/json" id="ProductJson-{{ section.id }}">

{{ product | json }}

</script>

<script type="text/javascript" async>

document.addEventListener('DOMContentLoaded', function(event) {

window.product = {{ product | json }};

window.product.money_format = "{{ shop.money_format }}";

window.product.add_label = {% if product.options.size == 1 %}true{% else %}false{% endif %};

window.product.label = "{{ product.options.first | escape }}";

window.selectCallback = PaloAlto.onVariantSelected;

});

</script>

<div> 

</div>

              {% if section.settings.enable_payment_button %}

              </form>

              <form>

              <p class="line-item-property__field">

  <label for="numero-camiseta">Numero camiseta</label>

  <input id="numero-camiseta" type="text" name="properties[Numero camiseta]">

</p>

              </form>   

[KieranL]

Hi

With reference to the below step, the Themes templates section isn't showing on the product page. I have no ability to select the template. Do you know why that would be?  

Thanks

Kieran

[stratify]

Hi everyone,

I'm sorry to say we can't guarantee this tutorial will work out of the box. Every theme is different and requires tweaking to integrate customizations. That's why the original post starts with this:

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

There's a good chance your theme's JavaScript will need to be updated to work with additional inputs on the product page. For example, the disabled variant selectors when uploading a file is a javascript function that's checking each input as they change and updating the selectors based on that input. If you're not familiar with javascript or how to debug it, I'd highly suggest reaching out to a Shopify Expert who can integrate each input into your theme 🙂

@KieranL I believe your issue – missing the "Templates" option in the Products section of the Admin – can be answered here.

[andrew_threlfal]

Thank @stratify - I understand that each theme is different. Is there a fundamental reason that a variant button is changed to "disabled" once the File Upload option is used? I have checked the page coding pre and post File Upload and the only change is that the Variant Button setting is turned to Disabled? I can see no trigger in any code in either templates, snippets etc that would cause the change based on the File Upload code used in the tutorial.

<input type="radio" checked="checked" value="Black" data-index="option1" name="Colour" class="variant__input-4602577649750" id="ProductSelect-4602577649750-option-colour-Black" disabled="">
<label for="ProductSelect-4602577649750-option-colour-Black" class="variant__button-label disabled">Black</label>

[stratify]

@andrew_threlfal it's tough to say without diving into the theme.js file in more depth. You could try opening a new Forum post for Expert help. My best guess is that the theme.Product object checks the availability of each variant when inputs change. It's probably checking the input for an attribute that does not exist, and as a result it's defaulting to the variant not being available. You'll need to update the function that checks for each variant's availability, and tell it to ignore the new input. I hope that helps! If not I would highly suggest reaching out to a Shopify Expert for help 🙂

[B_R-25]

Hello and thanks for your tutorial!

I have a problem finding the {{ line.title }}, i can only find on my template  {% assign line_title = line.title %} or

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

I never modified email template so it's standart format.

Anyone can help?

Thanks

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.
5. Repeat these steps for any other email notifications that you want to include line item properties.

[Consult_MLE]

Hi there. I'm using the Prestige theme with a drawer style cart, and I've gone through the tutorial to have a line item property on the product page as a custom text field. I have the text field showing on the product page, but when I add the item to the cart, I do not see the line item property showing in the drawer.  I added it to the cart-items.liquid file because this is the only file I can find that contains "item.product.title".

I've added the code snippet from the tutorial to the cart-items.liquid file, but when I test the line item property by entering text, I still do not see it in the cart. Am I missing something? Does the code need to be adjusted for the Prestige theme? Appreciate the help!

[techshopper]

One of the big problems is that a Shopify admin isn't able to see the customized text when they are trying to refund an item from an order. This becomes a big problem if an order contains multiple of the same product but with different customized text. When the admin is in the Order detail view, they can see both products with the customized text. If they then click on the Refund button, they are taken to a view where it lists each product so the admin can state which is to be refunded but on this screen, the customized text isn't shown.

The URL for this page is:
[shopify store address]/admin/orders/[order id]/refund

Is there anyway to change or update this?

[LuckyPennyPress]

Thank you for this INCREDIBLY helpful tutorial that did exactly what I needed it to. I do have one question:

Is there a way to have a customization box pop up *only * when a certain variant option is selected?

For example, to have a " CUSTOM MESSAGE" box pop up *only* if the customer has selected the "ADD MESSAGE" option for the product, and, to have multiple customizations available for different variants.

Thank you very much in advance for all of your help.

Adeline

[PaulNewton]

Is there a way to have a customization box pop up *only * when a certain variant option is selected?

If javascript is disabled or your theme always redirects(refreshes) the page when a variant is selected simply check the variant logic and display those options.

If product information updates without a page refresh you would want to modify your themes javascript, depending on theme this can be complex.

Though if your theme is using deep linking to variants in the urls (i.e. /productname?variant=1234567890) you could just watch for when the url changes and show those options for that variants ID. Remember to use unique CSS class names for different hidden html for each variant.

There are also apps that automatically handle this for product options

[LuckyPennyPress]

Thank you Paul!

[JessicaWaters]

Where you say to look for "type=submit" in product-customizable-template.liquid, its no where.

I cant find this code anywhere to input new code above it. help?

[mybranddesigner]

To begin - thank you for this tutorial. 

SOS HELP! 🙂

Theme: Narrative

Progress: I have inputted the form fields into product-template-2.liquid and tested it and inputs do not carry over to Check out page. There is no "submit" button code anywhere in this file. 

I inputted the fields into 'product.customizable.liquid' because thats where the add to cart code is located. Form still does not show when added to cart or at check out. 

Should I manually add a "submit" button to 'product-template-2.liquid' after the <form></form> code? Would that make for 2 buttons on the page (which i definitely don't want) or should I move the "add to cart" script to 'product-template-2.liquid' instead of it being on the snippet page 'product.customizable.liquid' ?

for the NARRATIVE theme, please direct me to what line the submit button is located under which template or section. I manually combed through the code after doing a search for submit with no results found. 

[DIZZYBEATSS]

Hi! I am using Narrative theme, and I found the “submit” in the default product.liquid (or product-form.liquid you just need to look around a bit)
Hope I’ve helped you!

[mybranddesigner]

Hey, thank you so much for helping me out with this! 

I added the form the to the code right above the submit button code.

Given that it's in a snippet and cant assign a specific product to a snippet in a template, I created a new template and within that code, I changed the section name to what the snippet name ... 

Thought I was doing the right thing IFTT thinking. 

But then when I went to save and refresh, my product page comes up like this:

What did I do wrong? 

[mybranddesigner]

Hey! Could you screenshot the code (on the product page) that you were able to get the fields to work when a customer places an order? I've been able to get the fields on the product page, but the responses don't get attached to the cart/check out page. 

[Chetankm]

Hi.

Thank you for all the tips.  I have been able to add a Text=Short Form field in the product page.  However anything typed in the form does not come in the confirmation email after the order is placed.  How can this be resolved.

Thanks

Chetan

[mushroom20]

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 customisations with different details
for example I have used this to add a name & a message but would like to create customisation for another product to add a different request such as style or colour

[ttc123]

I've added the coding to my Brooklyn theme and I got to 'Apply your new template to a product' step 3. but could not get the fields to appear on my product pages: 

I can't see where in 'Apply your new template to a product' step 3. Theme templates section was to apply the new template to a product. Help?

[Marc1878]

Hi, 

I've managed to follow this tutorial and its worked how I wanted it to, and I can access the uploaded images from the customers.  However when they complete the order it shows another upload box. I'm not sure how this has happened and hiding the line item for the uploaded customer image doesn't get rid of it either. I appreciate any help on how I can get rid of this showing up on the order complete page. 

Thanks 

[RayGIII]

Can you screenshot the lines of code that you used to get the upload box?

[billionaireice]

I am having trouble with my customization product templates. It shows up for the first variant but disappears for the rest. This is required for my customers, how do I make it appear for all variants?

[sehajdeep]

Hi, 

This is awesome.

For whatever reason I am unable to create a test order, but I am curious if I add this property field, fr example in my case I want to have email address associated with a product, once the order is placed where will I as an admin be able to see the email address that the buyer entered on the product page? will it be in the additional information area?

[Orit]

Hello @TyW , 

Are you offering a privet service to make this customization in the Shopify site?

Since there are changes in the Shopify temple and I'm not a programmer I wonder if it's possible to get you or one of your team to create it on my site. 

Please, let me know if you're offering a privet service I'll be glad to hear from you and I will explain exactly what I need. 

If yes, can you please reach me at  -boolly@gmail.com, and please let me know here your name so I'll know to recognize you in my email's traffic. 

Thank  you, 

Dana

[Tracy14]

Hi 

Thank you for such an easy to use tutorial. I am a complete novice to this and found it very straight forward.

However I have an issue. All of the products I will be selling will have completely different personalisation requirements. If I follow your instructions they change the product-template.liquid and it puts the personalisation field exactly were I want it. But if I go to create new product templates I get a screen that looks like below:

{% comment %}

The contents of the product.liquid template can be found in /sections/product-template.liquid

{% endcomment %}

{% section 'product-template' %}

{% section 'product-recommendations' %}

Which is linked to product-template.liquid the only way I can workout to put in the new personalisation fields is putting it just under  {% section 'product-template' %} this then puts the personalisation field under the item description and once added to cart it doesn't show the required personalisation as it does by doing via product-template.liquid.

I hope this makes sense I suspect its me missing something.

Many Thanks

[mtbielen]

Thank you for the tutorial. I am trying to add the customization to the email template. I have 4 line properties for my products. When I add the following code to the templates, all my line properties show us as one line (ie -Line 1: xxxx -Line 2: xxxx -Line 3: xxxx😞 

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

 How do I break the line properties in the email to show across multiple lines. For example:

-Line 1: xxxx

-Line 2: xxxx

-Line 3: xxxx

Thanks,

Michelle

[miriamc]

I too am wondering about breaking lines apart when the UI Element is text box - long. If I enter multiple lines of text with a line break, the Cart shows it as one continuous line, no breaks.

---

@mtbielen wrote:

Thank you for the tutorial. I am trying to add the customization to the email template. I have 4 line properties for my products. When I add the following code to the templates, all my line properties show us as one line (ie -Line 1: xxxx -Line 2: xxxx -Line 3: xxxx😞 

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

 How do I break the line properties in the email to show across multiple lines. For example:

-Line 1: xxxx

-Line 2: xxxx

-Line 3: xxxx

Thanks,

Michelle

---

I get:

Line 1 Line 2 Line 3

[ChristinOlivia1]

I got the notes box to work in my products! Im not very tech savvy so I feel on top of the world. 😉  So, thank you! However, I only want this option for some of my products. Its currently under all of them. I have attempted to play around with were the code is or isnt in my coding work... can you help? Thanks! 

[alloramanila]

Hi, good day!

I've got zero knowledge on coding but with your guide, I was able to successfully include the field for product customization.  

One thing I noticed though is the field of quantity disappeared and it is something that I need as clients may opt not to choose this.  Attached is the before and after screenshot. AfterBefore

May I know how to put it back?

To make it more challenging (for me!), is it possible that if the customer chose "no name" that the Personalized Nameplate field isn't showing?  And it'll only show if the customer chooses from the personalized dropdown option say stainless steel?

nameplate 

Many thanks!

[Tracy14]

Hi

I am sorry I never even noticed that ;-( I don't know how to resolve it but
when I go to my basket I can adjust the quantity still.

If you do find out please let me know because I am a complete novice to
this too..
Many Thanks

[alloramanila]

Will let you know. Hope someone can enlighten us on this 😊

[markagondez9]

Hi Community Manager,

Just need clarification on this post. I'm trying to set up a store where customers can insert files (picture) for customizable jewelry. 

"If you create a form field input with type="file", ..."    Where can you create that? I don't see that option in Shopify UI Generator. 

Also, you mentioned "If the form in your product-template.liquid contains a file upload field, the form tag in your customizable product template must have the attribute enctype="multipart/form-data"." I don't see this option in my product template nor section. Does that mean I cant set this up on the current template I am using(Which is Debutify 2.02)? If so can you recommend any other free theme where I can set this up? 

I really appreciate your help on this. Thank you much. 

[GoodGrief]

Do you offer this as a service?  If so, I am interested. If not, what should I type in the search to find an expert who does?

[LuckyNigam]

Hi @GoodGrief ,

I'm interested to work on this functionality. For more details you can contact us on slack https://chatterboxlab-pmm4919.slack.com/#/

[Spotgirl]

This is very helpful. I have a question, if there is an additional price charged say for engraving, how do i reflect that so that the values add once they add to cart. Our store sells books and we provide an additional price if they would like their book tagged with a translation. I have managed to add the product customizable to reflect on my page now i want to add in a price. Thank you

[nwaPLASMA]

Wow, you just saved me a monthly subscription to an app. This worked perfectly. I now have a "special instruction/customization" box on select items. Thanks!!!!!

[w-works]

Thank you. This worked (using Boundless theme) for our purposes (pre-order with limited availability for an item and quantity countdown tied to total sold vs. by variant so, cannot use built in variant capabilities), but one issue - if running a pre-order campaign, this info is not picked up for reporting (e.g., pre-order for a limited edition t-shirt runs with total of only 100 total available; the pre-order sells out, but we can't then run a report that shows us how many t-shirts we'll need to order in each variant (in this case, size) so, while helpful, also NOT in this instance).  

[Wasif3]

@TyW 

Hey ,

I am using turbo 5.0 theme and I am following all the codes but when I select custom option on product page and when they goes to cart page they are not showing me on cart page

can you please help me

Thanks for your support

[Ealiel]

Hi. For turbo theme you have to modify product.form under snippet and not product template. It's written in turbo documentation. So, you have to create a new snippet called "product-form-custom"  and copy and past product-form code. So you can add , above type:"submit" add to cart the line code. Then you have to open product-template-custom and modify 

{% unless collection_handles contains 'coming-soon' %}
{% include 'product-form-liquid-custom' with 'product' %}
{% include 'product-notify-me' %}
{% endunless %}

Sorry form my Italian-English.

Guido

[Crimbo]

Hi everyone!

Does Shopify compress and change the format of the uploaded image? We are finding that images uploaded in CYMK seem to be converted to RGB.

Cheers

[Meljplank]

I am having trouble with this. I believe I followed all of the steps correctly, and the product page looks good. 

My two issues:

1. There is no sort of enter or submit button on the product page for the customer to click when they have finished entering their NOTES in the text box. It's hard to tell if the customer's custom info is actually being entered or submitted to in any way to me. 

2. I am finding no evidence that the information entered into this new NOTES box is getting to me. I have tried a few trial purchases myself and none of the notes I have entered in this box have made it to the order review on my admin page in any form. Where is this information being collected and how can I see it? 

Thank you for your help!

-Melanie

[RepWorld]

I've done it!
I HAVE BLOODY DONE IT!!

I'm not completely IT illiterate, but I have never worked with codes. Currently is process from switching to shopify from another provider.

And I have done it!! 🙂 🙂 🙂

[OGrandt]

It won't work on my Site.

I've created a new Template for the Product as described.

In the Frontend I can see the Changes.
But when I submit a product, it will not POST any properties information to my Cart.

The created input is in the cart form and everything looks great, but it will not work 😞

can anyone help me?

[LPippen]

How do you get the new property to show in the Quick View?  Customers are able to add the items to the cart without the required customization if they click on Quick View.