Alignment of Custom Message Box

Solved
New Member
2 0 0

Hi i have some products which will require text to be inputted so they can be personalised, i have followed instructions on how to create a second custom product template but i cant work out how to get the box where i want it, i would like it just below the description but above the Add to cart button but as you can see from the picture its stuck bottom left.  Any help would be appreciated, I've included the code for that template as well.

 

Screen Shot 2020-02-27 at 12.03.07.png

 

 

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

 

{% section 'product-template' %}


{% if template contains 'custom-1' %}

<p class="line-item-property__field">
<label for="custom-message">Custom message</label>
<textarea required id="custom-message" name="properties[Custom message]"></textarea>
</p>

<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:100px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>

{% endif %}


{% section 'product-recommendations' %}

 

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}


<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>

0 Likes
Highlighted

Success.

Shopify Partner
206 38 47

Hello @GiftsByClaire,

                                        cut this code

{% if template contains 'custom-1' %}

<p class="line-item-property__field">
<label for="custom-message">Custom message</label>
<textarea required id="custom-message" name="properties[Custom message]"></textarea>
</p>

<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:100px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>

{% endif %}

 

 

find  {{product.description}} in product-template

place this code below  {{product.description}}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

 

1 Like
Highlighted

Success.

Hello  ,

You have to add that textarea in product-template.liquid file.

Because all content like description and add to cart functionality is there so there you can add it after description and before add to cart button

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
New Member
2 0 0

Thank you that has sorted my issue, it all makes sense now.

0 Likes