FBT layout templates

This article is a draft and may be incomplete or change before publishing.

Choose the look of the offer on the Design tab (Product Page Upsell → your offer → Design). Layout & style is always open; Typography, Button & Arrow, Checkbox and Custom HTML & CSS are collapsed until you open them. The preview on the right updates as you edit.

Layout

A Frequently bought together offer has two layouts to choose from in Layout.

Stacked

A vertical list. Each product gets a row with a checkbox, image, title, price and — when the product has variants — a variant picker, with the button underneath.

Works well for: narrow product columns, and any width when you're unsure.

Horizontal

Products side by side as cards, with a summary panel to the right showing the bundle total, the savings and the button. On screens 768 px wide or narrower it switches to the stacked list automatically.

Works well for: wide product pages with room under the buy box.

Maximum products to display (default 3, trigger product included) limits how many products show in either layout.

Cross-sell and Product add-on offers use Carousel (pages through the products with arrows) and Stacked instead of Horizontal.

Custom templates

The Template library holds ready-made designs for your offer type. To use one:

In the Oxify app menu, open Product Page Upsell, open your offer and go to the Design tab.
Scroll to the bottom and click Custom Templates.
Click Use template on a card. Each card previews your offer's title, button text and discount on sample products, and the template in use is marked In use.
Click Save in the save bar.

A template made for a specific layout also switches the offer to that layout. If no templates have been published for your offer type yet, the library tells you so.

Under the Custom Templates button, a code editor shows the template's code. It is marked Technical skills required — you only need it if you want to go beyond the library.

Picking a layout

Check the preview, then your storefront on both desktop and mobile. If unsure, start with Stacked — it fits any width.