All Collections
Zipify Pages - Tutorials & Documentation
Buy Boxes
Product Listing 1 and 3 & Offer Box 2 [Zipify Pages]
Product Listing 1 and 3 & Offer Box 2 [Zipify Pages]
Add a Buy Box block that interacts with your store's Products section.
Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

Overview

šŸ“As of June 7th, 2021 "Product Listing 1" and "Product Listing 3" blocks have been reimplemented based on the Dynamic Buy Box block

Product Listing 1 and 3 & Offer Box 2 Ā are Buy Box blocks that interacts with your store's Products section.Ā 

Using these blocks, you can add a store product and it will pull in the product information into the block's elements: Image, Description, Price, and Availability. You're able to edit the product's Description just like any other Text element as well as the Button's text and destination.

Selecting and Configuring a Product

Follow the quick and easy steps below to configure the Buy Box with your product:

1. As soon as you add a Buy Box block to your page, the product selection screen will automatically open so you can make your product selection. For your convenience, there's a Search input field - just start typing product title and it will filter your products for you. Select your product and click the "Next" button.

2. If your product has variants, then you can choose to use specific ones or all of them on the next screen. Make your variant selections and then click the "Next" button.

3. The last step is to simply click the Save button on the next screen. If needed, you can also change the product and/or the variants by clicking the "more options" (3 dots) menu.

You can access this menu again later by clicking the "green pencil" in the top-right corner of the Buy Box:

Once your product is selected, it will populate the product information into the block's elements: Image, Description, Price, and Availability.Ā 

Notes:

1. 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 on the published page.

2. If you add a new variant for the selected product through your Shopify admin, 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 them shown. Don't forget to click the Publish/Update button to apply this change to the actual page.

Button Style and Destination options

The next step is to configure the Button style and the button destination I.e. the action you want taken when the button is clicked by a page visitor.Ā 

The Buy Box button element contains the same controls as the common button element plus an additional feature - an ability to add the featured product to the Cart or Checkout page on your store.Ā 

1. Simply click on the Button element within the page editor to open up the Button Options. Configure the style of your Button using the available options.

2. Choose your Button Destination setting from the list of available options.

  • URL - directs the visitor to any specified URL.

  • Cart - 3 options are available:
    1. Add to Cart and load the Cart page: Opens the Shopify Cart page with the specified product added to the Cart.
    2. 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.
    3. 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.Ā 

  • Product Page - opens the product's detail page on your Shopify store.Ā 

  • Checkout - opens the Shopify Checkout with the specified product added to the Checkout.

  • Ā ZP Page - opens the specified ZP page.Ā 

Notes:Ā 

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

You can also 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 to offer multi-pack bundles of the same product for example.Ā 

2. If you change some product information through Shopify admin, 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.

3. 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:Ā 

Image Options

The next step is to configure the Image Settings. Follow the steps below to configure your Buy Box featured image.

1. Click on the Image element within the Buy Box to open the Image Options.Ā 

2. Set the Alt Text for the image. Alt Text is an HTML attribute applied to image tags to provide a text alternative for search engines. Applying alt text to images such as product photos can positively impact an ecommerce store's search engine rankings.

3. Choose the Default Product Image setting. This setting determines which image will be displayed when the page loads. There are 3 options available to choose from, however for all options, the variant image(s) will display dynamically upon variant selection when viewing the published page.

  • Shopify Variant Image - The image for the product’s first variant (top of the variant list) will be displayed.

  • Shopify Product Image - Your main/featured Shopify product image will be displayed.

  • Custom - The custom image you select will be displayed as the product image.

4. Configure the remaining image options such as Shape, Alignment, Size and Max Width.

5. In the Border tab, you can optionally configure a border for your image. Set the Style, Color and Thickness of the border.Ā 

Offer Box 2:

The "Offer Box 2" block is specifically designed to offer a Discount to your customers via a coupon code specified at the bottom of the block.

There are 6 discount options available in the dropdown menu:

  • None - No discount will be shown

  • Percent (Dynamic) - Show a % based discount which auto-applies at Checkout

  • Fixed (Dynamic) - Show a $ based discount which auto-applies at Checkout

  • Compare At Price - Show the product's "Compare at price" pulled from Shopify

  • Percent (Static) - Show a % based discount

  • Fixed (Static) - Show a $ based discount

*Notes:

  • Static discount types will NOT be auto-applied at Checkout. The customer needs to enter a coupon code or you'd need to setup some other method to auto-apply a discount at checkout such as a "shareable discount link" configured with a redirect to your ZP page.

  • Dynamic discount types do auto-apply at Checkout. The only Buy Box button destination that can work with this type is "Checkout".

  • Dynamic discount applies to each unit of the product I.e. if you pre-set the Buy Box quantity to 3 units and set a $10 dynamic discount, a $30 discount will be applied at checkout.

  • When you publish a page that uses a "Dynamic" discount type for a Buy Box, the Shopify Discount code is then auto-generated in the "Discounts" section of your Shopify admin.

When a Discount is used, the "Exclusive Sale Price" and "You Save" prices will dynamically update based on the discount set by you.

If you use a "Static" discount option, make sure to include the Shopify Discount code you've created in the "*Use code" field so that your customers can use it to obtain the advertised price at Checkout.

If you use a "Dynamic" discount option (auto-applies at Checkout) then it's recommended to delete the text from the "*Use code" field as the code will auto-apply for the customer.

Did this answer your question?