There are currently 2 types of button elements within blocks for Zipify Pages: the general type of button element and the dynamic product button element.
- 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 dynamic product button elements can be found in the Buy Boxes blocks. These types of buttons interact directly with your Shopify store Products and will be discussed in detail in other help articles.
Blocks that contain dynamic product buttons are found in the "BuyBoxes" category of page blocks:
General Button Options
The Button settings popup allows you to configure/adjust button styles (both for regular and hovered state) and button destination settings:
1. Button style settings include the ability to manipulate the button's Size, Shape, Alignment, Color, Padding and the Call to Action text, font size, font type and font color. Changes applied can be viewed in the built-in preview window.
2. Hover State settings (once you place your cursor over the button) give 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.
- Animation - animate your buttons using the list of available animations.
3. Button Destination settings allows you to specify the button's behavior/destination once it's clicked.
Button Destination Options
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 window or in a new one.
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/themes/customization/cart/use-permalinks-to-preload-cart
- If you wanted a discount code auto-applied to the Checkout when the items are added, you would write the URL like this (example):
- If you write the permalink url like this it goes to Cart page instead of the Checkout page (example): http://test.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://test.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
CRM: Create Lightbox And Connect A CRM List
In order to use this feature you first need to connect a CRM system to the ZP application through the Settings -> CRM Integrations 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 this system where you want the visitor's information collected.
Note: If you have multiple Domains for your store, to ensure that the optin 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.
The next step is to configure the styles for the pop-up form.
- Upload your own images for the progress-bar (GIF recommended)
- Banner (use it for security logos etc)
- Form image (left-hand side of the form).
Any of these images can be disabled by un-checking the check-box next to the image name.
The default set of form fields are: E-Mail address, First Name, Last Name and Phone number.
The Name fields can be disabled by un-checking the "Enable First Name/Last Name fields" check-box.
Click the check-box next to the "Enable Phone Number field" to show a phone number field on the form.
A GDPR Notification section has been added to the forms as well. More details about GDPR and how it works on forms can be found here.
Below the pop-up form settings you can also find and configure Post Submit Actions.
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 external URL (to specify any URL you want to send the visitor to post-submit)
The Sending confirmation 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 Constructor Interface provides no ability to view the lightbox pop-up - it only appears on a published page once the button is clicked.
Product: Link Button To One Of My Product Detail Pages
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.
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.
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 window 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.
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.