Adding custom HTML code to product page

Solved
Tourist
10 0 1

I added custom code to my debut theme. I added a text box and drop down box for customer to input for custom product. For some reason, my boxes are showing up at the bottom left of my website and not above the add to cart button. Here is my custom coding:

 

{% 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="Who do you want to rep?">Who do you want to rep? </label>
      <input required id="Text" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">
      </p>
 
      <p class="line-item-property__field">
      <label class="ep_block">Choose a color</label>
      <select required id="choose-a-color" name="properties[Choose a color]">
      <option value="Navy">Navy</option>
      <option value="Maroon">Maroon</option>
      <option value="Purple">Purple</option>
      <option value="Black">Black</option>
      </select>
      </p>
 
<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>
 

{% 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 | escape }}",

 

It continues on to more coding for other aspects of the page. I have the landing page set to unavailable, while I am working on the coding, so don't mind that part in the code. I thought because the coding was before the add to cart, it would show up above the add to cart button. Here is what my site looks like:

 

shopify.JPG

I would like the green box to be where the red box is.

 

THANK YOU!!!!

0 Likes
Tourist
52 4 6

Hello, can you give me the URL of your store? So I can check and give you the proper coding suggestion. Best of Luck!

Full Automated Shopify Store for only $280, Inbox me.
0 Likes
Tourist
10 0 1
https://fangirlclothing.com/

Should I take that product off of unavailable so you can see it? Only certain products will be customizable
0 Likes
Tourist
52 4 6

Give me the product link where I can see your issue! 

Full Automated Shopify Store for only $280, Inbox me.
0 Likes

Link not Working 

Resend a link.

Thanks & Regards
Perennial Solution

Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
https://www.perennialsolution.com/
0 Likes
Tourist
52 4 6

This is a CSS issue, I have to check your theme files to fix this.

Full Automated Shopify Store for only $280, Inbox me.
0 Likes
Highlighted
Tourist
10 0 1
How would you do that?
0 Likes

hi,

 

Hope you are doing well.

We have gone through your requirements and we would love to help you.

 

plz put this code below <form> tag

<p class="line-item-property__field">
<label for="Who do you want to rep?">Who do you want to rep? </label>
<input required="" id="Text" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">
</p>
<p class="line-item-property__field">
<label class="ep_block">Choose a color</label>
<select required="" id="choose-a-color" name="properties[Choose a color]">
<option value="Navy">Navy</option>
<option value="Maroon">Maroon</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</p>

Thanks & Regards
Perennial Solution

Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
https://www.perennialsolution.com/
0 Likes