Solved

Image Banner Text Position

orchi
New Member
10 0 0

Hello. 

I am attempting to move the image banner text + button to the left hand side of the screen as shown on the images. I am using the Dawn Theme. 

 

How do I go about changing this, as the standard options doesn't allow me to change this. 

 

Furthermore, when switching to the mobile version, the text appaers on the middle of the photo. The text also need to be shown in the left hand corner. 

image banner text position mobile.pngimage banner text position.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @orchi,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>

.banner__content.banner__content--bottom-left {
  max-width: unset !important;
  align-items: flex-end !important;
}

.banner__box.content-container {
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 989px) {
  .banner__box.content-container {
    padding-bottom: 20px !important;
  }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716135704226.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 7 (7)

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @orchi,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
orchi
New Member
10 0 0
ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @orchi,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>

.banner__content.banner__content--bottom-left {
  max-width: unset !important;
  align-items: flex-end !important;
}

.banner__box.content-container {
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 989px) {
  .banner__box.content-container {
    padding-bottom: 20px !important;
  }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716135704226.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
orchi
New Member
10 0 0

This worked perfectly. Thank you very much. I have a few other issues at hand, would you be able to help me with those as well? 

ThePrimeWeb
Shopify Partner
2138 614 487

Can you list them and let me check? I have some paid projects I am busy with right now and I may not be able to attend to all of them. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
orchi
New Member
10 0 0

Here is one: 

Would it be possible to change the "search bar" location when switiching to mobile? But still keep the same position when in desktop version. (Exactly as Tom Ford has it - see reference) 


WhatsApp Image 2024-05-20 at 12.15.55.jpegsearch goes down to the second line on mobile version.pngdesktop version.png

orchi
New Member
10 0 0

Another one is changing the header text to look like the reference (Tom Ford). How do I go about that? 
So both the location + changing the font, or making the font bold. 

 

header menu.pngtom ford header.png