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

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

Click on the Image element itself or on the blue pencil icon to open up the sidebar settings. Then click on the "Choose Image" button to open the Image Library where you can either select an existing image from your library, upload a new one from your computer or by using a URL or use an image from the Unsplash image library.

📝 The image element supports the following image types only:

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

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

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

Click the "Crop & Rotate" button if you'd like to crop or rotate the image prior to adding it to your page. Presets for common aspect ratios (16:9, 4:3, 2:3, etc.) 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.

Click the "Confirm" button once you're satisfied with the image appearance to add it to the image element included in the block.

📝After an image has been added to an image element included in a page block, you can find the "Crop & Rotate" and "Change" options available in the sidebar:

Enter Alt Text (optional) for the image which is shown if the image fails to load on the page. 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:

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 percentages 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 percentages from 1 to 100. 

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

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

The hover state setting for images is a great way to make the images featured on your page more dynamic. Choose between:

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:

In the Border tab, there are available Image Border options which include Style (None, Solid, Dotted and Dashed) Size (in px) and Color using the available color picker or by entering in the exact color hex code:

Various image destination options are available when the image is clicked/tapped 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 opt-in form to show (CRM).

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. 

This option allows you to direct your customers to the Cart page I.e. www.yourstore.com/cart of your store when the image is clicked. Please note, no product is added to the Cart via this destination option.

In order to use this feature you first need to connect a CRM system to the ZP application through the Settings > CRMs section. Click the "CRM Settings" button to open the CRM Settings popup where the opt-in form popup can be configured:

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 or Tag from that 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 enable the "Redirect all traffic to primary domain" option in Online Store > Domains of your Shopify admin.

The next step is to decide the form fields you want added to the popup form and to configure the styles for it. The default set of form fields are:

The Email field is required, all other fields are optional and can be disabled/enabled by un-checking the respective checkboxes next to each option.

Available options for the form styles include: 

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

GDPR Notification and Privacy Notification sections can be included on your form 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 the Post Submit Actions, which is the action you want taken after the visitor successfully opts-in to your form. The available Actions are:

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. Click the "Choose Product" button to open the Product Selection popup:

For your convenience, you can find your desired product through a Live Search input field or by selecting it from the selection popup:

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 tab or in a new one:

📝If 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 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 post in the same tab or in a new one:

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 auto-scroll the visitor to the block specified:

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.

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":

4. Set the left/right padding of the block to 0:

📝 In some cases if you have enabled the "Theme header/footer" feature for your page, it's possible your theme styles that are included for the page with that feature enabled will prevent the image from going full-width. If that is the case, try the following as well:

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

2. Save the script and then Update the page.
📝 The Image will only appear full-width on the live/published page and not in the in-app builder or built-in preview modes since additional code added doesn't execute or apply in those locations. Check the published page on your storefront to see the result, where the additional code is executed upon page load.