I’m trying to add a required drown down selection in the cart or on the checkout page so customers can tell me where the were referred to my store from (I have physical displays and want to allocate commissions based on where they saw the display). I’ve been researching this and I’ve found the UI elements generator Cart attribute – Shopify UI Elements Generator to generate the code, but the instructions on that page and the few posts here talk about editing the cart.liquid file. Problem is I’m using the Renew theme and it doesn’t have this file. Other sources mention editing the main-cart-items.liquid or the main-cart-footer.liquid files, but I can’t figure out where in those sections to post the code. I could use some help.
Press Cntrl F, use the search to find where <form and </form tags are and paste the code where you want, between those tags.
Since Renew is an OS 2.0 theme, the old cart.liquid is gone. You’re on the right track with main-cart-footer.liquid.
Open that file and search for name=“checkout” (that’s your checkout button). Paste the UI generator code right above that button element. That puts the dropdown right where they click to pay.
Btw, if you’re using a slide-out cart drawer instead of a full cart page, you’ll actually need to add this to cart-drawer.liquid instead. Same deal, just find the checkout button in that file and paste it above.
Thank you. I’m getting closer. Here’s the code I got from the generator:
How did you find out about us?
I notice a couple of things. The drop down menu is to the left of the checkout button. Is there a way of modifying this so it’s above the button? Also, the default selection is the first one I entered (Google) and so it is technically answered and allows the customer to proceed to the checkout without selecting an option. How do I make it blank by default, so that a customer is forced to select something before proceeding?
How do I post code so you see the text?
Click the </> (Insert Code)
<p class="cart-attribute__field">
<label>How did you find out about us?</label><br>
<select required class="required" id="how-did-you-find-out-about-us" name="attributes[How did you find out about us?]">
<option value="Google"{% if cart.attributes["How did you find out about us?"] == "Google" %} selected{% endif %}>Google</option>
<option value="Word of mouth"{% if cart.attributes["How did you find out about us?"] == "Word of mouth" %} selected{% endif %}>Word of mouth</option>
<option value="Facebook"{% if cart.attributes["How did you find out about us?"] == "Facebook" %} selected{% endif %}>Facebook</option>
<option value="Display 1"{% if cart.attributes["How did you find out about us?"] == "Display 1" %} selected{% endif %}>Display 1</option>
<option value="Display 2"{% if cart.attributes["How did you find out about us?"] == "Display 2" %} selected{% endif %}>Display 2</option>
</select>
</p>
Thanks, here’s what I got for the drop down.
The reason it’s allowing customers to proceed is that “Google” is currently the first valid value. You need to add a “placeholder” option at the very top that has no value. Browsers will then recognize the required attribute properly.
Change the beginning of your <select> code to this:
<option value="">-- Please Choose an Option --</option>
<option value="Google"{% if cart.attributes["How did you find out about us?"] == "Google" %} selected{% endif %}>Google</option>
...
Since Renew is likely using main-cart-footer.liquid or a similar snippet for the drawer, you need to look for the form tag.
- Placement: Move your code block so it sits exactly above the
<button type="submit" name="checkout">line. - Styling: To ensure it doesn’t sit to the left, wrap your code in a
divwith a “display: block” style or a width of 100%. For example:
<p class="cart-attribute__field">
<label for="how-did-you-find-out-about-us">How did you find out about us?</label><br>
<select required style="width: 100%;" id="how-did-you-find-out-about-us" name="attributes[How did you find out about us?]">
<option value="">-- Please Choose an Option --</option>
</select>
</p>
</div>
One important note: If your theme uses an “Ajax” cart (the one that slides out), standard HTML validation sometimes gets bypassed. If the “Required” part still doesn’t stop the click, you might need a tiny snippet of Javascript to disable the checkout button until a selection is made.
Thanks for the help on this!
I got the placeholder to work. I’m not sure how to write the first line for the
part though (I’m learning this as I go). I made an attempt based on what I was seeing in other parts of the code and got this:
<div display: block>
<p class="cart-attribute__field">
<label>How did you find out about us?</label><br>
<select required class="required" id="how-did-you-find-out-about-us" name="attributes[How did you find out about us?]">
<option value="">-- Please Choose an Option --</option>
<option value="Google"{% if cart.attributes["How did you find out about us?"] == "Google" %} selected{% endif %}>Google</option>
<option value="Word of mouth"{% if cart.attributes["How did you find out about us?"] == "Word of mouth" %} selected{% endif %}>Word of mouth</option>
<option value="Facebook"{% if cart.attributes["How did you find out about us?"] == "Facebook" %} selected{% endif %}>Facebook</option>
</select>
</p>
</div>
The drop down is still on the left of the checkout button.
I changed the cart display to page from the drawer in an attempt to bypass issues with the required field preventing progression to the checkout, but it still goes right to checkout without making a selection. Would you be able to provide guidance on the Javascript modification?
Thinking ahead a little… if someone doesn’t make a selection is there something that tells them to select an option by default or do I need a line of code to generate that error message? Also, when someone make a selection, where does the data get stored for later review?
Thanks!