Solved

How do i change background color in product page

nTheHood
Tourist
8 1 0

Good morning !! How do i change background color in product page for Narrative theme ? I tried to search everywhere, I changed the code, but I didn't succeed at all. Thanks 

Accepted Solution (1)
WhitsEndCasting
Excursionist
18 3 8

This is an accepted solution.

You need to modify padding and margins. Most likely margins.

View solution in original post

Replies 8 (8)

WhitsEndCasting
Excursionist
18 3 8

I think you're gonna have to create an association for that specific template. I'm not sure as I haven't gotten that far yet. I was planning on just overwriting the entire background with an image instead. It looks like it was purposeful by design to limit individual page backgrounds. I'm almost 100% positive you have to create a case for each individual template you want to modify.

 

body {
  background-color: $color-main-bg;
}

.main-content--no-template {
  padding-top: 50px;
}

.content-for-layout {
  padding-bottom: $gutter * 3;
  background-color: $color-main-bg;

  @include media-query($medium-up) {
    padding-bottom: $gutter * 6;
  }

 

 

This sets rules for all layouts. As you can see, the

body {
background-color: $color-main-bg;
}

sets all of the background colors based on whatever the main-bg color is that is selected in the customizer menu. I believe that customizer schema is located in the config folder in the edit code menu. You can easily change this through the CSS by making it:

background-color: white;

background-color: black;

background-color: #CCCCCC;

etc.

However, again, in order to do it specifically for a particular template is beyond my current skill level. That should give you a basic starting point though. You can find these settings here:

 

Page 1.png

WhitsEndCasting
Excursionist
18 3 8

Correction.

 

This modifies what you're looking for. But not for a specific page.

 

.content-for-layout {
  padding-bottom: $gutter * 3;
  /*background-color: $color-main-bg;*/
  background-image: url("https://cdn.shopify.com/s/files/1/0471/5695/3241/files/background-1462755_1920.jpg?v=1600617170");

 

I was able to force all my backgrounds to that image doing that.

WhitsEndCasting
Excursionist
18 3 8

I figured it out.

Use this

 

body.template-product {
    .content-for-layout {
  padding-bottom: $gutter * 3;
  background-color: black;
  
  @include media-query($medium-up) {
    padding-bottom: $gutter * 6;
  }
  }
  }

 

That will turn the page background black. Enjoy.

 

 

page 2.png

nTheHood
Tourist
8 1 0

Thanks 

but now two problems have arisen:
1. How do I change the color of the text only on the product page?
2. the space between the header and the product picture is very small

 

i want all text black and background white

 

nTheHood_0-1600674433872.png   nTheHood_1-1600674444042.png

 

 

 

WhitsEndCasting
Excursionist
18 3 8

So there are a few ways of doing this.

 

 

body.template-product {
    .content-for-layout {
  padding-bottom: $gutter * 3;
  background-color: black;
  color: black;
  
  @include media-query($medium-up) {
    padding-bottom: $gutter * 6;
  }
  }
  }

 

 

There is a headers, paragraph and rte section in theme.scss. You can quickly navigate to it by using the find command and putting in h1.

Now, you can do something simple like adding color: black; underneath any area within those sections that correspond to the text.

 

 

/*================ Headings ================*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
  margin: 0 0 $gutter;

  a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
  }
}

h1,
h2,
h3,
h4 {
  letter-spacing: inherit;
  text-transform: inherit;
  font-family: "AmaticSC";
  font-style: $font-style-header;
  font-weight: $font-weight-header;
}

h5,
h6 {
  font-family: "AmaticSC";
  font-style: $font-style-body;
  font-weight: $font-weight-body;
}

 

 

 

As you can see, I used the highest level of delegation for the color change to black. I already added my own fonts (AmaticSC) and you can see me forcing site wide the use of those fonts for headings. I could do this down to an individual level such as

 

 

 

h1 {
color: black;
}

or

h5{
color: purple;
}

 

 

page 3.png

The same changes can be done with the "P" section and the RTE sections. However, it is important that you understand this will be a site wide change. So I would impress upon you to make changes for the specific template like we did in our previous examples using body and content-for-layout or create a condition for your template suffixes.

 

Like, I can make changes to the page template. But any page I created that uses that template will be modified as well. This is total shit for me because I have 2 pages that need separate designs in the future. One is a portfolio page and another is a services page. So we have to dig deeper and start coding our changes independently. I am not going to go that far to teach you. It is not that I don't want to, it's that I simply have a business to run on top of my regular job. I do the art, the web design, catalog design, etc etc. I hope you understand. Anyways, I created a template called page.services. It is an exact replica of page-template. This is what it looks like in the theme layout page if you wanted to modify a single sub template.

 

Page 4.png

page 5.pngpage 6.png

 

Some of the ways you modify things like site headers, or section headers, require special calls to modify them. Such as:

 

h1.section-header__title

 

It is an h1 for sure. On every page I believe. But you can't simply call .section-header__title and make a change that way unless it's from theme.scss. I can't make that work anyways. SO you have to be as specific as possible.

So if I wanted to change the h1 headers that were made using the rich text editor found on the "edit pages" menu, I would have to specify .rte h1 and it would ONLY affect those specific headings. Moresoe it would affect those specific headings only on page.services templates that are used in the template suffix area of edit pages like my example shows.

nTheHood
Tourist
8 1 0

Thanks !

and how do I solve that space between the header and the picture?

WhitsEndCasting
Excursionist
18 3 8

This is an accepted solution.

You need to modify padding and margins. Most likely margins.

yumina
Tourist
15 0 1

Hi ! I have the same issue using Narrative Theme. I want to change a background color for a featured product section. Here is my website URL. I want to change it from white to #162020.

I've already tried to use this code but it didn't work

#shopify-section-featured-product { 
background-color: #162020; !important;
 }
 

 

Could you please assist me with that? Thanks so much!