Re: Custom button placement on hero image

Solved

How can I customize button and text placement on a hero image?

patricia0928
Shopify Partner
11 0 2

I would like to move the text and button on my hero image. This is my website currently https://www.tanmadonnas.com/

The image below is how I would like to move the text and button. I would also like to be able to have a border with a customizable color fill around the text. I would also like to be able to customize my button. I use the Dawn theme.

FigmaLandingPage_1.png

Accepted Solution (1)
Van_Nguyen_GSG
Shopify Partner
161 23 42

This is an accepted solution.

@patricia0928, you can change the size & position by changing the following css.

 

.banner__box {
  position: absolute;
  top: 0; // e.g. 10rem, 100px, or 25%
  left: 0;
  right: 0;
  bottom: 0;

  width: auto; // e.g. 10rem, 100px, 25%, or 25vw
  min-width: 45rem;
  max-width: 89rem;
}

 

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!

View solution in original post

Replies 4 (4)

Van_Nguyen_GSG
Shopify Partner
161 23 42

hi @patricia0928 

 

  1. Navigate to the theme customizer
  2. Click "Image banner"
  3. Set the "Desktop content position" to "Middle Left"
  4. Paste the following into the "Custom css" textarea

 

 

.banner__box {
  background-color: #fbf5e6;
}

.banner__heading,
.banner__box {
  color: #040404;
}

.button {
  background-color: #f2b578;
  color: #040404;
}

 

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
patricia0928
Shopify Partner
11 0 2

How would I go about changing the positioning and size of the banner box? Do you know where in the code I could change that?

Van_Nguyen_GSG
Shopify Partner
161 23 42

This is an accepted solution.

@patricia0928, you can change the size & position by changing the following css.

 

.banner__box {
  position: absolute;
  top: 0; // e.g. 10rem, 100px, or 25%
  left: 0;
  right: 0;
  bottom: 0;

  width: auto; // e.g. 10rem, 100px, 25%, or 25vw
  min-width: 45rem;
  max-width: 89rem;
}

 

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
patricia0928
Shopify Partner
11 0 2

Thank you, this is sort of working but, I am using an older Dawn theme (I don't want to update because there are code changes) This code doesn't seem to be working for my Dawn version. I keep trying to move the text box to the left side of the image banner but it is not moving past the middle.