How to add "how did you hear about us?" Dropdown to cart page

[Emmalouuise]

Hi,

I am trying to add a bit on my cart page which asks where people came from to find my shop. I cant seem to work out where to add this into.

I want on the bottom of the cart page to have a question asking “How did you hear about us?”

with a dropdown then offering options of facebook, instagram, google etc

Which is also a required field before going to check out.

Can someone help me this this please?

Would like it like the screenshot below.

[Guleria]

Hello @Emmalouuise ,

You have to add a cart attribute to grab additional data.
Please follow https://ui-elements-generator.myshopify.com/pages/cart-attribute

And to make the field required you have to do JS code so checkout will not work without making a selection.

Thanks

[suyash1]

@Emmalouuise - will need to edit cart.liquid file, try solution given by @Guleria , else we will need to add other codes to your page

[Emmalouuise]

Hi @Guleria @suyash1 ,

So i have added some code to make this work. however now i believe its more a bit of “customisation” although im unsure on how to do this. So any help would be much appreciated.

As stated in the screenshot below, I want to make the box smaller and start where the arrow points too, So it is more inline with the text.

I have attached a screenshot of how it looks, and how I would like it to go going forward.

Below is the code that I have used.

    
    
    Please select an option below
    

   
    
    Please fill the text field below
    

[suyash1]

@Emmalouuise - can you please share cart page link?

[Emmalouuise]

@suyash1 sure here is the preview link

https://4p48zun55rpfvb3f-66506883287.shopifypreview.com

[suyash1]

@Emmalouuise - please add this css to the very end of your STYLES.CSS file and check

#how-did-you-hear-about-us{max-width: 215px;    margin-right: 0;    margin-left: auto;}

[Emmalouuise]

@suyash1 i added that, however it did not seem to change anything.

[suyash1]

@Emmalouuise - should look like this, please check if you have added to correct theme

[Emmalouuise]

@suyash1 It is definitely in the correct theme,

It is at the bottom of the Styles.css.liquid file.

However it does not look like how it is in your screenshot

[suyash1]

@Emmalouuise - you have multiple incorrectly put curly brackets… need to clean that up

• you should have ‘}’ bracket on line 12306

• remove brackets on line 12312 and 12313 which you have before the word .CollectionItem

[Emmalouuise]

@suyash1 Unsure as to where exactly you are referring to as the lines you stated and line numbers i have, dont match up to what you are saying. I believe the one you want to have brackets remove, is at the end? and if So we have removed some. However still not working.

having a Bracket on Line 12306, Unsure as to where you want a bracket to go, as it looks like it would not need another bracket?

[suyash1]

@Emmalouuise - put bracket after font-size:!2px as shown in below screenshot

[Emmalouuise]

@suyash1 Sorry last thing, I was trying to change the outline border colour of the dropdown box, to be #EFC1D3

Cant seem to work out what code would change this.

[suyash1]

@Emmalouuise - try this

select#how-did-you-hear-about-us{border: 1px solid #EFC1D3;}

[Emmalouuise]

Hi @suyash1

I am trying to update the version of my theme, however on the new version this dropdown you gave code to add has now vanished. After going through to try add the code again as we did before, I have noticed that The styles.css.liquid section is gone where you added part of the code. Can you help me to fix this again please? Also I want to add a Checkbox below it saying “Would you like a loyalty Card? (Optional)” and if they check the box, it will show up in same place as the how did you hear about us section of an order saying “Loyalty card = Yes” Is this something you can help me with please?

Kind Regards,

Emma

[suyash1]

@Emmalouuise - can you please share the page link?

[Emmalouuise]

@suyash1 I have managed to get the drop down menu on the cart page, however I can’t seem to work out how to get the drop down to be smaller and the same colour as before.

Also still need help with adding the 2nd part.

Here is the preview link of the new theme version:
https://66qf1mu3584m4ciw-66506883287.shopifypreview.com/

If you add something to the basket and look, you will see what i mean hopefully.

[suyash1]

@Emmalouuise - add this to the end of main.css file and check

select#how-did-you-hear-about-us {
    max-width: 215px;    margin-right: 0;
    margin-left: auto;    border: 1px solid #EFC1D3;
}

[Emmalouuise]

@suyash1 Thank you, that works!

Would you be able to help with the 2nd Part, of wanting to add a checkbox which is not required to be selected, but when they select it, it will tell me they’ve selected yes, in the same way that it shows me their answer to the how did you hear about us dropdown please?