CART ATTRIBUTE NOT APPEARING AS IT SHOULD

Solved
Tourist
5 0 0

Hi all!

 

Hoping someone can help me with a little issue I'm having with a new form field I've added to the cart page via a cart attribute.

 

I used the Shopify UI Elements generator to generate code for a long text form field to allow customers to add special delivery instructions to their order. I already have a cart note enabled to capture their personalised messages for the order, and want the special delivery form field to display underneath. 

 

I have successfully added the code and have got the form field displaying, however the text box is appearing next to the form field label instead of underneath it! (see pictured)

 

Is there any way to get the cart note and the cart attribute to look vaguely similar so that the design is a little more consistent and user friendly? I have attached a screen shot of the code here too for reference. It is pasted in under Sections > template-cart.liquid as per the instructions I followed.

 

Any guidance would be so appreciated!

 

Thanks

Kate

 

Screen Shot 2020-01-22 at 6.00.52 pm.pngScreen Shot 2020-01-22 at 6.20.47 pm.png

0 Likes
Highlighted

Success.

Shopify Expert
2756 476 618

Hi @katejesswilliam 

Add this css in asset->theme.scss file at bottom:

#special-delivery-instructions{width: 100%; border: 1px solid #deb4a8 !important; border-radius: 0px !important; height: 140px;}

  

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
555 108 131

Replace your custom code this

<p class="cart-attribute__field">
  <label for="special-delivery-instructions">SPECIAL DELIVERY INSTRUCTIONS</label>
  <textarea id="special-delivery-instructions" name="attributes[SPECIAL DELIVERY INSTRUCTIONS]"></textarea>
</p>


With this

<p class="cart-attribute__field">
  <h3>SPECIAL DELIVERY INSTRUCTIONS</h3>
  <textarea class="input-field-textarea" rows="6" maxlength="250" id="special-delivery-instructions" name="attributes[SPECIAL DELIVERY INSTRUCTIONS]"></textarea>
</p>
Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted
Tourist
5 0 0

Hi @Jasoliya , thank you for your quick response! The code worked perfectly, thank you so much!!

 

Kate

 

Screen Shot 2020-01-22 at 7.16.22 pm.png

0 Likes