On this page
- Working with the Image Options
- Additional Image Options
- Image Border Options
- Image Destination Options
Blocks which contain the Image Element can be found in the "Images" section of page blocks:
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 max file size supported for Images is 5 Mb and for GIFs is 6.5 mb.
Once your image is selected, the image file name and original image size will be displayed above the image.
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.
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.
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).
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 or another Page Block) or if you'd like a lightbox popup optin form to show (CRM).
URL: Link To A Specific URL
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.
- Please see this guide for further details: http://help.zipify.com/zipify-pages-tutorials-and-documentation/building-pages/zipify-pages-use-a-url-to-auto-fill-the-checkout-or-cart-page-with-products
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.
- 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 Image To One Of My Product Detail Pages
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.
ZP Page: Link Image 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 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.
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.