Customazible field design to make it look better

Solved
Highlighted
New Member
29 0 0

Hello!

 

I have a customizable product on my store and it looks like this: Like this hereLike this here

 

But I want it wide like this and between the Variant selection and custom fields should not be so much white space like this:

Anmerkung 2019-12-10 162047.png

 

 

Can anybody help?

 

I used the coding in the product.customizable.template. This tutorial: https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for...

 

It was very helpful, but I don't know how to make the fields wider like in the second picture.

 

This is my code of the 2 custom fields in the product-customizable-template.liquid.

         <p class="line-item-property__field">
  <label for="name-zum-eingravieren">Name zum eingravieren:</label>
  <input required class="required" id="name-zum-eingravieren" type="text" name="properties[Name zum eingravieren]">
</p>
        <p class="line-item-property__field">
  <label for="telefonnummer-eingeben">Telefonnummer eingeben</label>
  <input id="telefonnummer-eingeben" type="text" name="properties[Telefonnummer eingeben]">
</p>

 

I thank you very much in advance for your help.

 

Best Regards

Yunus

0 Likes
Highlighted

Hello @Peakmart ,

Do you want like this as shown in below screenshot

2019-12-10_21-00.jpg

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
29 0 0

Yes please,

 

and the fields should be wide 100%.

 

and the customer shouldn't be able to "Add to Cart" without typing in a Name.

 

And is it somehow possible, that the customer can make changes to the name/telephone number in the cart page?

 

 

0 Likes
Highlighted
New Member
29 0 0

I tried it with this i cart-template.liquid;

 

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

below {{ item.product.title }}

 

but it didn't work

0 Likes
Highlighted

@Peakmart,

Please add below css

.pesw_itm_typ1, .pesw_itm_typ2, .pesw_itm_typ3, .pesw_itm_typ4 {
	padding: 41px !important;
}
#ProductSection-product-customizable-template .product-form {
	padding-top: 0;
}

If you want the input box width:100% then add below css

#name-zum-eingravieren {
	width: 100%;
}
#telefonnummer-eingeben {
	width: 100%;
}

the customer shouldn't be able to "Add to Cart" without typing in a Name.

And is it somehow possible, that the customer can make changes to the name/telephone number in the cart page

=>This is the customize part..For that you have to hire expert

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
29 0 0
<p class="line-item-property__field">
<label for="name-zum-eingravieren">Name zum eingravieren</label>
<input required class="required" id="name-zum-eingravieren" type="text" name="properties[Name zum eingravieren]">

</p>

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

Where should I add the 100% width?

 

Can you please explain more detailed.

0 Likes
Highlighted
New Member
29 0 0

Where exactly should I add ?

 

.pesw_itm_typ1, .pesw_itm_typ2, .pesw_itm_typ3, .pesw_itm_typ4 {
	padding: 41px !important;
}
#ProductSection-product-customizable-template .product-form {
	padding-top: 0;
}

 

0 Likes
Highlighted

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#name-zum-eingravieren {
	width: 100%;
}
#telefonnummer-eingeben {
	width: 100%;
}

@Peakmart wrote:
<p class="line-item-property__field">
<label for="name-zum-eingravieren">Name zum eingravieren</label>
<input required class="required" id="name-zum-eingravieren" type="text" name="properties[Name zum eingravieren]">

</p>

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

Where should I add the 100% width?

Can you please explain more detailed.


 

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file


@Peakmart wrote:

Where exactly should I add ?

 

.pesw_itm_typ1, .pesw_itm_typ2, .pesw_itm_typ3, .pesw_itm_typ4 {
	padding: 41px !important;
}
#ProductSection-product-customizable-template .product-form {
	padding-top: 0;
}

 


 

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
29 0 0

Man, you da OG.

 

 

0 Likes