All things Shopify and commerce
I've added a custom liquid field to certain products on my site directly in the site in a custom liquid block (not in the back end "edit code" section of the theme itself), using a generator because it was the easiest and most user friendly way to get what I needed with having zero code experience. This is the code:
<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
<label class="form__label-text custom" for="color-palette">Color Palette</label>
<div class="field custom">
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="color-palette" name="properties[Color Palette]" required>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</div>
I've used it to create two custom fields, "color palette" and "preferred floral varieties" on select products (https://www.adelaidecofloral.com/products/casket-spray). However, the fields that it generates doesn't have a border surrounding the text input field that the customer would click into and type their info. So the color and flower options just looks like random floating text with no where to input your choices - I only know to click on the empty space below because I know it's there - customers are not going to know that. I need to add a border to this custom liquid but have searched for hours trying to find the right code to add but nothing I try works, I assume because this is a custom liquid block and not part of the theme.liquid and therefore doesn't translate. Can someone please help me figure out how to add some code that would add a border to the text input fields? Thank you!!!
ETA: Just realized it's actually doing this on all text input forms on my site, not just the custom liquid block I added. The other text boxes on my site *used to* have borders around everything, so I'm not sure what changed?
Solved! Go to the solution
This is an accepted solution.
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.custom .field__input {
border: 1px solid #A68A77;
}
And Sve.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.custom .field__input {
border: 1px solid #A68A77;
}
And Sve.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you SO SO much! Worked exactly as I needed, appreciate the help!!
Welcome. You mention some of the borders are missing. Thinking the quantity buttons also one of them? let me know. Thanks!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024