Each image element has an image placeholder which states the recommended image size for the image.
Click the "Browse" to select an image from your computer. Once your image is selected, the Image file name and Original image size will be displayed. You can choose to "Use original size" of the image or not. If you choose "Use original size" then the image will automatically be resized to fit the available image area for the block.
If you don't choose to use the original image size, then an image cropper will be available. Use it to drag the image to re-position it in the image cropper frame if this option is chosen.
Note: If you're using an animated GIF file, make sure to set "Use original size" to YES, otherwise the image will be converted to a static PNG and the animation won't play on the published page. The max file size supported for GIFs is 6.5 mb.
We convert the image/gif file to base64 format after uploading which can add some "overhead" to the file. In some cases if your image/gif file is under the limit, but close to that limit, it won't be able to be added since the file size would exceed the limit after being converted to base64 format. In that case, we recommend to resize the gif/image file using an app or service and then attempt to upload it once again.
You can also enter Alt text 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 tags also provide better image context/descriptions to search engine crawlers, helping them to index an image properly for SEO optimization.
Using the simple "Image" block, you'll also able to choose an image size from a list of pre-defined options, including Full Width.
Image Border Options
The available image Border options include Style and Shape.
The Style and Shape options can be used independently from each other or in conjunction. For example, you can choose a Style with no Shape or a Shape with no Style or a combination of the two.
Styles include: Solid, Dotted and Dashed.
You can set the Thickness for the border style: Narrow, Medium, Thick or a Custom thickness in pixels. You can also set the Color of the image border using the available color picker or by entering in the exact color hex code.
Shapes include: Soft Edges, Rounded Edges, Round and Circle.
Image "Button Destination" Options
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: 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.