Background Block Color Product Title/Detail in collections

Solved
DeadEndStreet
Explorer
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
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9824 2236 3076

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 23 (23)
dmwwebartisan
Shopify Partner
9824 2236 3076

@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 | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
103 0 35

Hi there.

Store URL is: deadendstreet.co.uk

Thank you

dmwwebartisan
Shopify Partner
9824 2236 3076

@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 | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
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
9824 2236 3076

@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 | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
103 0 35

One amazing individual!! Many thanks

DeadEndStreet
Explorer
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
9824 2236 3076

@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 | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
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