How can I move a custom text box above the 'add to cart' button?

Store Design
1

I created a custom template and followed the steps to add the following code for a custom text box on a product page. When I add the additional code to the template.liquid page, (the one shown below) it adds the Text box to the very bottom of the page, and all the way to the left. I would like it up above the add to cart button. I am unsure how to move it. Thank you in advance.

<p class="line-item-property__field">
  <label for="Name">Name</label>
  <input  id="Name" type="text" name="properties[Name]">
</p>

Here is a link to the preview version of the page.

https://tpnltjz7z9cmk0j2-27816099913.shopifypreview.com/products_preview?preview_key=8ce45901291d699bc29cf335d6c471d2

1 Like
2

@jpack84

https://ui-elements-generator.myshopify.com/pages/line-item-property

1 Like
3

That is the site where i got the code for. When i add it into the liquid template, it shows up on the bottom as shown in the photo

Screenshot (8)_LI.jpg
Screenshot (8)_LI.jpg964×1032 106 KB

1 Like
4

@jpack84

Yes, please add your code below price code that’s it

1 Like
5

Ive tried a few different spots where i think you are talking about but have had no luck. . Does it go in the Template or the sections file? Here is a copy of the code for the Template. I am new to this coding stuff so sorry if im confusing you at all.

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section ‘product-customizable-template’ %}
{% section ‘product-recommendations’ %}
{% if collection %}

{% include 'icon-arrow-left' %} {{ 'products.product.back_to_collection' | t: title: collection.title }}
{% endif %}

{% assign current_variant = product.selected_or_first_available_variant %}

1 Like
6

@jpack84

can you please share full product page code so i will update

1 Like
7

F<div class=“product-template__container page-width”
id=“ProductSection-{{ section.id }}”
data-section-id=“{{ section.id }}”
data-section-type=“product”
data-enable-history-state=“true”
data-ajax-enabled=“{{ settings.enable_ajax }}”

{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = ‘1024x1024’ -%}
{%- assign product_image_scale = ‘2’ -%}
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}

{% case section.settings.media_size %}
{% when ‘small’ %}
{%- assign product_media_width = ‘medium-up–one-third’ -%}
{%- assign product_description_width = ‘medium-up–two-thirds’ -%}
{%- assign height = 345 -%}
{% when ‘medium’ %}
{%- assign product_media_width = ‘medium-up–one-half’ -%}
{%- assign product_description_width = ‘medium-up–one-half’ -%}
{%- assign height = 530 -%}
{% when ‘large’ %}
{%- assign product_media_width = ‘medium-up–two-thirds’ -%}
{%- assign product_description_width = ‘medium-up–one-third’ -%}
{%- assign height = 720 -%}
{% when ‘full’ %}
{%- assign product_media_width = ‘’ -%}
{%- assign product_description_width = ‘’ -%}
{%- assign height = 1090 -%}
{%- assign enable_image_zoom = false -%}
{% endcase %}

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

{%- for media in product.media -%}
{% include ‘media’, media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}

{% capture product_image_size %}{{ height }}x{% endcapture %} {{ featured_media.alt }}

{% assign first_3d_model = product.media | where: “media_type”, “model” | first %}

{%- if first_3d_model -%}
<button
aria-label=“{{ ‘products.product.view_in_space_label’ | t }}”
class=“product-single__view-in-space”
data-shopify-xr
data-shopify-model3d-id=“{{ first_3d_model.id }}”
data-shopify-title=“{{ product.title | escape }}”
data-shopify-xr-hidden

{% include ‘icon-3d-badge-full-color’ %}{{ ‘products.product.view_in_space’ | t }}

{%- endif -%}

{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}

{% if enable_thumbnail_slides == true %} {% include 'icon-chevron-left' %} {{ 'sections.slideshow.previous_slide' | t }} {% endif %} {% if enable_thumbnail_slides == true %} {% include 'icon-chevron-right' %} {{ 'sections.slideshow.next_slide' | t }} {% endif %}
{% endif %}

{{ product.title }}

{% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
{% comment %} The contents of the product.liquid template can be found in /sections/product-template.liquid {% endcomment %}

{% section ‘product-customizable-template’ %}
{% section ‘product-recommendations’ %}
{% if collection %}

{% endif %}

{% assign current_variant = product.selected_or_first_available_variant %}

Name

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- 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 -%}
{%- endif -%}

{% capture “form_classes” -%}
product-form product-form-{{ section.id }}
{%- unless section.settings.show_variant_labels %} product-form–hide-variant-labels {% endunless %}
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form–payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form–variant-sold-out {%- endif -%}
{%- endcapture %}

{% form ‘product’, product, class:form_classes, novalidate: ‘novalidate’, data-product-form: ‘’ %}
{% unless product.has_only_default_variant %}

{% for option in product.options_with_values %}
{{ option.name }}
{% endfor %}
{% endunless %}

{% if section.settings.show_quantity_selector %}

{{ 'products.product.quantity' | t }}
{% endif %}
{{ 'general.accessibility.error' | t }} {% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
{% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} {% include 'icon-spinner' %} {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}
{% endform %}

{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}

{%- comment -%}
Live region for announcing that the product form has been submitted and the
product is in the process being added to the cart
{%- endcomment -%}

{{ 'products.product.loader_label' | t }}

{{ product.description }}

{% if section.settings.show_share_buttons %}
{% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}

{% unless product == empty %}

{% endunless %}

{% schema %}
{
“name”: {
“da”: “Produktsider”,
“de”: “Produktseiten”,
“en”: “Product pages”,
“es”: “Páginas de productos”,
“fi”: “Tuotesivut”,
“fr”: “Pages de produits”,
“hi”: “उत्पाद पेज”,
“it”: “Pagine di prodotto”,
“ja”: “商品ページ”,
“ko”: “제품 페이지”,
“nb”: “Produktsider”,
“nl”: “Productpagina’s”,
“pt-BR”: “Páginas de produtos”,
“pt-PT”: “Páginas de produtos”,
“sv”: “Produktsidor”,
“th”: “หน้าสินค้า”,
“zh-CN”: “产品页面”,
“zh-TW”: “產品頁面”
},
“settings”: [
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: {
“da”: “Vis antalsvælger”,
“de”: “Mengenauswahl anzeigen”,
“en”: “Show quantity selector”,
“es”: “Mostrar selector de cantidad”,
“fi”: “Näytä määrän valitsin”,
“fr”: “Afficher le sélecteur de quantité”,
“hi”: “मात्रा चयनकर्ता दिखाएं”,
“it”: “Mostra selettore quantità”,
“ja”: “数量セレクターを表示する”,
“ko”: “수량 선택기 표시”,
“nb”: “Vis mengdevelger”,
“nl”: “Hoeveelheidskiezer weergeven”,
“pt-BR”: “Exibir seletor de quantidade”,
“pt-PT”: “Mostrar um seletor de quantidade”,
“sv”: “Visa kvantitetsväljare”,
“th”: “แสดงตัวเลือกจำนวน”,
“zh-CN”: “显示数量选择器”,
“zh-TW”: “顯示數量選擇器”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_variant_labels”,
“label”: {
“da”: “Vis variantlabels”,
“de”: “Varianten-Etiketten anzeigen”,
“en”: “Show variant labels”,
“es”: “Mostrar etiquetas de variantes”,
“fi”: “Näytä vaihtoehtoiset tarrat”,
“fr”: “Afficher le nom des variantes”,
“hi”: “वेरिएंट लेबल दिखाएं”,
“it”: “Mostra etichette varianti”,
“ja”: “バリエーションのラベルを表示する”,
“ko”: “이형 상품 레이블 표시”,
“nb”: “Vis variantetiketter”,
“nl”: “Variantlabels weergeven”,
“pt-BR”: “Exibir etiquetas de variantes”,
“pt-PT”: “Mostrar etiquetas de variantes”,
“sv”: “Visa variantetiketter”,
“th”: “แสดงป้ายกำกับตัวเลือกสินค้า”,
“zh-CN”: “显示多属性标签”,
“zh-TW”: “顯示子類選項標籤”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: {
“da”: “Vis leverandør”,
“de”: “Lieferanten anzeigen”,
“en”: “Show vendor”,
“es”: “Mostrar proveedor”,
“fi”: “Näytä myyjä”,
“fr”: “Afficher les vendeurs”,
“hi”: “विक्रेता दिखाएं”,
“it”: “Mostra fornitore”,
“ja”: “販売元を表示する”,
“ko”: “공급업체 표시”,
“nb”: “Vis leverandør”,
“nl”: “Leverancier weergeven”,
“pt-BR”: “Exibir fornecedor”,
“pt-PT”: “Mostrar fornecedor”,
“sv”: “Visa säljare”,
“th”: “แสดงผู้ขาย”,
“zh-CN”: “显示厂商”,
“zh-TW”: “顯示廠商”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: {
“da”: “Vis dynamisk betalingsknap”,
“de”: “Dynamischen Checkout Button anzeigen”,
“en”: “Show dynamic checkout button”,
“es”: “Mostrar botón de pago dinámico”,
“fi”: “Näytä dynaaminen kassapainike”,
“fr”: “Afficher le bouton de paiement dynamique”,
“hi”: “डायनेमिक चेकआउट बटन दिखाएं”,
“it”: “Mostra pulsante di check-out dinamico”,
“ja”: “動的チェックアウトボタンを表示する”,
“ko”: “동적 결제 버튼 표시”,
“nb”: “Vis dynamisk knapp for å gå til kassen”,
“nl”: “Dynamische betaalknop weergeven”,
“pt-BR”: “Exibir botão de checkout dinâmico”,
“pt-PT”: “Mostrar o botão dinâmico de finalização da compra”,
“sv”: “Visa dynamiska utcheckningsknappar”,
“th”: “แสดงปุ่มชำระเงินแบบไดนามิก”,
“zh-CN”: “显示动态结账按钮”,
“zh-TW”: “顯示動態結帳按鈕”
},
“info”: {
“da”: “Den enkelte kunde vil se sin foretrukne betalingsmetode blandt dem, der er tilgængelige i din butik, f.eks. PayPal eller Apple Pay. Få mere at vide”,
“de”: “Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. Mehr Informationen”,
“en”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“es”: “Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. Más información”,
“fi”: “Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. Lisätietoja”,
“fr”: “Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. En savoir plus”,
“hi”: “प्रत्येक ग्राहक आपके स्टोर पर उपलब्ध अपनी पसंदीदा भुगतान की विधि देखेंगे जैसे PayPal या Apple Pay. अधिक जानें”,
“it”: “Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. Maggiori informazioni”,
“ja”: “PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。詳しくはこちら”,
“ko”: “각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 지불 방법을 확인할 수 있습니다. 자세히 알아보기”,
“nb”: “Hver enkelt kunde vil se sin foretrukne betalingsmåte blant de som er tilgjengelig i butikken din, som PayPal eller Apple Pay. Finn ut mer”,
“nl”: “Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. Meer informatie”,
“pt-BR”: “Cada cliente verá a forma de pagamento preferencial dele dentre as disponíveis na loja, como PayPal ou Apple Pay. Saiba mais”,
“pt-PT”: “Cada cliente irá ver o seu método de pagamento preferido entre os disponíveis na loja, como o PayPal ou Apple Pay. Saiba mais”,
“sv”: “Varje kund kommer att se den föredragna betalningsmetoden från de som finns tillgängliga i din butik, till exempel PayPal eller Apple Pay. Läs mer”,
“th”: “ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay ดูข้อมูลเพิ่มเติม”,
“zh-CN”: “每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。了解详细信息”,
“zh-TW”: “每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。深入瞭解”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: {
“da”: “Vis knapper til deling på sociale medier”,
“de”: “Buttons für Social Media anzeigen”,
“en”: “Show social sharing buttons”,
“es”: “Mostrar botones para compartir en redes sociales”,
“fi”: “Näytä sosiaalisen median jakamispainikkeet”,
“fr”: “Affichez les boutons de partage sur les médias sociaux”,
“hi”: “सोशल शेयरिंग बटन दिखाएं”,
“it”: “Mostra i pulsanti per la condivisione sui social”,
“ja”: “ソーシャルメディアでの共有ボタンを表示する”,
“ko”: “소셜 공유 버튼 표시”,
“nb”: “Vis knapper for deling på sosiale medier”,
“nl”: “Knoppen voor sociaal delen weergeven”,
“pt-BR”: “Exibir botões de compartilhamento em redes sociais”,
“pt-PT”: “Mostrar botões de partilha nas redes sociais”,
“sv”: “Visa knappar för delning i sociala medier”,
“th”: “แสดงปุ่มสำหรับแชร์ลงโซเชียล”,
“zh-CN”: “显示社交分享按钮”,
“zh-TW”: “顯示社群分享按鈕”
},
“default”: true
},
{
“type”: “header”,
“content”: {
“da”: “Medie”,
“de”: “Medien”,
“en”: “Media”,
“es”: “Elementos multimedia”,
“fi”: “Media”,
“fr”: “Support multimédia”,
“hi”: “मीडिया”,
“it”: “Media”,
“ja”: “メディア”,
“ko”: “미디어”,
“nb”: “Medier”,
“nl”: “Media”,
“pt-BR”: “Mídia”,
“pt-PT”: “Multimédia”,
“sv”: “Media”,
“th”: “สื่อ”,
“zh-CN”: “媒体”,
“zh-TW”: “媒體”
},
“info”: {
“da”: “Få mere at vide om media types”,
“de”: "Mehr Informationen über Medientypen ",
“en”: “Learn more about media types”,
“es”: “Más información sobre tipos de archivos multimedia”,
“fi”: “Lue lisää mediatyypeistä”,
“fr”: “En savoir plus sur les types de supports multimédia”,
“hi”: “मीडिया प्रकार के बारे में और जानें”,
“it”: “Scopri di più sulle tipologie di file multimediali”,
“ja”: “メディアのタイプ について詳しくはこちら”,
“ko”: “미디어 유형에](https://help.shopify.com/manual/products/product-media)에) 대해 자세히 알아보기”,
“nb”: “Lær mer om medietyper”,
“nl”: “Meer informatie over mediatypen”,
“pt-BR”: “Saiba mais sobre tipos de mídia”,
“pt-PT”: “Saiba mais sobre media types”,
“sv”: “Läs mer om mediatyper”,
“th”: “ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประเภทของสื่อ”,
“zh-CN”: “详细了解媒体类型”,
“zh-TW”: “深入瞭解 媒體類型”
}
},
{
“type”: “select”,
“id”: “media_size”,
“label”: {
“da”: “Størrelse”,
“de”: “Größe”,
“en”: “Size”,
“es”: “Tamaño”,
“fi”: “Koko”,
“fr”: “Taille”,
“hi”: “आकार”,
“it”: “Dimensione”,
“ja”: “サイズ”,
“ko”: “사이즈”,
“nb”: “Størrelse”,
“nl”: “Grootte”,
“pt-BR”: “Tamanho”,
“pt-PT”: “Tamanho”,
“sv”: “Storlek”,
“th”: “ขนาด”,
“zh-CN”: “大小”,
“zh-TW”: “尺寸”
},
“options”: [
{
“value”: “small”,
“label”: {
“da”: “Lille”,
“de”: “Klein”,
“en”: “Small”,
“es”: “Pequeño”,
“fi”: “Pieni”,
“fr”: “Petit”,
“hi”: “छोटा”,
“it”: “Piccolo”,
“ja”: “スモール”,
“ko”: “스몰”,
“nb”: “Liten”,
“nl”: “Klein”,
“pt-BR”: “Pequeno”,
“pt-PT”: “Pequeno”,
“sv”: “Liten”,
“th”: “เล็ก”,
“zh-CN”: “小”,
“zh-TW”: “小型”
}
},
{
“value”: “medium”,
“label”: {
“da”: “Medium”,
“de”: “Mittel”,
“en”: “Medium”,
“es”: “Mediano”,
“fi”: “Keskisuuri”,
“fr”: “Moyenne”,
“hi”: “मध्यम”,
“it”: “Medio”,
“ja”: “中”,
“ko”: “보통”,
“nb”: “Middels”,
“nl”: “Gemiddeld”,
“pt-BR”: “Médio”,
“pt-PT”: “Médio”,
“sv”: “Medium”,
“th”: “ปานกลาง”,
“zh-CN”: “中等”,
“zh-TW”: “中等”
}
},
{
“value”: “large”,
“label”: {
“da”: “Stor”,
“de”: “Groß”,
“en”: “Large”,
“es”: “Grande”,
“fi”: “Suuri”,
“fr”: “Grande”,
“hi”: “बड़ा”,
“it”: “Grande”,
“ja”: “大”,
“ko”: “라지”,
“nb”: “Stor”,
“nl”: “Groot”,
“pt-BR”: “Grande”,
“pt-PT”: “Grande”,
“sv”: “Stor”,
“th”: “ใหญ่”,
“zh-CN”: “大”,
“zh-TW”: “大型”
}
},
{
“value”: “full”,
“label”: {
“da”: “Fuld bredde”,
“de”: “Volle Breite”,
“en”: “Full-width”,
“es”: “Ancho completo”,
“fi”: “Täysi leveys”,
“fr”: “Pleine largeur”,
“hi”: “पूर्ण चौड़ाई”,
“it”: “Intera larghezza”,
“ja”: “全幅”,
“ko”: “전체 폭”,
“nb”: “Full bredde”,
“nl”: “Volledige breedte”,
“pt-BR”: “Largura completa”,
“pt-PT”: “Largura completa”,
“sv”: “Full bredd”,
“th”: “เต็มความกว้าง”,
“zh-CN”: “全宽”,
“zh-TW”: “完整寬度”
}
}
],
“default”: “medium”
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: {
“da”: “Aktivér billedzoom”,
“de”: “Foto-Zoom zulassen”,
“en”: “Enable image zoom”,
“es”: “Habilitar zoom de imagen”,
“fi”: “Ota kuvan zoomaus käyttöön”,
“fr”: “Activer le zoom d’image”,
“hi”: “इमेज ज़ूम सक्षम करें”,
“it”: “Abilita lo zoom dell’immagine”,
“ja”: “画像ズームを有効にする”,
“ko”: “이미지 확대 사용”,
“nb”: “Aktiver bildezoom”,
“nl”: “Inzoomen op afbeelding inschakelen”,
“pt-BR”: “Habilitar o zoom da imagem”,
“pt-PT”: “Ativar o zoom da imagem”,
“sv”: “Aktivera bildzoom”,
“th”: “เปิดใช้การซูมภาพ”,
“zh-CN”: “启用图片缩放”,
“zh-TW”: “啟用圖片縮放”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: {
“da”: “Aktivér looping af videoer”,
“de”: “Videschleife aktivieren”,
“en”: “Enable video looping”,
“es”: “Habilitar la reproducción de video en bucle”,
“fi”: “Ota käyttöön videosilmukka”,
“fr”: “Activer le bouclage de la vidéo”,
“hi”: “वीडियो लूपिंग सक्षम करें”,
“it”: “Abilita la riproduzione in loop dei video”,
“ja”: “ビデオのループを有効にする”,
“ko”: “동영상 루프”,
“nb”: “Aktiver løkkeavspilling av video”,
“nl”: “Video-looping inschakelen”,
“pt-BR”: “Habilitar loop de vídeo”,
“pt-PT”: “Ativar ciclo de vídeo”,
“sv”: “Aktivera video-loopning”,
“th”: “เปิดใช้งานการวนซ้ำวิดีโอ”,
“zh-CN”: “启用视频循环”,
“zh-TW”: “啟用影片循環功能”
},
“default”: false
}
]
}
{% endschema %}

8

Have you had a chance to take a look at this? just wanted to follow up. Thankyo

1 Like
9

@jpack84

you have find this

{{ product.title }}

after add your code

10

I have added that to where you tell me to, and it doesnt show up where it should. It is still on the bottom. I want to confirm on which template i should be pasting that in

11

I was able to get it figured out. I also found the following you tube video that assisted. Thank you for all the help and assistance.

https://www.youtube.com/watch?v=FcXtWLdo49w

1 Like
12

@jpack84

great thanks for update

1 Like