On this page
- Adding Products to the Block
- Add a Featured Image
- Editing Label Text and Border
- Example: Configuring a Multi-pack Offer
- Example: Creating a Shareable Discount Link to auto-apply a Discount code at Checkout
- Example: Creating "checkout permalinks" to pre-fill the Checkout and auto-apply a Discount
- Best Value Offer 3
The main purpose of the Best Value Offer blocks is to show your visitors the cost benefit of purchasing 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 BVO blocks do not pull in your featured product image by default, those will need to be added in manually later.
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 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.
With Best Value Offer 3, there is an element to enter a % or $ discount for the product. When entered, the "Exclusive Sale Price" and "You Save" prices will dynamically update based on the discount set by you.
Note: The price that is pulled in and crossed out is the actual price of the product, not the "compare at" price.
Make sure to include the Shopify Discount code you've created in the "*Use code" field so that your customer's can use it to obtain the advertised price at checkout.