Skip to main content

Promo Card Split View Layout

How to Enable Split Card Promo Cards

Written by Treez Support

The Promo Carousel in Prismic now supports a new layout option — Split Card — which displays all promo cards in a split view format.

Enabling Split Card

In Prismic, open the Promo-Carousel document. Add a new slice and select the PromoCard - Split Card variation. Once this variation is active, all promo cards on your ecomm site will display in a split view.

Configuring Your Split Card

Each Split Card variation supports the following settings:

  • Active — Toggle to show or hide this card

  • POS Title Name — Links this card to a specific discount from your POS. Set to default if you want all discounts to pull through automatically. Only configure this if you are setting up custom Prismic configs for individual discounts.

  • Picture — Use Default Image. If images are configured in Treez, these will automatically pull through to your ecommerce site.

  • Title / Title Color — Use {{title}} to automatically pull the promo title from Treez. If no color is defined, it will fall back to your brand colors

  • Description / Description Color — Use {{method}} to automatically pull the promo description or method from Treez. If no color is defined, it will fall back to your brand colors

  • Text Align — Set text alignment (left, center, right)

  • Card Inner Padding — Inner Padding creates a padded border around the entire promo-card. Toggle inner padding on or off

  • Background Color — Set the card background color

Display Logic

The same hierarchy of display logic applies to Split Card as it does to standard promo cards. View the full display logic here.

Using Custom Discount Configs with Split Card

If you have existing custom discount configurations in Prismic and want to switch to Split Card, you'll need to rebuild each custom config using the Split Card variation. Create one Split Card variation per custom discount configuration — your existing standard variations will not carry over automatically.

Did this answer your question?