Call To Action Button

Solved
myangelsn
New Member
16 0 0

Hello,

 

I have made a call to action section and it shows up in customize and it lets me add the words and the links but after I save it no matter what I typed in the 5 different links it all goes to whatever the very first link is, no matter which one of the 5 buttons you click. I don't know what to change in the coding to make each button open its associated links. Thank you

This is the article I used to get this far

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

 

Heres the code I am using

 

<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 class="button-2">
<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext2 }}</a>
<div class="button-3">
<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext3 }}</a>
<div class="button-4">
<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext4 }}</a>
<div class="button-5">
<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext5 }}</a>
</div>
</div>
<hr>

{% schema %}
{
"name": "Call to action",
"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"
},
{
"id": "text-box-2",
"type": "text",
"label": "Heading2",
"default": "Title2"
},
{
"id": "link2",
"type": "url",
"label": "Button link 2"
},
{
"id": "linktext2",
"type": "text",
"label": "Button text 2",
"default": "Click here 2"
},
{
"id": "text-box-3",
"type": "text",
"label": "Heading3",
"default": "Title3"
},
{
"id": "link3",
"type": "url",
"label": "Button link 3"
},
{
"id": "linktext3",
"type": "text",
"label": "Button text 3",
"default": "Click here 3"
},
{
"id": "text-box-4",
"type": "text",
"label": "Heading4",
"default": "Title4"
},
{
"id": "link4",
"type": "url",
"label": "Button link 4"
},
{
"id": "linktext4",
"type": "text",
"label": "Button text 4",
"default": "Click here 4"
},
{
"id": "text-box-5",
"type": "text",
"label": "Heading5",
"default": "Title5"
},
{
"id": "link5",
"type": "url",
"label": "Button link 5"
},
{
"id": "linktext5",
"type": "text",
"label": "Button text 5",
"default": "Click here 5"
}
]
,
"presets": [
{
"name": "Call to Action",
"category": "Call To Action"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Accepted Solution (1)

Accepted Solutions
Evgeniy-M
Excursionist
35 6 7

This is an accepted solution.

@myangelsn 

Great! If the subject is solved, choose the answer as a solution please. Thanks!

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.

View solution in original post

Replies 9 (9)
IttantaTech
Shopify Partner
510 55 92

Hello , @myangelsn 

It should be like this.

<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 class="button-2">
<a href="{{ section.settings.link2 }}" class="button">{{ section.settings.linktext2 }}</a>
<div class="button-3">
<a href="{{ section.settings.link3 }}" class="button">{{ section.settings.linktext3 }}</a>
<div class="button-4">
<a href="{{ section.settings.link4 }}" class="button">{{ section.settings.linktext4 }}</a>
<div class="button-5">
<a href="{{ section.settings.link5 }}" class="button">{{ section.settings.linktext5 }}</a>
</div>
</div>
<hr>

 

You have put {{section.settings.link}} in all the <a> tag

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
myangelsn
New Member
16 0 0

Thank you so much for your help! When I tried to change them it gave me an error and said it could not be saved

Evgeniy-M
Excursionist
35 6 7

Hey @myangelsn . Coould you please share the full code of your section using the "insert code" button:

EvgeniyM_0-1635537862947.png

 

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.
myangelsn
New Member
16 0 0
<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 class="button-2">
     <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext2 }}</a>
      <div class="button-3">
     <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext3 }}</a>
      <div class="button-4">
     <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext4 }}</a>
      <div class="button-5">
     <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext5 }}</a>
  </div>
</div>
<hr>

{% schema %}
{
  "name": "Call to action",
  "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"
    },
{
      "id": "text-box-2",
      "type": "text",
      "label": "Heading2",
      "default": "Title2"
    },
    {
      "id": "link2",
      "type": "url",
      "label": "Button link 2"
    },
    {
      "id": "linktext2",
      "type": "text",
      "label": "Button text 2",
      "default": "Click here 2"
    },
  {
      "id": "text-box-3",
      "type": "text",
      "label": "Heading3",
      "default": "Title3"
    },
    {
      "id": "link3",
      "type": "url",
      "label": "Button link 3"
    },
    {
      "id": "linktext3",
      "type": "text",
      "label": "Button text 3",
      "default": "Click here 3"
    },
    {
      "id": "text-box-4",
      "type": "text",
      "label": "Heading4",
      "default": "Title4"
    },
    {
      "id": "link4",
      "type": "url",
      "label": "Button link 4"
    },
    {
      "id": "linktext4",
      "type": "text",
      "label": "Button text 4",
      "default": "Click here 4"
    },
    {
      "id": "text-box-5",
      "type": "text",
      "label": "Heading5",
      "default": "Title5"
    },
    {
      "id": "link5",
      "type": "url",
      "label": "Button link 5"
    },
    {
      "id": "linktext5",
      "type": "text",
      "label": "Button text 5",
      "default": "Click here 5"
    }
  ]
  ,
  "presets": [
    {
      "name": "Call to Action",
      "category": "Call To Action"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
Evgeniy-M
Excursionist
35 6 7

Hey @myangelsn .

I believe it should be like this:

<hr>
<div id="section-cta">
  <div class="container">
    <h3> {{ section.settings.text-box }} </h3>
    <div class="button-1">
     <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
    </div>
    <h3> {{ section.settings.text-box-2 }} </h3>
    <div class="button-2">
     <a href="{{ section.settings.link2 }}" class="button">{{ section.settings.linktext2 }}</a>
    </div>
    <h3> {{ section.settings.text-box-3 }} </h3>
    <div class="button-3">
     <a href="{{ section.settings.link3 }}" class="button">{{ section.settings.linktext3 }}</a>
    </div>
    <h3> {{ section.settings.text-box-4 }} </h3>
    <div class="button-4">
     <a href="{{ section.settings.link4 }}" class="button">{{ section.settings.linktext4 }}</a>
    </div>
    <h3> {{ section.settings.text-box-5 }} </h3>
    <div class="button-5">
     <a href="{{ section.settings.link5 }}" class="button">{{ section.settings.linktext5 }}</a>
    </div>
  </div>
</div>
<hr>

{% schema %}
{
  "name": "Call to action",
  "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"
    },
	{
      "id": "text-box-2",
      "type": "text",
      "label": "Heading2",
      "default": "Title2"
    },
    {
      "id": "link2",
      "type": "url",
      "label": "Button link 2"
    },
    {
      "id": "linktext2",
      "type": "text",
      "label": "Button text 2",
      "default": "Click here 2"
    },
  	{
      "id": "text-box-3",
      "type": "text",
      "label": "Heading3",
      "default": "Title3"
    },
    {
      "id": "link3",
      "type": "url",
      "label": "Button link 3"
    },
    {
      "id": "linktext3",
      "type": "text",
      "label": "Button text 3",
      "default": "Click here 3"
    },
    {
      "id": "text-box-4",
      "type": "text",
      "label": "Heading4",
      "default": "Title4"
    },
    {
      "id": "link4",
      "type": "url",
      "label": "Button link 4"
    },
    {
      "id": "linktext4",
      "type": "text",
      "label": "Button text 4",
      "default": "Click here 4"
    },
    {
      "id": "text-box-5",
      "type": "text",
      "label": "Heading5",
      "default": "Title5"
    },
    {
      "id": "link5",
      "type": "url",
      "label": "Button link 5"
    },
    {
      "id": "linktext5",
      "type": "text",
      "label": "Button text 5",
      "default": "Click here 5"
    }
  ]
  ,
  "presets": [
    {
      "name": "Call to Action",
      "category": "Call To Action"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.
myangelsn
New Member
16 0 0

OMG!! Thank you so much!!! It works!!!

Evgeniy-M
Excursionist
35 6 7

This is an accepted solution.

@myangelsn 

Great! If the subject is solved, choose the answer as a solution please. Thanks!

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.

View solution in original post

SVB96
New Member
4 0 0

I didn't get a button.

Only a clickable text. 

Can someone help me please?

Evgeniy-M
Excursionist
35 6 7

Hey @SVB96 .

It depends on CSS styles of your Shopify theme.

I believe there are CSS styles for the ".button" class in the author's theme that is why the "clickable text" that you see is displayed as buttons for them.

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.