In this article, you will learn how to direct a click action to a link, a section, an email address and/or a phone number to an element so your customers can quickly access the other links, section, send an email or make a phone call to you without leaving the page.
This tip can be applied to any type of page and is super handy when applied to the Contact page of your store with direct email submission and phone dialing.
This video tutorial will give you the details about setting up Click action:
Customize your pages with PageFly for Free here
Direct to another link
- Step 1: Select the element you want to insert a direct link to (a button, an icon or a block – check the breadcrumbs to make sure you got the right one)
- Step 2: Go to General tab > ACTION > Click Action > Choose Go to URL on Dropdown menu.
- Step 3: Insert your URL by pasting the URL you want in the box. If you want it linked to any collections/products/pages/blog posts in your store, you can tap on the corresponding button.
- Step 4: Turn on Open in new tab so it directs the action to a different tab (optional).
You can upload a PDF file to a button for customers to download it. Check this article for more details.
Direct to an internal section of the page
Note: Scroll to section only applies for section, not row or column. You can select any section of the page to set up this function.
Name the section
If you want to direct the element to an internal section of the page, you need to name the section first.
Note: All your sections in the page editor are automatically named as ‘Section’, so in order to choose the right section, it is suggested to change the name of each section to categorize it clearly.
The gif below will give you a better demonstration of how to do this. You can change your section name is by using the ATTRIBUTES setting:
You can check this video of how to name a section:
Direct to an internal section of the page
- Step 1: Select the element you want to insert a direct link in (a button, an icon or a block – check the breadcrumbs to make sure you got the right one)
- Step 2: Go to General tab > ACTION > Click Action > Choose Scroll to section on Dropdown menu.
- Step 3: Choose section in Scroll to section drop-down box.
This gif will give you a better demonstration of how to link an element to a specific section of an existing page.
This video will give you a better demonstration of how to link an element to a specific section of an existing page
Top Offset: Spacing between the top screen edge of the browser and the destination section
You can check this GIF to know how to adjust the Top Offset:
This is how Top Offset works on page:
Open pop-up content
This click action helps you to open a pop-up content window of a Youtube video or other store content (such as a collection, a product, a blog post).
- Select the element you want to insert the link in (a button, an icon or a block – check the breadcrumbs to make sure you got the right one).
- Go to General tab > ACTION > Click Action > Choose Open Pop-up on Dropdown menu.
- Choose the Pop-up content in the drop-down menu: Youtube Video or Store Content then insert the URL and modify other settings to the respective content.
Link to a phone number
- Step 1: Select the element you want to insert the link in (a button, an icon or a block – check the breadcrumbs to make sure you got the right one).
- Step 2: Go to General tab > ACTION > Click Action > Choose Call Number on Dropdown menu.
- Step 3: Put the phone number in the box. For example: (+0) 111 222 333.
Link to an email address
- Step 1: Select the element you want to insert the link in (a button, an icon or a block – check the breadcrumbs to make sure you’ve selected the right one).
- Step 2: Go to General tab > ACTION > Click Action > Choose Send Email on Dropdown menu.
- Step 3: Click the icon in the Send Email box to insert the email details (including email address, email subject, email content).
Finally, Save & Publish to check the result on your Live page.
Previous article