The 2 and 3 Products + Buy now block
The 2 and 3 Products + Buy now block's settings are very similar to the "Product Listing 1 and 3" blocks.
However with these blocks, you can edit the product image if desired by clicking on the image element or on the blue pencil icon in the top-right corner.
This block is great for a sales page where you offer tiered pricing on multiple product units. Or for presenting a sales page with multiple and various product options available.
You can set a "Compare at price" value through Shopify and it will display this price crossed-out to the left of the actual price.
Selecting and configuring a product
Click on the green pencil icon in the top-right corner to add a product or to change the current product added.
If you select a product with variants, it will display the list of product variants. By default, Zipify Pages uses all of the available variants. But, you can select specific variants which you'd like to have displayed for this product if desired.
To select several variants you need to push and hold the CTRL button on your keyboard (CMD on Mac) while selecting the variants with the left-click button of your mouse.
NOTE! If you add a new variant for the selected product through your Shopify admin panel, it automatically becomes available and selected in the product element. So, keep that in mind so that you can edit this block and exclude the additional variant(s) if you don't want it shown. Don't forget to click the Publish/Update button to apply this change to the actual page.
The next step is to edit the Button element. This button element contains the same controls as the common button plus an additional feature - an ability to select where this button will direct the visitor to once clicked (Button Destination).
If either the "Cart" or "Checkout" destinations are chosen, there is an option to display a Quantity Field so your customers can add a quantity greater than one.
Set the Default Product Quantity which presets the quantity for the product to the number of units specified. With this option you can not only set the default value for the quantity selector, but you can also hide the quantity selector if desired so that the page visitor has no way to change the product quantity to something else before adding the product to the Cart or Checkout. Use this option for apps like Quantity Breaks by Bold or to offer multi-pack bundles of the same product for example.
Set the Default Product Image setting which determines which image will be displayed when the page loads:
- Variant Image - sets the BuyBox to display the variant's image on page load. If more than one product variant is chosen, the image for the very first variant which is pre-selected will show.
- Product Image - sets the BuyBox to display the default product image which is set for the product in Shopify.
Note: When in the Page Builder and Preview mode, it will display the Product Image by default in the BuyBoxes, but will display the variant image on the actual published page if the variant image option is chosen.
Button Destination options
The following options are available for the Button Destination feature:
- Product Page - opens the product's detail page on your Shopify store.
- Cart - 3 options are available:
- Add to Cart and load the Cart page: Opens the Shopify Cart page with the specified product added to the Cart.
- Add to Cart and stay on the same page: Adds the item to the cart and stays on the same page. An "add to cart" pop-up notification will appear when clicked.
- Add to Cart and direct customer to a specific URL: Adds the item to the cart and then directs the customer to your specified URL.
Note: The text for this popup notification can be edited here as well. This field accepts both regular text and HTML tags which allows you to add links, styles etc.
For example: A link can be added to the message and with styles like this:
Text <a href="https://google.com" style="color:blue; text-decoration:underline">Link Text</a>
- Checkout - opens the Shopify Checkout with the specified product added to the Checkout.
- URL - directs the visitor to any specified URL.
Note: If the Cart or Checkout destinations are chosen, you will also have the option of displaying a Quantity Field on the page:
Note: In case you're changing some product information through the Shopify admin panel, these changes will not be automatically be applied to the ZP page which contains this product.
If you want the changed description or image to be reflected on the ZP page, then this should be done manually through the page constructor or just re-select the product for the block once again.
This rule doesn't affect the product price - Zipify Pages always uses the most recent product price set by you, the store owner.
You can adjust the styles of the "dynamic prices" shown for these blocks (The Retail and Compare at prices) by clicking on the pricing elements, making adjustments and clicking the Save button: