Debut theme - how to add a 'buy now' button to rich text section

Solved
Highlighted
New Member
3 0 0

Hello

I am building a site using the debut template. The second section on my home page is a 'rich text' box and, after the text, I want to add a 'buy now' button. But I think this needs to be added by hard code (for some reason). Can anyone help me with advice on how to do this? Much appreciated.

Many thanks.

Rob

0 Likes
Shopify Staff
Shopify Staff
335 31 70

Hello, @robpositive!

 

This is May from Shopify. Welcome to our Shopify Community! 

 

To clarify, are you referring to this section? 

If so, this section is only meant for text, and adding a code to this section is not possible. You can feature your product on your home page by adding a new section, then select 'Featured product'

 

If this is not what you are looking for, please let me know and we can continue with our support. It would also be very helpful if you have a screenshot or example of how you would like this section to look like.

 

Cheers,

 

May.

 

P.S: I have moved your post to our Shopify Design discussion board, and hopefully we can see more traction there 🙂 

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

0 Likes
New Member
3 0 0

Hi May

 

Thanks for your response. 

 

I know how to add a product page, but I don't want that look for the home page. Rather, I'd like a blank box, with text and a button, linking to my detailed product page. I've mocked up an example. It's odd you can easily add buttons to other sections; I've done it myself using 'image with text'. But not the most versatile section, the rich text.

 

Cheers.

 

Rob 

ActiFlex 5-in-1 Button.JPG 

 

0 Likes

Success.

Shopify Staff
Shopify Staff
335 31 70

Hi again, Rob!

 

Ah, thank you for clarifying and for the screenshot. With Debut theme, you can actually add your own custom HTML section. Feel free to follow the steps below!

 

1. From your admin, go to 'Online Store > Customize'.

2. On the editor to the left, click 'Add section'. Under 'Advanced Layout', add 'Custom content'.

3. Remove the two existing contents, then 'Add content > Custom HTML'.

4. Copy and paste the code below:

<center>
  <h3>Title Here</h3>
  <p>Your content here</p>
  <br>
  <a href="your_link_here" class="btn hero__btn">Button Name</a>
</center>

You'll then want to change your header title, content, button link and button text on the code. 

5. Change your 'Container width' to 100%.

6. Click 'Save'.

 

After you save the changes, you should have a text with a button, just like the screenshot you sent above!

 

If this is not what you are looking for, please let me know and we can continue with our support! 

 

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

1 Like
New Member
3 0 0

Hello

 

Thanks so much, this is brilliant. Well, almost!

 

I've followed the instructions and added the button, but the font size is too small (for the header and text) and with custom content you can't change it.

 

Image added which shows the version with the button above the one with the right text size! 

 

Any idea how to change this in the code? 

 

Cheers.

 

Rob

 

ActiFlex 5-in-1 Button Added.JPG

0 Likes
Astronaut
1007 130 238

Change the <h3> </h3> tags to <h1> </h1> or <h2> </h2>, h tags are heading tags, they range from 1 to 6 and the higher the number, the smaller the heading size. If that's still not big enough for you, you can also add a class name to your h tag and give it a set font size with Style tags above your custom HTML. Like this:

 

<style>
.custom-heading {
font-size: 40px;
}
</style>
<center>
  <h1 class="custom-heading">Title Here</h1>
  <p>Your content here</p>
  <br>
  <a href="your_link_here" class="btn hero__btn">Button Name</a>
</center>
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
2 Likes
Shopify Staff
Shopify Staff
335 31 70

Hello Rob!

 

Glad to hear that we are on the right track! 

 

Thank you so much @Ninthony for your suggestion! That is very helpful. Rob, I recommend giving Ninthony's code a try, and see if that helps. In case the suggestion doesn't work or if it is not what you wanted, please let me know and I will reach out to our theme support team for additional help. 

 

Let me know how it goes 🙂

 

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

0 Likes
New Member
4 0 0

I added using Custom HTML section code but the thing is when i click the button it doesnt direct me to product page. could you solve it?


@May wrote:

Hi again, Rob!

 

Ah, thank you for clarifying and for the screenshot. With Debut theme, you can actually add your own custom HTML section. Feel free to follow the steps below!

 

1. From your admin, go to 'Online Store > Customize'.

2. On the editor to the left, click 'Add section'. Under 'Advanced Layout', add 'Custom content'.

3. Remove the two existing contents, then 'Add content > Custom HTML'.

4. Copy and paste the code below:

<center>
  <h3>Title Here</h3>
  <p>Your content here</p>
  <br>
  <a href="your_link_here" class="btn hero__btn">Button Name</a>
</center>

You'll then want to change your header title, content, button link and button text on the code. 

5. Change your 'Container width' to 100%.

6. Click 'Save'.

 

After you save the changes, you should have a text with a button, just like the screenshot you sent above!

 

If this is not what you are looking for, please let me know and we can continue with our support! 

 

Cheers!

 


 

0 Likes
New Member
4 0 0

I added using Custom HTML section code but the thing is when i click the button it doesn't direct me to product page. could you solve it?


 


 

0 Likes

Have you replaced your_link_here with an actual URL? What have you put there?

I'm a software engineer. I make things happen automatically.
0 Likes