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

Solved
New Member
4 0 0

Hi, 

I have the same request,  followed the instruction and created the HTML custom section and the button was created, the only problem is that when i click the button it goes to 404 page not found. and on a side note when i put the code for HTML i put my product's link on ( your link here ) i removed and put the link but somehow the button disappears, please help me. thank you so much 

0 Likes
Shopify Staff
Shopify Staff
335 31 70

Hi, @Aylinkh89!

 

May here from Shopify. Welcome to our Shopify Community!

 

Are you still having this issue? If you are, could you share a link to your store so I can take a look into this? To ensure that your button does not lead to a 404 page, I recommend copying your URL that you are going to put in the code, to your browser to ensure that this page does not lead to a 404. It is quite easy to accidentally add or delete a character or two from the URL, which can lead to a 404 when the URL does not match the original URL. 

 

Looking forward to hear back from you. If you have any questions about this, please let me know!

 

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
2 0 0

How do you change the button color and the font

0 Likes
New Member
2 0 0

I have a question:

 

I want to change the color of the button using Hex colors. What is the code for that. I also want to change the font of both the headers and the button. What is the code for that?

0 Likes
Shopify Staff
Shopify Staff
335 31 70

Hey, @preserve_and_su!

 

You can customize the styling of this section using CSS. To add CSS to the code, you can add style="[your styling here]" inside the triangle brackets. For example:

 

  • To add or change the button's colour, you can add style="background-color: #000;" inside the <a href> tag. So, your button code should look like this: 
    <a href="your_link_here" class="btn hero__btn" style="background-color: your_hex_color_here;">Button Text</a>
  • To change the font, you can add style="font-family: Courier New;". Here's a snippet example to change heading font: 
    <h3 style="font-family: your_font_here">Title</h3>

    Please note that only a certain fonts will work with doing it this way. If you are planning to add custom font, you may need to reach out to a Shopify Expert to add this font to your store first before you can use it.

 

In case you want to know other CSS codes to customize your HTML, I highly recommend checking out W3School's document on CSS properties.

 

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

0 Likes
New Member
5 0 0

Hi, I have a similar problem and the code you provided worked out great. However, where can I find the "All Products" URL to replace the "your_link_here"?

 

Thanks

0 Likes