Page design help Dawn 2.0 Header, multicolumn, menu, photo, drop down, theme.

[Natlife]

Hello everyone! new here.

Im working on this website using Dawn 2.0 template and I’ve hit a few snags, I’ve looked through Youtube/Shopify and have not been able to find a solution for these, anyway here I go. greatly appreciate your help.

1. I have a problem where every new page i make duplicates and any change i make applies to everything, I read that I have to make new themes but i followed a few guides but the code they provided didnt work. Im trying to add header menus as well as footer menus (terms of service, contact, returns, etc..)

2. Removing the titles from every page. Example: When i click on “Buy now” i dont want “Buy now” to be displayed at the top of the page. I want to remove the title and the space occupied by said title. Basically the banner should be touching the header space and nothing in between.

3. All of the images I add become very blurry, Ive tried solutions such as changing picture format (jpeg to png/pdf) or changed size/resolution but none of these work. (the photos are crystal clear on photoshop)

4. I need to make the “multicolumn” section into a 3 columb max instead of 4 and any excess makes a new row. (right now i have a 4x2 i need a 3x3-4-5-6 etc..) SOLVED

5. There is an issue with the “slideshow” section on MOBILE, the title overlay on the slideshow gets pushed down below the slideshow creating a white box with said title/description/button.

MOBILE

PC

6. I need to make the “Collapsible content” section a bit wider on PC. ( its too narrow) Also on said collapsible content it would be nice to have a color background on each dropdown title. don’t know if it’s possible.

7. Is it possible to put the header logo on the left, bring the header menu below the logo, and add a long colored rectangle background behind the menu options ( an example would be Amazon)

8. Lastly I dont know if its possible to add a background (in this case white) to the “Image with Text” section, without affecting the header or other parts of the website. (right now it has the same color as the header)

Thank you in advance

[KetanKumar]

@Natlife

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Natlife]

https://nutrientc.us/

Thank you!

[KetanKumar]

@Natlife

thanks i have give possible to simple solution below other thing can we done some customization code if you need send DM

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.section-template--15696924868832__1645067183dba6fd6d-padding .collapsible-content-wrapper-narrow {
    max-width: 90% !important;
}
.main-page-title { display: none !important;}
@media screen and (min-width: 990px) {
.grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item {
    max-width: 30% !important;
    width: 30% !important;
}
}

[Natlife]

IT WORKED! #4 is solved thank you!

[KWallace]

I am addressing Natlife’s question number 1 and 6.

1. I think you mean templates not themes. if you understand templates you can do what you have been trying to do for days. But keep overwriting one page with another. The instruction in the videos shown in photo-1 will allow you to make a giant leap to getting it done. You can have 5 independent products or pages in 2-4 hours. If you learn this. The instruction is pretty clear. May have almost saved my financial life.

2. Good instruction on templates.

Now for question number 6. which you have solved because I looked at your web site and was jealous for several hours. KetanKumar’s solution didn’t do anything for my site on collapsible media. Did it work for number 4. I don’t have that problem, yet.

6. I need to make the “Collapsible content” section a bit wider on PC. ( its too narrow).Natlife

I am a very novice. Wow I can’t believe I solved this. But I spent the last 2 hours going through the inspector looking at the code of collapsible content. I found what I needed to change to width of the collapsible content. (width was all I needed, or may be the limiting factor). See photo 1.

Then I tried to see if I could save it. And you cannot make changes to a web page with inspector. They said wouldn’t hackers have a field day if you could. So they

(the people on the web) said you would have to look at CSS. and I have barely even seen any CSS code. But picture number 2 shows that I changed the width very easy saved and it worked like a charm. I went from 74.4rem to 84.4rem just enough. rem is like large pixels.

question number 6 was also asked at this page.

https://community.shopify.com/topic/1600841

I hope to open my store this week.