Shopify themes, liquid, logos, and UX
All my variant pickers have no borders & I do not know where I can add them. Is there a way to do it without editing the theme codes? I have no knowledge on how to change it there & all the other Shopify answers haven't helped me :(. Anyone can help?
Here is a link to my shop: https://forher.boutique/
My second question is, how do I make the featured posts picture clickable?
It is always the same shop: https://forher.boutique/
Solved! Go to the solution
This is an accepted solution.
@forher - add this css to the very end of your base.css file and check
.select__select, .customer select {border: 1px solid #000;}
.quantity {border: 1px solid #000;}
This is an accepted solution.
Hello @forher
It will be helpful if you try this code -
Go to the online store> Theme> Edit Code> Assets > base.css > Add code at the bottom.
.select__select, .customer select {
border: 1px solid #000 !important;
margin: 0 !important;
}
.quantity {
width: calc(15rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
min-height: calc((var(--inputs-border-width) * 2) + 2.7rem);
border: 1px solid #000 !important;
}
This is an accepted solution.
Thank you so much for the help & I managed to do this step, but now I want to change the length of the borders to be the same. Is there anything I can do that?
This is an accepted solution.
Thank you so much for the help & I managed to do this step, but now I want to change the length of the borders to be the same. Is there anything I can do that?
This is an accepted solution.
Hello @forher
Try this -
Go to the online store> Theme> Edit Code> Assets > base.css > Add code at the bottom.
.quantity {
width: calc(22.5rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
}
This is an accepted solution.
You saved my life & my last question, what if I want them both to be smaller or the same size as the variant picker.
This is an accepted solution.
Hello Again @forher
There's no doubt now that it looks good.
This is an accepted solution.
@forher - add this css to the very end of your base.css file and check
.select__select, .customer select {border: 1px solid #000;}
.quantity {border: 1px solid #000;}
This is an accepted solution.
Hello @forher
It will be helpful if you try this code -
Go to the online store> Theme> Edit Code> Assets > base.css > Add code at the bottom.
.select__select, .customer select {
border: 1px solid #000 !important;
margin: 0 !important;
}
.quantity {
width: calc(15rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
min-height: calc((var(--inputs-border-width) * 2) + 2.7rem);
border: 1px solid #000 !important;
}
This is an accepted solution.
Thank you so much for the help & I managed to do this step, but now I want to change the length of the borders to be the same. Is there anything I can do that?
This is an accepted solution.
Thank you so much for the help & I managed to do this step, but now I want to change the length of the borders to be the same. Is there anything I can do that?
This is an accepted solution.
Hello @forher
Try this -
Go to the online store> Theme> Edit Code> Assets > base.css > Add code at the bottom.
.quantity {
width: calc(22.5rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
}
This is an accepted solution.
You saved my life & my last question, what if I want them both to be smaller or the same size as the variant picker.
This is an accepted solution.
Hello Again @forher
There's no doubt now that it looks good.
User | RANK |
---|---|
180 | |
154 | |
72 | |
35 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023