Shopify themes, liquid, logos, and UX
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.
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
Sectioned themes
You can install a free or paid product customization app from the Shopify App Store to easily add custom fields to your product page.
You can edit your theme's code by creating an alternate product page template that includes custom form fields, or line item properties. You can then apply your new template to any product for which you want to collect customization information from customers.
To create a new product page template:
customizable
:product.liquid
template called product.customizable.liquid
. The new file will open in the code editor.{% section 'product-template' %}
Replace it with:
{% section 'product-customizable-template' %}
product-customizable-template
. Click Create section. Your new file will open in the code editor.product-template.liquid
file (in the Sections directory), and paste it into your new product-customizable-template file.You can add as many custom form fields to your product page as you need. You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your cart page. This tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.
To add custom form fields to your template:
product-customizable-template.liquid
.type="submit"
in the file. This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the form fields for your product customization:To make the new form fields appear on product pages, you need to set your customizable products to use the new product-customizable-template.liquid
template that you created.
To apply a template to a product:
product.customizable
from the Product template menu.The custom form fields that you created will now appear on that product's page. Repeat the steps to enable the template on multiple products. You can use the bulk editor to enable your template on many products at once.
If you create a form field input with type="file"
, then the customer's browser will show a file upload button for that form field. As a store owner, you can view any files that your customers upload. Letting customers upload files allows for some creative store ideas — like printing customer artwork onto canvas or accepting custom graphics to print on clothing.
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"
.
Note: File uploads will work only on a page style cart, and are not compatible with cart drawers or cart popups. To change your cart style, go to the theme editor.
If your theme doesn't display customizations in the cart, then you can add some code to either your cart-template.liquid
, or your cart.liquid
file to check for line item properties and display them if they exist.
To show product customization information in the cart:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then open the Templates directory and click cart.liquid
.{{ item.product.title }}
. On a new line below, paste the following code:{% 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 %}
This code checks each line item to see if it has any line item properties, and displays them if they exist.
Any links that remove items from your cart will need to be updated to work with custom line item properties:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then open the Templates directory and click cart.liquid
.a
tag that has an href
value starting with /cart/change.
href
value to href="/cart/change?line={{ forloop.index }}&quantity=0"
.a
tag in cart-template.liquid
that has an href
value starting with /cart/change
.Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then open the Templates directory and click cart.liquid
.input
tag that has a name
value of updates[{{ item.id }}]
.name
value to name="updates[]"
.input
tag in cart-template.liquid
that has a name value of updates[]
.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.
{{ line.title }}Replace it with:
{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
Line item properties that you have built into your customizable product templates are visible on your product pages and, if you have customized your cart code, on your cart page as well. Line item properties are also visible on the checkout page. There might be times when you do not want a line item property to be visible to the customer, for example, if you want to attach some internal information (such as a bundle ID or tracking number) to a product.
If you want a line item property to be hidden on the cart or checkout pages, then you can place an underscore _
at the beginning of its name
value. For example, the name
value for an internal Bundle ID might look like this:
name="properties[_bundle_id]"
If you did not use the code in this tutorial to show line item properties (or customizations) in the cart, then your theme code might not include the code that keeps line item properties with name values beginning with an underscore hidden. To modify your theme code to hide line item properties in the cart, you can add the following lines of code to your cart-template.liquid
or cart.liquid
file:
{% assign first_character_in_key = p.first | truncate: 1, '' %} {% unless p.last == blank or first_character_in_key == '_' %}
The results should look similar to this:
{% 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 %} {% endunless %} {% endfor %} {% endif %}
Line item properties will only be visible to customers during checkout if they are stored as a string. Numbers will be hidden, though they will still be tied to the order and show up in the Admin > Orders screen. For example:
line_item_prop: "1234"
(will be visible on the Order and during checkout)line_item_prop: 1234
(will be visible on the Order and hidden during checkout)For context, this was introduced as a feature because line item properties were often used to store IDs which were not intended to be customer-facing. So theme developers can hide line item properties during checkout by storing them as an integer or a string with an underscore at the beginning.
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
You can install a product customization app from the Shopify App Store to easily add custom fields to your product page.
You can edit your theme's code by creating an alternate product page template that includes custom form fields, or line item properties. You can then apply your new template to any product for which you want to collect customization information from customers.
To create a new product page template:
customizable
:product.liquid
template called product.customizable.liquid
.
You can add as many custom form fields to your product page as you need. You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your cart page. This tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.
To add custom form fields to your template:
product.customizable.liquid
.type="submit"
in the file. This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the form fields for your product customization:To make the new form fields appear on product pages, you need to set your customizable products to use the new product.customizable.liquid
template that you created.
To apply a template to a product:
product.customizable
from the Product template menu.The custom form fields that you created will now appear on that product's page. Repeat the steps to enable the template on multiple products. You can use the bulk editor to enable your template on many products at once.
If you create a form field input with the attribute type="file"
, then the customer's browser will show a file upload button for that form field. As a store owner, you can view any files that your customers upload. Letting customers upload files allows for some creative store ideas — like printing customer artwork onto canvas or accepting custom graphics to print on clothing.
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"
.
Note: File uploads will work only on a page style cart, and are not compatible with cart drawers or cart popups. To change your cart style, go to the theme editor.
If your theme doesn't display customizations in the cart, then you can add some code to your cart.liquid
file to check for line item properties and display them if they exist.
To show product customization information in the cart:
cart.liquid
.{{ item.product.title }}
. On a new line below, paste the following code:{% 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 %}
This code checks each line item to see if it has any line item properties, and displays them if they exist.
Any links that remove items from your cart will need to be updated to work with custom line item properties:
cart.liquid
.a
tag that has an href
value starting with /cart/change
.href
value to href="/cart/change?line={{ forloop.index }}&quantity=0"
.a
tag in cart.liquid
that has an href
value starting with /cart/change
.
Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:
cart.liquid
.updates[{{ item.id }}]
.name="updates[]"
.input
tag in cart.liquid
that has an name value of updates[]
.
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.
{{ line.title }}
{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
Repeat these steps for any other email notifications that you want to include line item properties.
Line item properties that you have built into your customizable product templates are visible on your product pages and, if you have customized your cart code, on your cart page as well. Line item properties are also visible on the checkout page. There might be times when you do not want a line item property to be visible to the customer, for example, if you want to attach some internal information (such as a bundle ID or tracking number) to a product.
If you want a line item property to be hidden on the cart or checkout pages, then you can place an underscore _
at the beginning of its name
value. For example, the name
value for an internal Bundle ID might look like this:
name="properties[_bundle_id]"
If you did not use the code in this tutorial to show line item properties (or customizations) in the cart, then your theme code might not include the code that keeps line item properties with name values beginning with an underscore hidden. To modify your theme code to hide line item properties in the cart, you can add the following lines of code to your cart-template.liquid
or cart.liquid
file:
{% assign first_character_in_key = p.first | truncate: 1, '' %} {% unless p.last == blank or first_character_in_key == '_' %}
The results should look similar to this:
{% 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 %} {% endunless %} {% endfor %} {% endif %}
Line item properties will only be visible to customers during checkout if they are stored as a string. Numbers will be hidden, though they will still be tied to the order and show up in the Admin > Orders screen. For example:
line_item_prop: "1234"
(will be visible on the Order and during checkout)line_item_prop: 1234
(will be visible on the Order and hidden during checkout)For context, this was introduced as a feature because line item properties were often used to store IDs which were not intended to be customer-facing. So theme developers can hide line item properties during checkout by storing them as an integer or a string with an underscore at the beginning.
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
I think this is a very nice tutorial for what I would like to do.
However there is no
type="submit"
in my files:
product-customizable-template.liquid product.customizable.liquid
Maybe Shopify has changed since this tutorial and I will have to find this somewhere else?
Edit: I found it in the "Snippets" directory, in the "product-info.liquid" file
That appears to be old code, try searching for this instead:
<button type="submit" name="add" id="AddToCart"
hi everyone !
How can i do for get multiples files in my orders ?
I followed the tutorial and failed to find the "submit" section too initially. Later I found this was because I did not paste correct code into the new "product-customizable-template".
Which means, to correctly follow this:
Delete all of the default code so that the file is empty. Copy all of the content from your product-template.liquid file (in the Sections directory), and paste it into your new product-customizable-template file.
-Delete all the code from "product-customizable-template" (in the Section folder).
-Find the "product-template.liquid" from the Section Folder. Note: this file from Section folder NOT the Template folder we created earlier.
-Find the "submit" keyword, press "Command+F" to find it.
I hope that helps.
I use motion and found it in snippets too. But now it applies the custom option for all products. How do I adjust products for those that show show custom options vs. those that should not?
Hi there!
I am also not able to find the type="submit". Are you able to explain how you did it? I would really appreciate it, thank you!
i did not had this either, you can try to add it elsewhere in your code, it will change the position of the input box.
Thank you for this tutorial--it was very helpful and solved a problem. However when I apply these changes, while functionally it works, the newly added fields to not align properly. Do you have an easy to follow recommendation on how to ensure these line up properly?
As another commenter mentioned, there was no [type="submit"] in my particular theme code. I did find the button code and added it above that block of code. It did add the needed fields in the general area, but the already existing Size drop down is throwing the alignment off.
hi everyone !
How can i do for get multiples files in my orders ?
thank's
Did you ever work out how to do this?
I could not find the "submit" or "button" words in my code. I tried pasting the generated code in a few places but would not work. Any ideas?
type="submit"
may not live in the product template directly. It often lives within one of the snippet files that the product template is using.
{% render ‘snippet name’ %}
To learn more visit the Shopify Help Center or the Community Blog.
Can someone update the code as this is not updated to work and the comments are still not working for me. Thank you!
I am using debuity theme and having problems implementing this feature. Can anyone shed some light on this?
I am using debutify theme and haveing problems implementing this. Is there a tutorial specific for debutify theme?
I have been able to get this work however one issue i cant solve is getting the custom text box to show on the home page when I add the product as a featured product. Then the custom text box doesn't show even though it does show on the actual product page. Any suggestions?
How did you get it to work? I can't find the right place to paste the code.
Hi, were you able to figure this out? I have the same problem
Hi,
Thanks for the tutorial, I was able to add a customised input box. Now I have a problem with using the input. I tried doing {{item.properties}} to access that information. But it does not have anything. Can you please advice?
Hello, I tried to follow the tutorial
But it seems like my custom field isn't mandatory as I want it to be, because I can add it to the card without filling it
and something else is I cannot see the custom field text line in the "Cart" section
Could someone please help me ?
This is where I put my lines
<div class="product__content-main">
<div class="product__description rte" itemprop="description" class="rte">
{{ product.description }}
</div>
<div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product__form-wrapper">
<div class="product__form-item">
<label for="votre-prenom">Votre prénom</label>
<input required class="required" id="votre-prenom" type="text" name="properties[Votre prénom]">
</div>
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
@Saeadamas If I have free time i'll take a glance what is your theme,store, and storefront password if applicable.
Have you made sure the elements you've added are inside either an html <form> or liquid {% form %}?
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
@PaulNewton wrote:@Saeadamas If I have free time i'll take a glance what is your theme,store, and storefront password if applicable.
Have you made sure the elements you've added are inside either an html <form> or liquid {% form %}?
Thank you so muchj Paul, me theme is "Narrative" and my password is "reffah"
I do think so, I didn't find a <form> So I inserted the text near " Product Form & Description"
That's the product I have a problem with
https://saeadamas.com/products/collier-en-diamant-incruste-avec-nom-arabe-personnalise
The text Custom Field isn't mandatory, and I cannot see the text I filled in the Cart
Problem - form <input> elements outside of form
Solution #1
In your product template find the relevant <form> html tag or the liquid {% form %} tag , may vary by theme or template.
Before the relevant closing </form> html tag, or {%endform%} liquid-tag, cut and paste your <input> , and any surrounding or associated elements such as <labels> from the improper location into the form tags.
Solution #2 Advanced
If you are only supporting HTML-5 compliant browsers and need the inputs to not have a <form> ancestor (be inside a html form) consider using the html5 input attribute "form"
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
Note: Internet Explorer has no support for this attribute, check for others browsers support https://caniuse.com/#feat=form-attribute
Example - if the forms id is "product_form_12345678901234" then to associate an input to a form using the value of that forms ID attribute:
<input form="product_form_4613396496456" properties=[Your first name] />
<input required="" form="product_form_4613396496456" class="required" id="votre-prenom" type="text" name="properties[Votre prénom]"> <form id="product_form_4613396496456"> ..... </form>
Liquid - In shopify themes the ID is commonly initially generated in liquid with 'product_form_{{product.id }}', or {{product.selected_or_first_available_variant}}
Javascript - The form id or input attributes may also be update with javascript in some themes.
Note: input controls not in a form can be hard to pinpoint as they pass html validators like https://validator.w3.org/
the following CSS snippet can be use to quickly find such form controls:
/* outline form controls in red */ input, select, textarea { outline: 6px dotted red !important; } /* not outline form controls that are descendents of a <form> element */ form input, form select, form textarea { outline: 6px dotted green !important;}
@Saeadamas This code
<input required="" class="required" id="votre-prenom" type="text" name="properties[Votre prénom]">
Is not inside the rendered form , it is outside of it so it does not get submitted with the form when the user clicks add to cart
<form method="post" action="/cart/add" id="product_form_4613396496456" accept-charset="UTF-8" class="product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product">
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Thank you so much for the complete answer Paul, being extremely new to coding I only understood half of what you said.
Do you think you can tell me, if my line codes are outside the "form"
Thank you again 🙂
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
{%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}
<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ featured_media | img_url: 'grande' }}">
{% comment %}
------------------------------------------------------------------------------
Product Featured Media
------------------------------------------------------------------------------
{% endcomment %}
<div class="page-width page-width--no-gutter">
{% assign variant_media_ids = '' %}
{%- unless product.has_only_default_variant -%}
{% for variant in product.variants %}
{% assign variant_media = variant.featured_media %}
{%- if variant_media -%}
{%- if variant_media_ids contains variant_media.id -%}
{% continue %}
{%- endif -%}
{% assign variant_media_ids = variant_media_ids | append: variant_media.id | append: ' ' %}
{% assign featured = false %}
{%- if featured_media == variant_media -%}
{% assign featured = true %}
{%- endif -%}
{% include 'product-preview-image' with media: variant_media, featured_media: featured, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endif -%}
{% endfor %}
{%- endunless -%}
{% unless featured_media and variant_media_ids contains featured_media.id %}
{% include 'product-preview-image' with media: featured_media, featured_media: true, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endunless -%}
{% include 'shopify-xr-button' %}
</div>
{% comment %}
------------------------------------------------------------------------------
Product Form & Description
------------------------------------------------------------------------------
{% endcomment %}
<div class="product__content page-width">
<div class="grid">
<div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
<div class="product__content-header">
{% if section.settings.show_vendor %}
<span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
{% endif %}
<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
<p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">
<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>
<span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>
{% include 'product-unit-price', variant: current_variant %}
</p>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
</div>
<div class="product__content-main">
<div class="product__description rte" itemprop="description" class="rte">
{{ product.description }}
</div>
<div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product__form-wrapper">
<div class="product__form-item">
<label for="votre-prenom">Votre prénom</label>
<input required class="required" id="votre-prenom" type="text" name="properties[Votre prénom]">
</div>
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
{% include 'product-form' %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper small--hide">
<div class="product__share">
{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% comment %}
------------------------------------------------------------------------------
Product Share Buttons
------------------------------------------------------------------------------
{% endcomment %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper product__share-wrapper--mobile medium-up--hide">
<div class="product__share">
{% include 'social-sharing', type: 'mobile', share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
{% comment %}
------------------------------------------------------------------------------
Product Media Gallery
------------------------------------------------------------------------------
{% endcomment %}
{%- if product.media.size > 1 -%}
{% comment %}
If we are hiding variant media which are displayed at the top of the
page, then find total number media not set as a variant media or as the
featured media.
We need the total number of media to be displayed so that we know what
arrangement the media need to be positioned in, i.e. rows of 3 or 2
media.
{% endcomment %}
{%- if section.settings.hide_variant_media -%}
{% assign variant_media_ids_array = variant_media_ids | split: ' ' %}
{% assign total_media = product.media.size | minus: variant_media_ids_array.size %}
{%- else -%}
{% assign total_media = product.media.size %}
{%- endif -%}
{% comment %}
Insert images into rows of 3 and/or 2 depending on the total number of
images.
{% endcomment %}
{% assign total_modulus = total_media | modulo: 3 %}
{% if total_media == 1 %}<div class="page-width">{% endif %}
<div class="product__submedia-list product__submedia-list--r{{ total_modulus }}{% if total_media == 1 %} product__submedia-list--single{% endif %}">
{% for media in product.media %}
{% unless variant_media_ids contains media.id and section.settings.hide_variant_media %}
{% capture data_image %}
data-parent-fit="cover"
{% endcapture %}
{% include 'product-preview-image' with media, featured_media: false, gallery_type: 'submedia', data_image: data_image %}
{% endunless %}
{% endfor %}
</div>
{% if total_media == 1 %}</div>{% endif %}
{% endif %}
{% comment %}
------------------------------------------------------------------------------
Product Slideshow
------------------------------------------------------------------------------
{% endcomment %}
{% unless product.media.size == 0 %}
<div class="product-slideshow{% if product.media.size == 1 %} product-slideshow--single{% endif %} critical-hide" data-product-slideshow data-media-group aria-hidden="true">
<button class="product-slideshow__close btn btn--clear btn--square" tabindex="-1" data-product-slideshow-close>{% include 'icon-close' %}</button>
<div class="product-slideshow__content">
<div class="product-slideshow__slide-list slider" data-product-slider>
{% for media in product.media %}
{%- capture product_media_wrapper_class -%}
product-slideshow__slide slider__slide{%- if forloop.first %} slider__slide--active {%- endif -%}
{%- endcapture -%}
{% include 'media' with media,
section_type: 'slideshow',
parent_fit: 'contain',
featured_media: true,
data_image: 'data-product-slideshow-image',
product_media_wrapper_class: product_media_wrapper_class,
product_media_wrapper_data: 'data-product-slideshow-slide',
image_class: 'fade-in'
%}
{% endfor %}
</div>
{% include 'shopify-xr-button' %}
{% unless product.media.size == 1 %}
<div class="product-slideshow__controls">
<button class="product-slideshow__arrow product-slideshow__arrow--previous btn btn--secondary btn--square"
tabindex="-1"
data-product-slideshow-previous>
{% include 'icon-arrow-left' %}
<span class="visually-hidden">{{ 'general.pagination.previous' | t }}</span>
</button>
<button class="product-slideshow__arrow product-slideshow__arrow--next btn btn--secondary btn--square"
tabindex="-1"
data-product-slideshow-next>
{% include 'icon-arrow-right' %}
<span class="visually-hidden">{{ 'general.pagination.next' | t }}</span>
</button>
<div class="product-slideshow__slide-select-list">
{% for media in product.media %}
<button class="product-slideshow__slide-select {% if forloop.first %} product-slideshow__slide-select--active{% endif %}" tabindex="-1" data-product-slideshow-select="{{ forloop.index0 }}">
<span class="visually-hidden">{{ 'sections.product_template.slide' | t: number: forloop.index }}</span>
</button>
{% endfor %}
</div>
</div>
{% endunless %}
</div>
</div>
{% endunless %}
{% comment %}
------------------------------------------------------------------------------
Product Data
------------------------------------------------------------------------------
{% endcomment %}
<script type="application/json" data-product-json>
{{ product | json }}
</script>
<script type="application/json" data-model-json="{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
</div>
When pasting code there is an "insert code" formatting button, please avoid pasting very big files, and files in their entirety that belong to a theme.
The keyword here is form if you have a similar issue be sure to look in all related included snippets|files inside the product template for the relevant form tags
Fortunately I knew what to look for with ctrl+f so didn't have to read that whole thing 😉
You've been putting the line item properties in the product page template, aka the PDP, but not in the product form itself which is a snippet:
{% include 'product-form' %}
Move your code into that file, using my previous solution steps looking for <form... or {%form.. type tags
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Oh ok I'm Sorry.
So I did move my Code lines on the right section as you directioned me, but now unfortunately I cannot see the Custom Field on my product page anymore
@Saeadamas looked at your site and the code location is unchanged, you may need to reread the directions and find the right location or use the form attribute method.
Goodluck
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Hi Paul, could you assist on how to have my 3 options to be on the same line? Also, I would like the dropdown box background colour to be #000000 with the words in #FAEBD7. Thank you in advance!
Screenshots:
Code:
<p class="line-item-property__field"> <label>Canned Cocktail #1</label><br> <select required class="required" id="canned-cocktail-1" name="properties[Canned Cocktail #1]"> <option value="Orh Huey">Orh Huey</option> <option value="Ju Hua">Ju Hua</option> <option value="Espresso Martini">Espresso Martini</option> <option value="Skittles">Skittles</option> <option value="White Sangria">White Sangria</option> <option value="Red Sangria">Red Sangria</option> </select> </p> <p class="line-item-property__field"> <label>Canned Cocktail #2</label><br> <select required class="required" id="canned-cocktail-2" name="properties[Canned Cocktail #2]"> <option value="Orh Huey">Orh Huey</option> <option value="Ju Hua">Ju Hua</option> <option value="Espresso Martini">Espresso Martini</option> <option value="Skittles">Skittles</option> <option value="White Sangria">White Sangria</option> <option value="Red Sangria">Red Sangria</option> </select> </p> <p class="line-item-property__field"> <label>Canned Cocktail #3</label><br> <select required class="required" id="canned-cocktail-3" name="properties[Canned Cocktail #3]"> <option value="Orh Huey">Orh Huey</option> <option value="Ju Hua">Ju Hua</option> <option value="Espresso Martini">Espresso Martini</option> <option value="Skittles">Skittles</option> <option value="White Sangria">White Sangria</option> <option value="Red Sangria">Red Sangria</option> </select> </p>
@GeraldLee that's a design issue separate from the customization you'll want to make a different post in the design forum for extended structural andlstyling help.
.line-item-property__field {
display:block; width: 32%;
color: #FAEBD7; }
.line-item-property__field select option {
background-color: #000000;
}
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
I followed this guide to get customization information for products on my product page, but i'd like to get it working on my home page as well.
Is there any way to do this? Thank you in advance for your help!
Paul,
I am trying to implement this on a sectioned site using the Supply theme, and it has no effect at all.
This is the code I have:
<p class="line-item-property__field" {
display: block;
width: 32%;
}
What am I missing from this?
I also have a list of checkboxes generated by the UI elements generator that looks terrible on the actual page...
https://www.agreeableagony.com/collections/rope/products/custom-color-mfp-rope?variant=2944678110833...
I am struggling to find the right search terms to just go look up the flags and their implementations.
How would you like the dropdowns to look "visually", and also what do you mean about "flags"? Are you only trying to display certain line-property options base on product tags?
The underscore trick is not working for items added to POS cart - line item properties show in the POS cart as well as the customer receipt which is not acceptable. Is there an equivalent workaround here?
@Filljoy wrote:The underscore trick is not working for items added to POS cart - line item properties show in the POS cart as well as the customer receipt which is not acceptable. Is there an equivalent workaround here?
Could you try this with double __ underscores on the LIP's , otherwise you may want to try those techniques with cart attributes instead though you'll want to add either the variant id or the line_item key hash
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Is it possible to create different forms to apply to different products?
I have added all these code and it is working perfectly. But when I added calculator builder for calconic app then it was not showing my customization information in cart & order page. Before adding this app it was working perfectly. How can I solve these issue?
Hi,
We are using the Warehouse theme, and we want to do customize products for specific products on our website.
But, we can't edit the code because the tutorial is different from ours.
Is there any possibility that you can do the tutorial of the Warehouse theme?
Thanks
We are also using Warehouse, and cannot get further either....
Thank you.
Chalotte
I am having this same issue. How can I make the field the same size as the "Size" field in the example picture provided?
@anywilldo the form inputs that you add to the product template are styled with CSS classes. You'll need to add the right class
from your existing theme to the new inputs if you want them styled the same. Every theme is different, so I can't provide a blanket answer here, but you can see what classes and styles are being used within your existing product template, or within your browser's developer tools. Here's a beginner's guide for web developers on changing the webpage with CSS where you can inspect the class
of the existing form elements.
If that's a little too advanced, I'd suggest reaching out to a Shopify Expert who can ensure the line item properties are properly coded, stored on each order and styled with the rest of your theme 🙂
To learn more visit the Shopify Help Center or the Community Blog.
THANK YOU @stratify ! I was able to accomplish what I need with the following butttt I don't understand why I have to have the product-form__item class at the div level and the product-form__input at the object level (select and input). Is there a cleaner way to do this? I'm using the Debut 16.4.0 theme
<div class="product-form__controls-group">
<div class="selector-wrapper product-form__item">
<label for="options"</label>
<select id="options" name="properties[Options]" required class="required product-form__input">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<div class="selector-wrapper product-form__item">
<label for="line1"></label>
<input id="line1" type="text" name="properties[Line 1]" maxlength="11" class="product-form__input required" required placeholder="Line 1">
</div>
<div class="selector-wrapper product-form__item">
<label for="line2"></label>
<input id="line2" type="text" name="properties[Line 2]" maxlength="11" class="product-form__input" placeholder="Line 2 (optional)">
</div>
</div>
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024