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

Solved
TheDetailStore
Excursionist
33 0 14

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.

 

Accepted Solutions (3)

Accepted Solutions
Ninthony
Shopify Partner
2247 339 901

This is an 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.

If my solution helped you, please like it and accept it as the solution!
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

View solution in original post

Ninthony
Shopify Partner
2247 339 901

This is an 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.

If my solution helped you, please like it and accept it as the solution!
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

View solution in original post

Ninthony
Shopify Partner
2247 339 901

This is an 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;
}
If my solution helped you, please like it and accept it as the solution!
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

View solution in original post

Replies 10 (10)
Ninthony
Shopify Partner
2247 339 901

This is an 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.

If my solution helped you, please like it and accept it as the solution!
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

View solution in original post

TheDetailStore
Excursionist
33 0 14

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

Ninthony
Shopify Partner
2247 339 901

This is an 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.

If my solution helped you, please like it and accept it as the solution!
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

View solution in original post

TheDetailStore
Excursionist
33 0 14

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
Shopify Partner
2247 339 901

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.

If my solution helped you, please like it and accept it as the solution!
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
TheDetailStore
Excursionist
33 0 14

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
Shopify Partner
2247 339 901

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;
}
If my solution helped you, please like it and accept it as the solution!
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
Ninthony
Shopify Partner
2247 339 901

This is an 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;
}
If my solution helped you, please like it and accept it as the solution!
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

View solution in original post

TheDetailStore
Excursionist
33 0 14

Amazing that worked! It needed the 

!important;

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