How to left-align text on the "image with text overlay" in Debut?

Kim_Bonner
New Member
3 0 0

I'm currently using Debut (https://shop.makelovelythings.com) and I'd like to make the overlay text left-aligned instead of centered so it doesn't run over the products in my image. I'm new to Shopify, so I'm having trouble finding that option. Is it something I need to change in the code, and if so where do I find it?

Thanks!

Replies 26 (26)
Lixon_Louis
Shopify Partner
1193 35 268

Hey Kim, 

If this is your desired layout http://take.ms/M3iKN

1. Open sections/hero.liquid (Themes > Edit code)

2. Change 'text-center' to 'text-left' as in this screenshot http://take.ms/ONfCM

3.  Add this css code to the very bottom of theme.scss.liquid

.hero__inner .mega-subtitle{
 margin: 0;
}

 

maya
Tourist
47 0 3

Hi Kim,

 

You can add text-align: left and remove margin: 0 auto; on this 

 

#shopify-section-hero .page-width {

  margin: 0; 

  text-align: left;

}

 

Let me know if you have success.  That is 100% solution.

Kim_Bonner
New Member
3 0 0

I got it to work! Thanks so much for your help, Maya and Lixon! 🙂

Larry2
Shopify Partner
1 0 0

This is great, thanks Maya and Lixon.

How can I make it on the debut theme so I can have multiple "Image with text overlay" sections go from Left Align to Right Align to Left Align?

Thanks!

Zoe4
New Member
3 0 0

Hi Lixon

I followed your instructions but while it has pulled it to the left it has gone funny. Are you able to tell me what I have done wrong?

Zoe4
New Member
3 0 0

Ah all good I have worked it out! For anyone else who gets stuck- theme.scss.liquid  is under Assets

SkyLaur
New Member
1 0 0

I followed these directions and the text for the "Heading" is changed, but the text underneath is still centered

May
Shopify Staff
Shopify Staff
333 33 166

Hi, @SkyLaur!

 

May here from Shopify.

 

Looking through this thread, it looks like the code suggestions were made a few years ago, and it may not work if you have the latest version of Debut installed. If you don't find the codes above working with your newly installed theme, feel free to follow the steps below.

 

1. Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results.

2. Go to 'Online store > Actions > Edit code'.

3. Open up 'theme.scss.liquid' located inside the 'Assets' folder.

4. Scroll down to the bottom of the file and paste the following code:

 

.hero .mega-subtitle, .hero .mega-title {
  margin: 0;
  text-align: left;
}
.hero__btn {
  float: left;
  margin-top: 10px;
}

This code will left align all elements on your slideshow overlay including the heading, subheading and button.

5. Click 'Save'.

 

After you save your changes, your image with text overlay section should look similar to this: 

 

If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made and supported by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

 

Let me know if you have any followup questions.

 

Cheers!

 

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

SST
New Member
4 0 0

@May 

 

I gave your code a shot.  I copied it into my code per your instructions below, but it only seemed to impact the heading text (that lays over the Hero image).  The text under the heading didn't seem to be impacted. 

 

You can see what is happening at refurbishedflame.com.  The Heading text is right aligned, but the text under it seems to stay centered.

 

Any help you can provide would be greatly appreciated.  Also, I tried to go to the Shopify Experts link you sent but it sent me to a dead page.  Let me know if there's someone else I should reach out to.

 

Thanks!

Steve

May
Shopify Staff
Shopify Staff
333 33 166

Hi, @SST!

 

Thank you for dropping by and leaving a comment here. 

 

For right-aligning the overlay elements, you'll want to replace margin: 0; on the second line with margin-right: 0px;. So, you'll want to paste the following code on the bottom of your 'theme.scss.liquid' file.

 

.hero .mega-subtitle, .hero .mega-title {
  margin-right: 0px;
  text-align: right;
}

.hero__btn {
  float: right;
  margin-top: 10px;
}

 

 

Let me know if this helps! 

 

Regarding the Shopify Experts link, sorry that it took you to a dead page. I have fixed the link in my original post, you can also visit this link to visit our Shopify Experts page. Alternatively, since Debut is a theme made and supported by Shopify, our theme specialists may be able to help out if your account is eligible. If you would like to explore this route, you can reach out to our 24/7 support team here.

 

If you have any followup questions, please feel free to reply to this thread!

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

SST
New Member
4 0 0

@May

 

This worked perfectly to align the text in the hero image to the right.

 

I'm now experimenting with placing the text centered, but vertically aligned to the top of the image.  Is there any code I can input to change the vertical alignment so the text floats up to the top of the hero image?

 

Thanks!

Steve

May
Shopify Staff
Shopify Staff
333 33 166

Hi, @SST!

 

Aligning texts or items vertically is definitely possible. Check out this third party resource that discusses everything about vertical-align CSS properties. In this case, you'll want to edit your 'theme.scss.liquid' file and add the following code to the bottom of the file:

 

  .hero__inner {
    vertical-align: top;
  }

Alternatively, you can edit your 'hero.liquid' file and add the code below on the very top of the file.

<style>
  .hero__inner {
    vertical-align: top;
  }
</style>

You can choose to add the code on either file (you don't need to do both).

 

Let me know if this helps.

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Alon23
Tourist
16 0 2

Hi May,
Thanks, this helps a lot!

I have a question:
We have been using many different "hero"s (Image with text overlay) on our site - we have two in the homepage and a few others in different pages as well (we changed the code and are using the sections feature in almost all of our pages by duplicating these section, changing their names).

How do we make this "left text alignment change" to one hero only and not the all the hero sections in our site?

 

Tnx

Alon23
Tourist
16 0 2
May
Shopify Staff
Shopify Staff
333 33 166

Hi, @Alon23!

 

It's quite difficult to tell which code to insert or change without looking directly into your customized codes. From your explanation, it looks like you can use inline CSS instead to modify individual hero sections without affecting the entire hero image on your website. 

 

To start, you'll want to find the HTML code of the hero section, then you can inject an inline CSS for example, the following is the code of your text:

 

<h2 class="h1 mega-title mega-title--large">Image with text overlay</h2>

you can add style="text-align: left;" inside the <h2> tag, so your code will look like this:

 

<h2 class="h1 mega-title mega-title--large" style="text-align: left;">Image with text overlay</h2>

If you have further questions about this, feel free to start a new thread or reach out to one of our Shopify Experts.

 

Cheers!

 

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Lisa1995
New Member
1 0 0

Hello May,

 

I tried to input the code, but it only had impact on my button label?

My titles are still centered. Can you maybe help me out?

 

Thanks!

 

Lisa 

Shaunmihikids
Excursionist
14 0 4

Hi @May 

Thanks for your help here! Related question - how do you make the heading text go over two lines (i.e. add a line break)?

The title of my heading is "sunglasses for mini hipsters", but i'd like to be say:

sunglasses for
mini hipsters

Thanks in advance!

Shaun

 

mihi.PNG

IttantaTech
Shopify Partner
525 55 95

@Kim_Bonner 

Thanks for post

i can see left align text top banner do you have any other section so let me know.

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
Shaunmihikids
Excursionist
14 0 4

Hi @IttantaTech 

Would you please be able to provide any direction re my query above?

Cheers

Shaun