Overview

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

The Basic type of button element can be found within most sections that contain buttons, such as those in the "Buttons" category of the page sections library. 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 sections that include Opt-in Forms for lead collection and email list growth.
The Product button element can be found in the Product sections. These types of buttons interact directly with your Shopify store Products and are discussed in detail in these other help articles.

📝 Sections that contain the Product Button element are found in the "Products" category of the page sections library:

A new basic button element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Button" element:

Basic 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
Click Action - Define what happens when the button is clicked, such as its destination or function:
- 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 section - Anchor the Button to a specific Section 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 Click Actions (Details)

URL: Link To A Specific URL

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.

Please see this Shopify guide for information on how to add products to their checkout page using a permalink url: https://help.shopify.com/en/manual/products/details/cart-permalink
If you wanted a discount code auto-applied to the Checkout when the items are added, you would write the URL like this (example):
https://yourstore.myshopify.com/cart/123456789:1?discount=YourDiscountCode
If you write the permalink url like this it goes to Cart page instead of the Checkout page (example): http://yourstore.myshopify.com/cart/add?id=123456789&quantity=1
If you want to add multiple items to the cart then you'd write the url like this (example): http://yourstore.myshopify.com/cart/add?id[]=123456789&quantity=1&id[]=987654321&quantity=1
The product/variant ID number for the url above works the same way as explained in the Shopify help guide.

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 which includes a Product Button instead.

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 CRM profile as custom properties:
- UTM Campaign (ZP)
- UTM Content (ZP)
- UTM Medium (ZP)
- UTM Source (ZP)
- UTM Term (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.

Product: Link Button To One Of My Product Detail Pages

Select one of your store's products via the "Choose Product" button to have the visitor sent to the specified Shopify product detail page.

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 Section: Anchor Button To A Specific Section On This Page

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

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.