Skip to documentation content

CTA

All complete examples

Demonstrate CTA.

What this example teaches

  • Implement the CTA section with its owned custom fields
  • Keep custom fields on the template that owns them

View this pattern on the live demo site

Files

Closing call-to-action band used at the bottom of many pages.

Liquid
{% comment %}
	Allows the user to define a simple CTA to be displayed on the page in its own section

	Inputs:
		section_class - optional classes on the outer section (defaults to vertical padding)
		section_id - an optional id to apply to the section

	Custom Fields:
		simple_cta_heading
		simple_cta_text
		simple_cta_button_url
		simple_cta_button_label

	Outputs:
		section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}

{%- var show_cta = false -%}
{%- if entity.simple_cta_heading.is_valid or entity.simple_cta_text.is_valid -%}
	{%- set show_cta = true -%}
{%- elsif entity.simple_cta_button_url.is_valid and entity.simple_cta_button_label.is_valid -%}
	{%- set show_cta = true -%}
{%- endif -%}
{%- if show_cta -%}
	<section class="{% if section_class %}{{ section_class }}{% else %}py-4 py-lg-5{% endif %}"{% if section_id %} id="{{ section_id }}"{% endif %}>
		<div class="container px-3 px-lg-4">
			<div class="text-bg-dark rounded-4 p-4 p-md-5 shadow-sm">
				{%- include "/partials/_simple_cta.liquid" heading:entity.simple_cta_heading text:entity.simple_cta_text button_url:entity.simple_cta_button_url button_label:entity.simple_cta_button_label cta_invert:true -%}
			</div>
		</div>
	</section>
	{%- set section_rendered = true -%}
{%- else -%}
	{%- set section_rendered = false -%}
{%- endif -%}