Shopify themes, liquid, logos, and UX
Hi,
so I found the workaround with menus and handles to make "Sub-Categories" and pages with Overviews. Such as my screenshot will show.
But how ever do I change the way the category name is displayed (maybe on the bottom of the tile).
Also what's with the horrible color background of every tile (and mouse over see iPhone 13 Pro in the screenshot).
Thank you for you help!
Solved! Go to the solution
This is an accepted solution.
Happy to help you:
1. Go to your code editor > Assets > theme.css or theme.css.liquid and paste this lines at the bottom of the page:
.collection-grid-item__title-wrapper::before {
background-color: none !important;
}
.collection-grid-item__title {
position: relative !important;
color: #000 !important;
}
.collection-grid-item__title.h3 {
margin: 17.5px 0 !important;
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
This is an accepted solution.
try this
This is an accepted solution.
add this:
.collection-grid-item__title {
text-shadow: none !important;
font-weight: normal !important;
}
@media only screen and (max-width: 769px) {
.collection-grid-item__title.h3 {
margin: 12px 0 !important;
font-size: 17px !important;
}
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
store url please
yes please confirm this look!
Hi, yeah looks much better. How and where can I do that?
This is an accepted solution.
Happy to help you:
1. Go to your code editor > Assets > theme.css or theme.css.liquid and paste this lines at the bottom of the page:
.collection-grid-item__title-wrapper::before {
background-color: none !important;
}
.collection-grid-item__title {
position: relative !important;
color: #000 !important;
}
.collection-grid-item__title.h3 {
margin: 17.5px 0 !important;
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
hi, so that fixed the text. It is now under the category. Looks ok.
Do you have a way to change the background of the category image?
All the best,
Fabio
This is an accepted solution.
Very cool - that worked!!
Thank you
Following up, desktop works. But mobile view is broken. The text goes into the images. Can we de-bold the text?
This is an accepted solution.
add this:
.collection-grid-item__title {
text-shadow: none !important;
font-weight: normal !important;
}
@media only screen and (max-width: 769px) {
.collection-grid-item__title.h3 {
margin: 12px 0 !important;
font-size: 17px !important;
}
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Running the risk of over using your help...do you have an idea for two lined category names that are currently still covered by images on mobile?
Smaler text? Or more space between the categories?
User | RANK |
---|---|
154 | |
139 | |
79 | |
71 | |
62 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023