Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
You need to modify padding and margins. Most likely margins.
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:
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.
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.
Thanks WhitsEndCasting !!!
It worked !!!
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
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;
}
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.
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.
Thanks !
and how do I solve that space between the header and the picture?
This is an accepted solution.
You need to modify padding and margins. Most likely margins.
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!
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