Shopify themes, liquid, logos, and UX
Hi all,
How do I remove the content color or at least change it for the title of a product (within collections page and/or main content block - NOT the description of the item in product details)
Screenshot below shows what I mean - there is black box behind the white title - I wish to make it transparent.
Solved! Go to the solution
This is an accepted solution.
Add code Your assets/theme.scss.liquid bottom of the file.
.template-list-collections .featured-card {
border-color: transparent !important;
background-color: transparent !important;
}
@media only screen and (min-width: 750px){
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
This is an accepted solution.
also add following css
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-list-collections site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-list-collections .site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
}
This is an accepted solution.
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-list-collections .site-header { z-index: 9;}
}
This is an accepted solution.
also add following css for mobile
@media only screen and (max-width: 749px){
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
@media only screen and (max-width: 749px){
.template-list-collections site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-list-collections .site-header {
width: 100%;
position: absolute;
background-color: transparent;
z-index: 9;
}
}
This is an accepted solution.
Add code Your assets/theme.scss.liquid bottom of the file.
.featured-card{background-color: transparent !important; border-color: transparent !important;}
Please share your store URL!
Thanks!
Hi there.
Store URL is: deadendstreet.co.uk
Thank you
Add code Your assets/theme.scss.liquid bottom of the file.
.product-card__info {background-color: transparent !important;}
Thanks!
Awesome - thanking you so much.
Is there a way of moving the title close to the picture - moving it up?
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.product-card__info { bottom: -22% !important;}
}
One amazing individual!! Many thanks
I don't suppose you would know how to make my collection page header transparent would you?
All my other pages everywhere are transparent but on both mobile view and desktop the collection page header isn't - not sure why.
The big white space above main menu
ok Please wait ! i will send you solution.
Thanks!
Awesome, thank you - you can see I have that black background block within the collection page also - I had removed that elsewhere but thought it would also have been removed here.
This is an accepted solution.
Add code Your assets/theme.scss.liquid bottom of the file.
.template-list-collections .featured-card {
border-color: transparent !important;
background-color: transparent !important;
}
@media only screen and (min-width: 750px){
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
Hi, sorry just following up on this previous solution.
Is this possible to also do on the 'collection list' template on the main screen - is it the same kind of code
This is an accepted solution.
Add code Your assets/theme.scss.liquid bottom of the file.
.featured-card{background-color: transparent !important; border-color: transparent !important;}
This is an accepted solution.
also add following css
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-list-collections site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-list-collections .site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
}
You are truly amazing at this, honestly everything you have sent has been spot on and works without complication - brilliant thank you.
This may be a little more confusing - all headers are now transparent on both mobile and desktop but my logo is present on them all except for the collections page on mobile - not sure why, maybe it is something I have done/changed - see below:
The logo is or needs to be in the big blank space at the top - it is everywhere else - I guess this could be more complicated.
This is an accepted solution.
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-list-collections .site-header { z-index: 9;}
}
This is an accepted solution.
also add following css for mobile
@media only screen and (max-width: 749px){
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-list-collections #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
@media only screen and (max-width: 749px){
.template-list-collections site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-list-collections .site-header {
width: 100%;
position: absolute;
background-color: transparent;
z-index: 9;
}
}
Absolutely faultless!!!!
This - you are very clever. Thank you.
This is more of a question I suppose as the top title is a separate header section but see below from my pages (footer, about us etc).
On all pages the header in this case "Dead End Street" is quite a distance away from the start of the narrative underneath particularly on mobile view (as there is no main menu bar etc)
Do Shopify allow us to somehow move the header down and/or the narrative up? Ideally it would be great if they could let us move the header text down on the mobile view as it is very close to logo (and move narrative up) and also move narrative up on desktop.
Not sure there would be a fix for this
Hey not clear to me what do want to you Please share screenshot i will check and send solution to you.
Thanks! welcome again
Sorry I forgot the screenshot.
See below - on the mobile view - I think the title "Dead End Street" is too near the logo and the text underneath is to far away from the title.
On desktop view the text underneath is also too far down away from the title.
can you share the URL please?
Sorry, URL is deadendstreet.co.uk
Sorry my mistake please share page url
No its me probably lol
URL is deadendstreet.co.uk
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024