Liquid, JavaScript, themes, sales channels
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
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 %}
Solved! Go to the solution
This is an accepted solution.
Great! If the subject is solved, choose the answer as a solution please. Thanks!
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
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
Hey @myangelsn . Coould you please share the full code of your section using the "insert code" button:
<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 %}
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 %}
OMG!! Thank you so much!!! It works!!!
This is an accepted solution.
Great! If the subject is solved, choose the answer as a solution please. Thanks!
I didn't get a button.
Only a clickable text.
Can someone help me please?
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024