FROM CACHE - en_header

How to display line form options only when a certain variant is selected?

Solved
shells
Trailblazer
195 3 97

Hi there, 

I am trying to make two line forms I've added as custom blocks to display once the "Personsalised (+$15) variant is selected"

The link: https://www.feyrebaby.com.au/products/knotted-hat?variant=40098526298300

password: pahkud

display only if certain variant sleceted.png       
 
Here is my custom code block 
          <!---Start custom code block--->
          
              <p class="line-item-property__field">
  <p style="color: var(--g-main)"><label for="Name-for-personlisation">Name for personlisation <br>*First names only</label>
  <br><input id="Name-for-personlisation" type="text" name="properties[Name for personlisation]">
  </p>
                
              <p class="line-item-property__field">
<p style="color: var(--g-main)"><label>Thread Colour</label><br>
  <select id="thread-colour" name="properties[Thread Colour]">
    <option value="Grey">Grey</option>
    <option value="Blue">Blue</option>
    <option value="Pink">Pink</option>
  </select>
  </p>
          
            <!---End custom code block--->

 

 

Accepted Solutions (3)

Accepted Solutions
24by7themes
Shopify Partner
400 61 77

This is an accepted solution.

Hey @shells 
Please check 
https://www.feyrebaby.com.au/collections/bath-time/products/hooded-towel-with-wash-cloth-set?variant...

Note : 
Variant title should be 'Personalised', otherwise it won't work.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990

View solution in original post

24by7themes
Shopify Partner
400 61 77

This is an accepted solution.

Can you just change variant name to 'Personalised' on Hat product?

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990

View solution in original post

24by7themes
Shopify Partner
400 61 77

This is an accepted solution.

I can see, nothing wrong. It looks perfect.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990

View solution in original post

Replies 17 (17)
shells
Trailblazer
195 3 97

@dmwwebartisan is this something you can help with?

24by7themes
Shopify Partner
400 61 77

Hello @shells ,
We have to do some coding in Javascript and liquid side as well. Your need is, show two inputs once you select "Personalized' then right?

Contact me if you want to do it.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

@24by7themes that is correct

Are you able to help if I give you my password?

24by7themes
Shopify Partner
400 61 77

No it will not help. Please add me in staff account. Email address info@creatpix.com

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

Done - please let me know if you can access it

24by7themes
Shopify Partner
400 61 77

This is an accepted solution.

Hey @shells 
Please check 
https://www.feyrebaby.com.au/collections/bath-time/products/hooded-towel-with-wash-cloth-set?variant...

Note : 
Variant title should be 'Personalised', otherwise it won't work.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

Amazing! Thank you so much @24by7themes 

I only see it come through on the towels but not the hat though?

I want this function for only the template-product-customisable.

Can you help me take a look?

 

24by7themes
Shopify Partner
400 61 77

This is an accepted solution.

Can you just change variant name to 'Personalised' on Hat product?

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
24by7themes
Shopify Partner
400 61 77

Thank you for accepting solution. For further needs, you can contact me on my email address.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

Amazing! Sorry, I now know what you meant in your earlier messages. Too easy. 

Can I also trouble you one thing? I'm not sure why my top announcement bar has changed size. I only want it to be half the size of that. It was originally like that but I don't know how it just changed to what it is now by itself. Text and socials icons not aligned.

24by7themes
Shopify Partner
400 61 77

For top bar, add below css in theme.scss file

.header-head.py-2 {
    font-size: 12px;
    line-height: 12px;
}
Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

Help @24by7themes 

something has happened after i put the code in and now my website is all messed up. Can you help me urgently please? Everything has gone all wrong now. 

shells_0-1624432061355.png

 

24by7themes
Shopify Partner
400 61 77

Fixed, you forgot to add '}' at last. I have added.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

oh thank goodness..

 

but when I preview it is still off. the landing page image is so big, everything else is so small now: https://www.feyrebaby.com.au/?_ab=0&_fd=0&_sc=1&key=30a6734db3eb469fc3230c658d16242280371e1607b73bea...

Can you please help me take a look? Grateful. 

shells
Trailblazer
195 3 97
24by7themes
Shopify Partner
400 61 77

This is an accepted solution.

I can see, nothing wrong. It looks perfect.

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
shells
Trailblazer
195 3 97

I figured it out. It is when I zoom out.. but how can I make it so that the image is enlarged and reduced according to zoom functions? It seems like a big file and I don't want it to slow down my website. 

Also the solution you provided for the header doesn't work. 

Previously, the header was like this (see in red):

printscreen.png

I didn't alter any code or anything. How can I get it back to normal?

Thank you!!!!!