Add ready-made blocks to a test

Blocks are parts that often win in online shops, ready to test. Varly reads the fonts, colors and corners of your page, so a block looks like part of your site, and you only choose a few plain options. There is no panel with CSS values.

The blocks

Block	What visitors see	What it needs on your page
USP bar	Three or four short promises with icons, such as "Free returns within 30 days".	Nothing. Varly starts with promises your page already makes.
Sticky add to cart bar	A bar at the bottom of the screen with the product name, price and a button, once they scroll past your add to cart button.	An add to cart button.
Free shipping progress	"Spend €12 more for free shipping", with a progress bar, from their real cart.	A Shopify or WooCommerce shop.
Stock note	"Only 3 left in stock", near the add to cart button.	Your page must show the real stock count.
Reviews and trust badges	Your star rating and number of reviews, plus a few short promises with a check mark.	For the rating: the rating your shop adds for Google (schema.org). Badges work on any page.
Exit-intent banner	A message when a visitor is about to leave, with a button and an optional discount code. Once per visit (see below).	Nothing.

Each kind of block can be added once per variant.

Add a block

1. Open the test under Optimize → Tests and go to the Build & launch tab.
2. In the Ready-made blocks card, click Add a block. Your page opens in a new tab with the visual editor and the blocks panel. You can also click Add a block in the editor's toolbar.
3. Pick a block. Blocks that can't work on this page are grey, with the reason.
4. Change the text and choose:
   • Where: Top of the page, Under the add to cart button or Under the product title (not every block has all three).
   • Devices: All devices, Mobile only or Desktop only.
   • Color: Button color, Dark, Soft or Page color. These come from your site. Varly picks the text color so it stays readable.
5. The block shows on the page right away, only in your browser.
6. Click Add to variant.
7. Back in Varly, run the check under Custom code (Run the check). The test can only launch after the check passes.

Does the test have more than one variant? Pick the variant at the top of the panel first.

Match my site's style

When you open the panel, Varly reads the style of the page: the font of the text and headings, the text and background color, and the color and corners of your add to cart button. The block's colors are built from these.

Changed your theme, or opened the panel on another page first? Click Match my site's style to read them again from the page you have open.

Let Oran rewrite the text

Click Rewrite the text with Oran to get new text in the language of your page. Oran only changes the words: it never adds a promise, amount or number that wasn't there, and it keeps placeholders such as {amount} as they are. Nothing is saved until you click Add to variant or Save changes.

Real data only

Blocks never make things up:

• Free shipping progress reads the cart from your shop's public cart (/cart.js on Shopify, the Store API on WooCommerce). Only a cart in the same currency as your amount counts. If the cart can't be read, the bar keeps showing "Free shipping on orders over €50". Enter the same amount as in your shipping settings.
• Stock note reads the number from your own page, on every page view, and follows it when a visitor picks another size or color. Without a number on the page, or above the number you set, nothing shows. Varly never shows fake scarcity.
• Reviews reads your rating from the page on every page view. Without a rating, only your badges show.
• Promises and badges are your own words. Only promise what your shop really offers.

Exit-intent banner and cookie consent

To show the banner only once per visit, Varly remembers in the visitor's browser that it was shown (in session storage, which is cleared when the tab closes). It only does that for visitors who accepted cookies.

With privacy mode on, visitors who didn't accept cookies can still take part in tests, but Varly stores nothing for them except its anonymous ID. For them the banner shows at most once per page view: it can show again on the next page.

How blocks work in the test

A block becomes custom code of the variant, in a marked part of the code under Custom code. That means:

• Varly checks it like any other code, and the test can only launch after the check on desktop, tablet and mobile.
• It shows in the preview link and the screenshots, exactly like visitors see it.
• Varly places a block as soon as the snippet has loaded and the block's spot is on the page. With the snippet high in your site's <head> (see Add the Varly snippet to your site), that is usually before the browser draws the page, so nothing jumps. The snippet loads without holding up your page, so on a slow first visit, or through a tag manager, it can arrive after the page shows: then a bar at the top of the page, or a block under the add to cart button, pushes the content below it down once. Your own JavaScript in the same variant keeps its own moment; if it runs When the page is ready, blocks wait for that too. The panel tells you.
• Blocks never run on checkout pages.
• Change a block in the blocks panel, not in the code: Varly rewrites its part of the code each time you save a block. Your own code around it stays.

The sticky bar and exit-intent banner send custom events you can pick as a goal under What counts as a conversion → Custom event: sticky_add_to_cart (a click on the sticky button), exit_banner_shown and exit_banner_click.

Accessible by default

Blocks work with a keyboard and screen readers. The exit-intent banner closes with Esc, keeps the focus inside while open and gives it back when it closes. The sticky bar can't be reached with Tab while it's hidden. Visitors who ask their device for less motion get no animations.

Remove a block

In the Ready-made blocks card, click Remove next to the block, or click Remove in the blocks panel. Run the check again before you launch.

Common problems

• A block is grey in the panel. The reason is under its name. Most need a product page: open the editor on one.
• "Pause the test to change its blocks." A running test can't change. Pause it, change the block, run the check and resume.
• I don't see the sticky bar or the banner in the editor. The sticky bar appears after you scroll past your add to cart button. The exit-intent banner appears when you move your mouse out of the top of the window, after 3 seconds on the page.
• The free shipping block is grey. Varly found no Shopify or WooCommerce cart on this page. Other shop systems don't have a public cart Varly can read.