Solved

Background Block Color Product Title/Detail in collections

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)
dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 23 (23)

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

Hi there.

Store URL is: deadendstreet.co.uk

Thank you

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

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

Screenshot 2021-11-09 144837.png

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

Sorry, URL is deadendstreet.co.uk

dmwwebartisan
Shopify Partner
12280 2546 3694

@DeadEndStreet 

Sorry my mistake please share page url 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

No its me probably lol

URL is deadendstreet.co.uk