FBT custom HTML and CSS

Advanced, for merchants comfortable with HTML and CSS. Each product page offer has its own Custom HTML & CSS card, and it works for all three types (Frequently bought together, Cross-sell and Product add-on). It only affects that offer. For the cart drawer's version, see Custom HTML and CSS injection (advanced) and How to add custom CSS?.

Turn it on

Untick Enable custom HTML & CSS to hide everything without deleting it. Your code stays saved.

The seven locations

One block of HTML per location. Each location keeps its own code when you switch between them.

Cross-sell and Product add-on offers have no offer-level button, so Above button and Below button show right after the products list, in that order.

With the Horizontal layout (Frequently bought together), the offer is built twice, once for wide screens and once for screens 768 px wide or narrower, and only one is visible. Below products list appears on wide screens only. Between each product, Above button and Below button exist twice in the page, so avoid id attributes in them. In the Carousel layout, each Between each product block takes up one of the product slots on a page.

What you can write

• HTML and inline CSS.
• Script tags: the code inside them runs when the block is shown, including in the editor preview. A script tag that only points to a file with src does nothing.
• The {{cart_total}}-style values from the cart drawer's Custom HTML are not available here.

Custom CSS

Your CSS is added to the page exactly as you write it, so it is not limited to the offer. Start selectors with .oxify-fbt-upsell-container, the offer's outer element. Avoid bare tags such as div.

If you run more than one offer on a page, all of them use that class. To style one type only, add the type attribute:

A few class names inside the offer:

• .oxify-fbt-upsell-title: the title
• .oxify-fbt-upsell-product-item: a product row (Carousel and Stacked)
• .oxify-fbt-upsell-card: a product card (Horizontal)
• .oxify-fbt-upsell-add-to-cart-button: the Cross-sell Add button
• .oxify-fbt-upsell-claim-offer-button: the Frequently bought together button (Stacked and phones)
• .oxify-fbt-upsell-summary-button: the button in the Horizontal summary

Use your browser's inspector to find others. If a rule doesn't apply, make the selector more specific.

Custom templates replace it

If a custom template is Active for the offer's type and layout, it replaces the built-in design, and the HTML and CSS from this card don't show. This includes a template you chose with Use template. See FBT layout templates. Switch the template to Inactive to use this card.

Test it