Shopify themes, liquid, logos, and UX
I want to start off by saying that these 5 issues have destroyed me. I have spent the good part of 12 hours working tirelessly but can't solve these ones. I would be eternally greatful for any assistance you can give.
Website: https://downunderthunder.com.au/
(SOLVED) Issue 1: On desktop/PC the sort by in a category section has a blue background when selected, I just want it to be transparent/white like the rest of the area so it matches
Picture for reference: Red circle over issue
(SOLVED) Issue 2: Same thing but for mobile users. When someone clicks "Sort by" in a category the box that appears is blue and hideous. Can someone please explain how to make the background white with black writing and black dividers to match
Picture for reference:
(SOLVED) Issue 3: On desktop/PC on the homepage, when a user hovers their cursor over one of the categories the text/title becomes extremely small and unreadable. How do I stop this from happening so it remains the same size
Picture for reference: Black arrow pointing at issue
(SOLVED) Issue 4: How do I change the search box color from blue to white with black text, this one has taken most of my time and I failed.
Picture for reference: Red circle around search box for clarification
Issue 5: After someone has searched something, the search page also has a blue search box, how do I change the entire area to white with black text as blue is terrible!
Picture for reference: Red circle around box I am refering to.
Solved! Go to the solution
This is an accepted solution.
Hi @JayFinlay
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
/* #3 */
.collection-list__item.grid__item .card__heading:hover {
font-size: 2.3rem;
transition: font-size var(--duration-short) ease, transform var(--duration-short) ease;
}
/* #1 */
.select__select:hover.select__select:after, .select__select:focus, .select__select:focus-visible, .select:after {
box-shadow: none;
}
/* #2 */
.mobile-facets__main.has-submenu.gradient {
background: white;
}
/* #4 and 5 */
.search__input.field__input {
background: white;
}
.search-modal__form * {
color: black !important;
}
</style>
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
Hi @JayFinlay
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
/* #3 */
.collection-list__item.grid__item .card__heading:hover {
font-size: 2.3rem;
transition: font-size var(--duration-short) ease, transform var(--duration-short) ease;
}
/* #1 */
.select__select:hover.select__select:after, .select__select:focus, .select__select:focus-visible, .select:after {
box-shadow: none;
}
/* #2 */
.mobile-facets__main.has-submenu.gradient {
background: white;
}
/* #4 and 5 */
.search__input.field__input {
background: white;
}
.search-modal__form * {
color: black !important;
}
</style>
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Amazing, you're a legend! But that has now slightly broken the search box on the page after someone has searched something
Example: https://downunderthunder.com.au/search?q=satisfyer&options%5Bprefix%5D=last
The box itself is now not visable and has no border around it or black text. And it's reverted to blue background on this page again
Pictures for reference:
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024