Add Button to Custom Content - Debut Theme

FarberStudio
New Member
2 0 0

I'm editing our home page with a "Custom Content" section and would like to "add block" that is a simple button that links to another page on the site, but adding a button is not available in the list. Does anyone know how to add a custom button through the HTML, or another way?

 

Screen Shot 2021-11-11 at 13.25.55.jpg

Replies 4 (4)
suyash1
Shopify Partner
3743 410 612

@FarberStudio- you can use <button> html code to add any button to html code

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
Savior
Pathfinder
113 17 42

@FarberStudio 

Click on Custom HTML and add Html code like below and add some css as per your requirement.

<a href="link-to-page"><button class="btn_class">Demo</button></a>

Twinkle_34_0-1636779775137.png


If helpful then please Like and Accept Solution.

 

FarberStudio
New Member
2 0 0

Thank you sincerely for the help. I'm getting close ... can I make the custom html button red and appear like the other buttons on the site? Also, how do I center it?

Where in the css modules would I be able to edit the button style like that?

Thanks !

Screen Shot 2021-11-15 at 12.15.15.jpg

Savior
Pathfinder
113 17 42

@FarberStudio 

Okay so when you add a button using custom html, give class with it like this: class="your_class_name"

Example: <a href="link-to-page"><button class="btn_class">Demo</button></a>

For CSS:

As you are using Shopify Debut theme so to edit/add css of button follow this steps:

1. Go to your store. Click on Actions > Edit Code.

2. In Assets you will find theme.css file. There you can add CSS for the button like follow:

.your_class_name
{
background-color: red;
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}

If you have doubts or problem in giving CSS. Please let me know.


If helpful then please Like and Accept Solution.