Add Call to Action buttons in Store List

In this guide article, we will explain how you can add one or more call-to-action buttons in the store list of the Store Locator, here is the screenshot of the store locator list that will have a new call to action.

In the default store list, there is already a call to action button which serves the data of the website field of the store.

Hide the Default Website Call to Action #

In order to hide the default CTA from the list can be done from the UI tab of the ASL Settings, disable the switch and save the settings.

Add a New Call to Action Button #

1- To add a new call to action button, first, you have to decide on which field you are going to bind it, so most probably you will create a custom field through the ASL Settings as shown below.

2- once you have added the additional fields, now you should add data to that field, so only then the button will appear for those stores that have the field data available.

3- As you have added the field data, now it is time to add that to the template, go to the ASL Settings > Customizer, select the template that you are using from the Template Dropdown and select list from the Section Dropdown.

4- Click on the Load Template, to load the existing HTML template of the list, and copy the given HTML code to make a new call to action.

{{if booking}}
  <a target="_blank" href="{{:booking}}" class="btn btn-asl">[Booking]</a>
{{/if}}

5- We will paste the above HTML code into the template where we want to add the button, please note that we have created a field named booking that is in the code, if you have named it differently, you should replace it before pasting the above HTML code, the name should be in a small case without any space or dash, as we want to place them below the last line, we have wrapped the buttons in the row and column container.

{{if booking}}
  <a target="_blank" href="{{:booking}}" class="btn btn-asl">[Booking]</a>
{{/if}}

6- In case you want to add more buttons, make just add them inside the same container div as given below.

{{if booking}}
  <a target="_blank" href="{{:booking}}" class="btn btn-asl">[Booking]</a>
{{/if}}
{{if contact_url}}
  <a target="_blank" href="{{:contact_url}}" class="btn btn-asl ml-2">[Contact Us]</a>
{{/if}}

6- Once you have added the code, click on the Save button to apply the changes.

Example of WhatsApp Button Code #

If you want to add the WhatsApp code to the listing, the steps will be the same as above except the button code is a bit different, you can copy it below.

  {{if whatsapp}}
        <a href="https://wa.me/{{:whatsapp}}?text=Hello" class="btn btn-asl btn-green whatsapp-btn">
            <span class="d-flex align-items-end"><i class="ico-whatsapp"></i> <span>[WhatsApp]</span></span>
        </a>
  {{/if}}

Create a Big Call to Action #

If you want to create a full-width CTA button, please add btn-block class next to the btn-asl as given below.

{{if booking}}
      <a target="_blank" href="{{:booking}}" class="btn asl-btn btn-block mt-2">[Booking]</a>
{{/if}}