Product pages - Get customization information for products

Highlighted
Tourist
6 0 0
I have this exact issue, I managed to follow this tutorial and add forms to the Debut theme but the the I am using now (Debutify) seems to have that coding in the Snippets section as well, how can we go around this?
0 Likes
Tourist
6 0 0
Hmm... So I guess the fix to this should be creating another product-template.liquid on the Snippets section named product-customizable-template.liquid, then copying and pasting the code from the original template to the customizable one and changing the rendering name to the new template.liquid?
0 Likes
Highlighted
New Member
1 0 0
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>   
 
              
0 Likes
Highlighted
New Member
1 0 0

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?  

 

Screen Shot 2020-03-30 at 12.16.08 PM.png

 

Thanks

Kieran

0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 0 2

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.

0 Likes
Highlighted
New Member
2 0 0

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>
0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 0 2

@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 :)

0 Likes
Highlighted
New Member
1 0 0

Hello Bro,

 

I successfully added the customized field in my product page, using the code below:

 

<p class="line-item-property__field">
<label for="optional-enter-childs-name">Enter Child's Name - 12 Chars Max</label><BR />
<input id="optional-enter-childs-name" type="text" placeholder="12 characters max" name="properties[(Optional) Enter Child's Name]">
</p>

 

After adding this code, i can collect the information from mu customers already, i can find the content in my order page.

But the problem is , when i export the orders , i can't find this field in my excel. I wanna know how i can add the customized field to my export excel ?

0 Likes