On this page

Blocks which contain the Image Element can be found in the "Images" section of the page blocks library: 

Working with the Image Options

Each image element has an image placeholder which states the recommended image size for the image. 

Adding an Image

Click on the Image element itself or on the blue pencil icon to open up the Image Library where you can either select an existing image from your library or upload a new one.

Note:  The image element supports the following image types only:

  • JPG / JPEG

  • PNG

  • GIF

The MAX file size supported for Images is 5 Mb and for GIFs is 6.5 mb

*Note: larger image/gif file sizes may decrease page load speed. It's recommended to use light-weight images when possible.

Once your image is selected, the image file name and original image size will be displayed above the image. 

Note: Images added to your pages from the Image Library also employ a Lazy Loading coding technique which defers the loading of off-screen images resulting in improved page load speed.

Crop & Rotate

Click the "Crop & Rotate" button if you'd like to crop or rotate the image prior to adding it to your page. Presets for popular aspect ratios are included as well as a "Free" mode to crop it the way you'd like to. You can also Rotate the image clockwise or counterclockwise as you see fit: 


Click the "Change" button to be taken back to your Image Library to select a different image or upload a new one instead.

Alt text

You can also enter Alt text (optional) for the image. If the image fails to load on the page, the Alt text appears in a blank box that would normally contain the image. Alt text also provide better image context/descriptions to search engine crawlers, helping them to index an image properly for SEO optimization.

Additional Image Options

Shape / Alignment

Various image shape options are available from the default square edges to rounded edges and various gradients in-between. 

The image alignment option allows you to choose left, center or right alignment for the image (within the image area for a given image element. Doesn't work if the image already occupies full-width of the image area). 


Choose an image size (in percents of the actual image size for the available image area for a given image element) from a list of pre-defined options from Small to Extra Large. There is also a Custom image size option available which allows you to set the image size in percents from 1 to 100. 

Max Width

Ability to set the Max Width property for the image which defines the maximum width of the image. 

  • If the image is larger than the maximum width, it will automatically change the height of the image. 

  • If the image is smaller than the maximum width, the max width property has no effect.

Note: This prevents the value of the width property of the image from becoming larger than the max width. The value of the max width property overrides the width property I.e. you can upload a 4K image (3,840 x 2,160 pixels) and limit its max width to FullHD (1,920 x 1,080 pixels). 

Hover State

Choose between:

  • None (default)

  • Hover Image - Show an alternate image when hovered over

  • Color Overlay - Show a color overlay when hovered over

If "Hover Image" is chosen, click the "Choose Image" button to select the image you'd like shown when the image is hovered over on Desktop computers. For best results, use an image that has the same or similar image ratio to the original image (1:1, 2:3, 4:3, 16:9, etc)

The hover image can also be Cropped & Rotated after selected, or you can Change the image you'd like used instead. Information about the original image file (name and dimensions) is also readily available:

Image Border Options

In the Border tab, there are available image Border options which include Style and Thickness.

Styles include: None, Solid, Dotted and Dashed.
You can also set the Color of the image border using the available color picker or by entering in the exact color hex code.

Thickness for the border style includes: Small, Medium, Large or Custom thickness in pixels.

Image Destination Options

Various image destination options are available when the image is clicked by a page visitor on the published page. You can control where a page visitor is directed to (URL, Cart, Product page, ZP page, ZP blog post or another Page Block) or if you'd like a lightbox popup optin form to show (CRM).

None: Don't Link The Image To Anywhere

Select this option if you don't want the image to be clickable and/or link to anywhere.

This option allows you to specify the URL where you want to direct the visitor when the image is clicked.
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. 

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

Available options: 

  • 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

  • Phone number

  • Enable UTM parameters tracking (hidden)

The Name and Phone fields can be disabled by un-checking the respective checkboxes if you don't want them used for 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. 

This option allows you to select one of you 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.

This option allows you to select any of your previously published ZP pages and link to them once the image 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.

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 window or in a new one.

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

This option allows you to "anchor" the image 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 (Zipify Pages Plus only): Distribute one-time-use coupon codes

We recommend to use this option with the available "Booster Page" page Templates. If you'd like to configure your own, please see the details on the Booster Page coupon delivery feature in this article.

Full-width Images (Image block only)

To have your image appear full-width on most device types, it's recommended to use an image that has at least 1920 px width. For 4K screens, a minimum of 2560 px width for the image is required, but 3840 px is recommended. You must also:

  1. Set the "Image Size" setting to 100%

  2. Set the "Max Width" setting to None

  3. Set the block setting to "Full Width"

📝The information below only applies to an "Image" block added prior to 3/10/2021. If your "Image" block was added after that, see the information above.

To have an image added to the "Image" block go edge-to-edge for the page, follow the steps below:

1. Set the Image Size setting to 100% via the "Custom" option: 

2. Set the Image Block's Setting to "Full Width":

3. Add the following CSS code to your page as a Local script to the Header section:

.zpa-plain-image-001-v2.zpa-block-full-width .xs-12 {
  padding: 0;

4. Save the script and then Update the page.
Note: The Image will appear full-width on the live/published page only

Did this answer your question?