All Collections
Zipify Pages - Tutorials & Documentation
Page Block Elements
The Button Element [Zipify Pages]
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. 

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

General Button Options

First, choose the Device Type (1) from the "Edit on" section at the top. Next, choose the Button Type (2) you'd like used from the dropdown menu. The button type allows you to control the style for the button. Each button type's style can be configured locally using the "Page Styles" settings or globally using the "Global Styles" settings.

The Button settings are comprised of the following 9 Tabs accessible from the sidebar of the builder, where you can configure everything about the button:

📝All settings are available in Desktop edit mode, while only style edits for Main, Spacing, Alignment, Size and Visibility are available in Tablet/Mobile modes.

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

  • Call to Action - The button text

  • 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

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

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

    • Home Page - Link the button to your store's Homepage

    • 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

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

  • 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

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

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

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

  • Text Color - The button text color
    ​

3. In the "Shape" tab you can edit:

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

4. In the "Border" tab you can edit:

  • Border Style - 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
    ​

5. In the "Box Shadow" tab you can edit:

  • Color - The color of the shadow

  • X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards

  • Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards
    📝 X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinates.

  • Blur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow

  • Spread - The size of the shadow. Range of allowed values is 0 - 20

6. In the "Spacing" tab you can edit:

  • Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border

  • Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element

7. In the "Alignment" tab you can edit:

  • Button Alignment - Left/Center/Right

8. In the "Size" tab you can edit:

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

9. In the "Visibility" tab you can edit:

  • Show on Desktop

  • Show on Tablet

  • Show on Mobile

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

📝 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.

📝 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 Settings > Domains of your Shopify admin. 

Next, click the "CRM Settings" button to choose the fields you'd like included and to complete the remaining setup 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 ZP Landing Page (published pages only )

  • Direct visitor to Home Page

  • Direct visitor to ZP Blog Post (published blog posts only)

  • Direct visitor to external URL (any specific URL)
    ​

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. 

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

ZP Landing 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.

📝 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.

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:

Home Page: Link to Your Store's Homepage

This option allows you to link the button to your store's homepage URL. You can also select whether you want to open the Homepage in the same browser tab or in a new one.

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.

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?