The main purpose of the Best Value Offer blocks is to show your visitors the cost benefit of purchasing product multi-packs compared to just a single unit.
Use this block to compare prices for 1, 2 and 3 units for example. Just follow the steps below to configure a Best Value Offer block.
Adding Products to the Block
As soon as you add a Best Value Offer block to your page, you will be prompted to select products to feature. So the first step is to select your products and click the Save button:
1. The Best Value Offer blocks do not pull in your featured product image by default, as the most common use-case for these blocks is to use a custom image instead, to feature multi-packs. They also do not work to dynamically display a particular variant image when a variant is selected.
2. When you select a product with variants for these blocks, there isn't a way to remove the "dynamic price" above the CTA (Best Value Offer 1) or in the bottom center (Best Value Offer 2) if the Cart or Checkout destination is chosen. That price is dynamic and will update based on the variant selected by the customer.
If you don't want the dynamic price shown, you'll have to:
Use a product that doesn't have variants
Select only one variant to use for a product that has variants, or
Choose a button destination other than Cart or Checkout
Add a Featured Image
Follow the steps below to add a featured image for each product.
1. Click on the image element within the column you want to add the image to.
2. Choose the image from your Image Library.
3. Apply any changes you might want such as "Crop & Rotate" and "Border".
4. Click the "Save" button.
Editing Label Text and Border
Follow the steps below to edit the label text and border for each column.
1. Click the blue pencil icon in the top-right corner of the column to open the Best Value Options.
2. Check the box "Show Label with Texts".
3. Set the Font you want used for the labels.
4. Configure the Text and Styles for the "Corner Text" and "Middle Header" text that you want used.
5. Click the "Save" button.
Example: Configuring a Multi-pack Offer
Follow the steps below to configure a multi-pack offer.
1. Select the same product for each column in the Buy Box.
2. Click the button element to open the button options. In the "Default Product Quantity" setting, set 1, 2 and 3 units for each column respectively. Disable the "Quantity Field" for each column as well.
3. Set each button destination to "Checkout" instead of "Cart". This way the visitor will be directed to the Checkout page so that the quantity can't be altered as it can on the Cart page.
4. Edit the pricing elements as needed for each column.
Note: The Zipify Pages app has no ability to modify your actual product prices. In order for the advertised price to be obtained at checkout, you will either need to price your products accordingly or apply a discount code at checkout.
5. Add your custom multi-pack product images as needed.
Example: Creating a Shareable Discount Link to auto-apply a Discount code at Checkout
To have a discount code auto-applied at checkout, we recommend using a "shareable discount link" that's setup with a redirect to your ZP page.
This would be the format for it:
Where "code" is the Shopify discount code you want applied and "page-handle" is the page handle of your ZP page. You'd drive traffic to this shareable discount link and then the discount you specify will auto-apply once the customer reaches the checkout page.
If you need different discount codes used for the page depending on the product the customer adds, then another option instead of creating a shareable discount link that redirects to your Zipify Page is to create a shareable discount link that redirects to the Cart or Checkout page.
This type of link could then be used in conjunction with the "Cart - Add to Cart and direct customer to a specific URL" button destination option for the Buy Box.
This way you can have different discount codes apply at checkout depending on which product the customer adds from the Best Value Offer block.
This would be the format to direct to the Cart Page:
This would be the format to direct to the Shopify Checkout Page:
Where "code" is the Shopify discount code you want applied and "cart" or "checkout" is the page you want to direct to. After the customer clicks the button, the item will be added to the cart, the discount code will be cached and then auto-applied once the Checkout page is reached.
Example: Creating "checkout permalinks" to pre-fill the Checkout and auto-apply a Discount
Another option to create multi-packs or bundles is to use a checkout permalink for each button in the Best Value Offer block.
*Important Note: Using checkout permalinks, the specific product variant, quantity and discount code is defined by you in the link. Therefore, your customers will not be able to select a variant. This method won't work if you need the customer to be able to select different variants of a product.
To set this up, set the button destination to "Cart - Add to Cart and direct customer to a specific URL" and the URL you enter will be the checkout permalink mentioned above. You will also want to disable the quantity field from showing since the quantity will be pre-defined in the checkout permalink:
Here is the checkout permalink structure to use to add multiple products to the Checkout with different quantities AND have a discount code auto-applied as well:
1234567890 is the variant ID of the first product and 1 after it is the quantity for example. 0987654321 is the variant ID of the second product and 2 after it is the quantity to be added for that product and so on. YourDiscountCode should be replaced with the actual Shopify discount code you need auto-applied at checkout.
Finding the Shopify Variant ID:
Go to the product detail page for the item you want to find the ID for.
At the end of the URL there, enter .xml and press enter.
The Shopify Variant ID you will need can be found as shown below:
4. After creating your link, click on it to make sure it functions correctly and adds the product(s) to the Cart or Checkout. If you get an error page, that means you have an incorrect variant ID included in your link. Go back to the .xml view of the page to try the next variant ID listed there instead. Then test the link again to ensure it works correctly.
More details about constructing checkout permalinks can be found in our help article here.
Best Value Offer 3:
This block is specifically designed to offer a Discount code directly on the page.
When entered, the "Exclusive Sale Price" and "You Save" prices will dynamically update based on the discount set by you.
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
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.
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.