FROM CACHE - en_header

Background Block Color Product Title/Detail in collections

Solved
DeadEndStreet
Pathfinder
103 0 35

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.

 

Screenshot 2021-11-09 120315.png

Accepted Solutions (5)

Accepted Solutions
dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

Add code Your assets/theme.scss.liquid bottom of the file. 

 

.featured-card{background-color: transparent !important; border-color: transparent !important;}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

Replies 23 (23)
dmwwebartisan
Shopify Partner
11014 2377 3400

@DeadEndStreet 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

Hi there.

Store URL is: deadendstreet.co.uk

Thank you

dmwwebartisan
Shopify Partner
11014 2377 3400

@DeadEndStreet 

Add code Your assets/theme.scss.liquid bottom of the file. 

.product-card__info {background-color: transparent !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

Awesome - thanking you so much.

Is there a way of moving the title close to the picture - moving it up?

dmwwebartisan
Shopify Partner
11014 2377 3400

@DeadEndStreet 

Add code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (min-width: 750px){
.product-card__info { bottom: -22% !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

One amazing individual!! Many thanks

DeadEndStreet
Pathfinder
103 0 35

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

Screenshot 2021-11-09 131838.png

dmwwebartisan
Shopify Partner
11014 2377 3400

@DeadEndStreet 

ok Please wait ! i will send you solution.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

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.

Screenshot 2021-11-09 132709.png

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

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.

Screenshot_20211109-140120_Samsung Internet (002).jpg

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@DeadEndStreet 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

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

dmwwebartisan
Shopify Partner
11014 2377 3400

@DeadEndStreet 

Hey not clear to me what do want to you Please share screenshot i will check and send solution to you.

Thanks! welcome again

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

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.

 

Screenshot 2021-11-09 143637.png

 

dmwwebartisan
Shopify Partner
11014 2377 3400

@DeadEndStreet 

can you share the URL please?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
DeadEndStreet
Pathfinder
103 0 35

Sorry, URL is deadendstreet.co.uk