Help with adding a custom call to action button on home page

[TheDetailStore]

I have been relentless trying to copy this blog from a Shopify coder but in all honesty the steps are confusing as hell and it doesn't work for me, I get a message saying 'Liquid syntax error: Duplicate entries for tag: schema'

https://www.shopify.com/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-th...

I created a new call-to-action section in the code but these steps are not very clear as to where the code should be input in some of the steps and/or what has to be changed within the code.

Here is a link to my website - https://thedetail.uk/

I am trying to add a custom call-to-action button to the bottom of my home page bellow the set up steps.

If anyone could advise me on this in a simple way I would be very grateful.

[Ninthony · Accepted solution]

Go to your Sections folder and click Add a New Section. Name it "new-action-button" or whatever you want. Delete the code that auto generates in the file and add this instead:

<style>
.button {
  display: inline-block;
  padding: 0.85em 1.5em;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #5c6ac4;
  border: none;
  border-radius: 0.62em;
  box-shadow: 0 0.25em #999999; 
}
.button:hover {
  background-color: #202e78;
}
.button:active {
  background-color: #5c6ac4;
  box-shadow: 0 0.125em #666666;
  transform: translateY(0.25em);
}
  .container {
  text-align: center;
  }
</style>
<hr>
<div id="section-cta">
  <div class="container">
    <h3> {{ section.settings.text-box }} </h3>
    <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
  </div>
</div>
<hr>

{% schema %}
{
  "name": "New Action Button",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    },
    {
      "id": "link",
      "type": "url",
      "label": "Button link"
    },
    {
      "id": "linktext",
      "type": "text",
      "label": "Button text",
      "default": "Click here"
    }
  ]
  ,
  "presets": [
    {
      "name": "New Action Button",
      "category": "Custom"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Save, then go to your customize editor, click add new section, scroll to the Custom section, and add the "New Action Button section. All done.

[Ninthony · Accepted solution]

You can change any of these CSS properties:

.button {
  display: inline-block;
  padding: 0.85em 1.5em;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #5c6ac4;
  border: none;
  border-radius: 0.62em;
  box-shadow: 0 0.25em #999999; 
}

The button's size is determined by it's font size as well as it's padding. Adjust those values to adjust the size. To change the color you'd change the "background-color" property, just put whatever hex code you want in there. To change the text color, change the "color" property. You'll have to change the :hover and :active versions colors as well to whatever you'd want.

[Ninthony · Accepted solution]

Go to your Sections folder and click Add a New Section. Name it "new-action-button" or whatever you want. Delete the code that auto generates in the file and add this instead:

<style>
.button {
  display: inline-block;
  padding: 0.85em 1.5em;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #5c6ac4;
  border: none;
  border-radius: 0.62em;
  box-shadow: 0 0.25em #999999; 
}
.button:hover {
  background-color: #202e78;
}
.button:active {
  background-color: #5c6ac4;
  box-shadow: 0 0.125em #666666;
  transform: translateY(0.25em);
}
  .container {
  text-align: center;
  }
</style>
<hr>
<div id="section-cta">
  <div class="container">
    <h3> {{ section.settings.text-box }} </h3>
    <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
  </div>
</div>
<hr>

{% schema %}
{
  "name": "New Action Button",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    },
    {
      "id": "link",
      "type": "url",
      "label": "Button link"
    },
    {
      "id": "linktext",
      "type": "text",
      "label": "Button text",
      "default": "Click here"
    }
  ]
  ,
  "presets": [
    {
      "name": "New Action Button",
      "category": "Custom"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Save, then go to your customize editor, click add new section, scroll to the Custom section, and add the "New Action Button section. All done.

[TheDetailStore]

Amazing thank you this has worked! In terms of customization, how can I make it smaller and change the colour?

[Ninthony · Accepted solution]

You can change any of these CSS properties:

.button {
  display: inline-block;
  padding: 0.85em 1.5em;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #5c6ac4;
  border: none;
  border-radius: 0.62em;
  box-shadow: 0 0.25em #999999; 
}

The button's size is determined by it's font size as well as it's padding. Adjust those values to adjust the size. To change the color you'd change the "background-color" property, just put whatever hex code you want in there. To change the text color, change the "color" property. You'll have to change the :hover and :active versions colors as well to whatever you'd want.

[TheDetailStore]

Ok so I have changed the colours to match my them, the only thing I can't seem to change is that the text also goes dark when I hover over or click the button. Also how to I remove these lines in the picture so I can have it closer to the above section

[Ninthony]

Change the color property on the :active and :hover psudo elements in the css.  To remove the lines, just delete the "<hr>" tags out of the code.

[TheDetailStore]

There is only an option for the colour of the background button on both psudo elements - am I missing something?

<style>
.button {
display: inline-block;
padding: 0.85em 1.5em;
font-size: 1em;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: #E25353;
border: none;
border-radius: 0.62em;
box-shadow: 0 0.25em #999999;
}
.button:hover {
background-color: #db2727;
}
.button:active {
background-color: #db2727;
box-shadow: 0 0.125em #666666;
transform: translateY(0.25em);
}
.container {
text-align: center;
}
</style>

<div id="section-cta">
<div class="container">
<h3> {{ section.settings.text-box }} </h3>
<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
</div>
</div>

{% schema %}
{
"name": "New Action Button",
"settings": [
{
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "Title"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click here"
}
]
,
"presets": [
{
"name": "New Action Button",
"category": "Custom"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[Ninthony]

Add it:

.button:hover {
  background-color: #202e78;
  color: #fff;
}
.button:active {
  background-color: #5c6ac4;
  box-shadow: 0 0.125em #666666;
  transform: translateY(0.25em);
  color: #fff;
}

[Ninthony · Accepted solution]

If it doesnt work, there may be a more specific style being applied from your theme, so add an !important flag:

.button:hover {
  background-color: #202e78;
  color: #fff!important;
}
.button:active {
  background-color: #5c6ac4;
  box-shadow: 0 0.125em #666666;
  transform: translateY(0.25em);
  color: #fff!important;
}

[TheDetailStore]

Amazing that worked! It needed the 

!important;

Much appreciated for your time, you have been very helpful!

[myangelsn]

Thank you so much for this! I have gotten this and its working and I added 4 more buttons (for a total of 5) and that's working but the problem I'm having now is I have 5 different links in the url boxes and its all going to whatever the first link is. How do I fix this so each button opens a different link. Thank you