Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Add a boarder to custom liquid css on product page

Solved

Add a boarder to custom liquid css on product page

adelaidefloral
Visitor
2 0 1

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?

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9039 2160 2665

This is an accepted solution.

Hi @adelaidefloral 

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:

Made4uoRibe_0-1727887641045.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
9039 2160 2665

This is an accepted solution.

Hi @adelaidefloral 

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:

Made4uoRibe_0-1727887641045.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
adelaidefloral
Visitor
2 0 1

Thank you SO SO much! Worked exactly as I needed, appreciate the help!!

Made4uo-Ribe
Shopify Partner
9039 2160 2665

Welcome. You mention some of the borders are missing. Thinking the quantity buttons also one of them? let me know. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.