The Button Element [Zipify Pages]
Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

Overview

There are currently 3 types of button elements within blocks for Zipify Pages.

  • The General type of button element can be found within most blocks that contain buttons. The options for these types of buttons will be discussed in detail in this help article. 

  • The Opt-in type of button element can be found in blocks that include Opt-in Forms for lead collection and email list growth.

  • The Dynamic Product button elements can be found in the Buy Boxes blocks. These types of buttons interact directly with your Shopify store Products and are discussed in detail in these other help articles. 

*Note: Blocks that contain dynamic product buttons are found in the "Buy Boxes" category of page blocks: 

General Button Options

The Button settings are comprised of the following 3 main tabs where you can configure everything about the button:

  • Main

  • Styling

  • Settings

1. In the "Main" tab you can edit the following:

  • Button CTA Text - The CTA text used for the button

  • Font Name - The font type you'd like used for the button text

  • Font Size - The font size you'd like used for the button text

  • Font Style - Bold / Italicize / Underline

  • Destination - Specify the button's behavior/destination once it's clicked on:

    • URL - Link To A Specific URL

    • Cart - Directs to the Cart page (/cart) on your store with no product added

    • CRM - Create a Lightbox Opt-in Popup connected to a CRM List

    • Product - Link the Button to one of your Product Detail Pages

    • ZP Page - Link the Button to one of your published ZP Landing Pages

    • ZP Blog Post - Link the Button to one of your published ZP Blog Posts

    • Page Block - Anchor the Button to a specific Block on the Same Page

    • Booster Page (ZP Plus only): Add "Booster Page" one-time use coupon functionality

    • Media - Display an Image or Video in a lightbox popup

2. In the "Styling" tab you can edit:

  • Button Shape - The shape you'd like used for the button

  • Button Color - The color you'd like used for the button

  • Text Color - The button text color

  • Border - None, solid, dotted or dashed

  • Border Size - How thick you want the border to be

  • Border Color - The color you'd like used for the border

  • Non-Hover State - Apply an animation to your button that shows upon page load

  • Hover State - The button hover state once you place your cursor over the button (Desktop only) gives the following options:

    • Change opacity - set opacity level by a percentage

    • Change color - select colors for both button and button text

    • Invert color - use button color for button text and vice versa

    • Underline - underlines the button's CTA text

    • Animation - animate your buttons using the list of available animations

3. In the "Settings" tab you can adjust:

  • Button Alignment - Left/Center/Right

  • Button Size - S/M/Auto/Full/Custom

  • Button Padding - Top/Bottom and Left/Right in px

Button Destination Options (Details)

This is the default option for the button. It allows you to specify the URL where you want to direct the visitor. You can also select whether you want to open the specified URL in the same browser tab or in a new one.

Use the mailto:user@server format for Email links.

Use the tel:phone number format for Phone links.

Helpful Tip: You can use a Permalink URL here to add product(s) to either the Cart page or the Shopify Checkout page directly. 

Cart: Directs to the Cart page on your store

This option allows you to direct your customers to the Cart page of your store when the button is clicked. For example: www.yourstore.com/cart

Note: This option does not add any product(s) to the cart on your store. For "Add to Cart" button functionality, use a Buy Box block instead. 

CRM: Create Lightbox Popup And Connect A CRM List

In order to use this feature you first need to connect a CRM system(s) to Zipify Pages in the Settings > CRMs section.

All connected CRM systems will appear in the "Select CRM" drop-down list. Select your desired CRM system to activate the "Select Mailing List" drop-down list and choose the List (Tag if using Infusionsoft) from the CRM system where you want the visitor's information collected.

Note:  If you have multiple Domains for your store, to ensure that the opt-in works and the subscriber is passed to your CRM correctly at all times, you should click the "Redirect all traffic to primary domain" option in Online Store > Domains of your Shopify admin. 

Next, choose the Fields you'd like included for your opt-in form. The default set of form fields are:

  • E-Mail address

  • First Name

  • Last Name

  • Phone number

  • Enable UTM parameters tracking (hidden)
    📝UTM parameters will be passed to the profile as custom properties:
    - UTM Campaign (ZP)
    - UTM Content (ZP)
    - UTM Medium (ZP)
    - UTM Source (ZP)

The First/Last Name and Phone fields can be disabled by un-checking the respective checkboxes if you don't want them used for the form.

The next step is to configure the Text and Styles for the pop-up form. Available options: 

  • Upload your own images for the Progress bar (GIF recommended)

  • Enter text for the Form Name, including any Font Styles you want applied

  • Banner (use it for security logos etc)

  • Form image (left-hand side of the form)

  • Opt-in button text, text color and button color

Any of these images can be disabled by un-checking the check-box next to the image name. 

In the GDPR Notification and Privacy Notification sections you can toggle on/off these text fields from showing on your opt-in form. You can also edit the text and text color. The GDPR message is only shown to EEA site visitors based on IP address.

Finally, configure the Post Submit Actions for your Opt-in Form, which is the action you want taken after a visitor successfully opts-in to your form. The available Actions are:

  • Leave visitor on the same page

  • Direct visitor to previously created page (to select one of your already published ZP pages)

  • Direct visitor to previously created post (to select one of your already published ZP blog posts)

  • Direct visitor to external URL (to specify any URL you want to send the visitor to post-submit)

The Sending confirmation checkbox gives you an option of whether or not to display a custom confirmation message on-page once the form is submitted. 

NOTE: You're only able to save your changes if the CRM system and List are selected for the pop-up form. The Page Builder provides no ability to preview the lightbox pop-up - it only appears on a published page once the button is clicked. 

This option allows you to select one of your Store's products to have the visitor sent to the specified Shopify product detail page.

For your convenience, you can find your desired product through a Live Search input field or by selecting the product thumbnail shown in the popup:

ZP Page: Link Button To A Previously Published Zipify Page

This option allows you to select any of your previously published ZP pages and link to them once the button is clicked.

You can also select whether you want to open the page in the same browser tab or in a new one.

NOTE: In case you've removed/unpublished the page where the button is linked to, it will give the visitor a "404 page not found error" once the button is clicked.

ZP Blog Post: Link Button To A Previously Published ZP Blog Post

This option allows you to select any of your previously published ZP blog posts and link to them once the button is clicked.

You can also select whether you want to open the page in the same browser tab or in a new one.

Page Block: Anchor Button To A Specific Block On This Page

This option allows you to "anchor" the button to another specific block on the same page. On the published page, when the button is clicked it will scroll the page to the specified block.

Booster Page (Available in ZP Plus only): Add "Booster Page" functionality

Booster Page automates and simplifies the distribution of Amazon and Shopify one-time use coupons. To set up the Booster Page block on this page add it here, and use the Booster Page settings in the header of the page constructor. See this help article for the details. 

Media - Display an Image or Video in a lightbox popup

The media option allows for displaying either an image or a video in a lightbox popup when the button is clicked on the published page. For an "Image" click the "Choose Image" button and add the desired image from your Image Library. For a "Video" click on the "Add Video" tab and then paste in your video's URL or embed code into the available field.

Did this answer your question?