How to create different layouts for custom targeting?

I’m wanting to make a Banner component that can be targeted based on rules. For instance, on valentines day, take over all banners. Or for Father’s day, override the banner when on /mens

It seems like this is possible. I’m creating some variants. But I’m wanting a completely custom layout for each one (one might have a redeem button, or a newsletter form, etc).

what’s the best approach to this? what am I missing?

Follow up - the only thing i can target is “Time”

Hi @efficient_pelican, the targeting feature is designed to enable scenarios like the ones you listed above! We are currently iterating on it and the official documentation is expected to be released next week, will keep you posted once it’s out!

Just to add to what Monir is saying:

Traits are mostly supposed to be supplied from your app, per the linked documentation. The only one that is built in for now is time.

this is SUPER exciting

@multiple_vole @yang Could you shed some light on how to have unique layouts for targeted components? Anxious to start designing these out ahead of time while the docs are being written

Once you start recording changes to a variant, you can go ahead and make any style and layout changes you want to any of the elements. That also includes changing the visibility on elements, if you want to show / hide completely different content.

ah but you can’t design unique components for targets? for example one of my targets is an email signup - another is a new product. seems complicated to store all that in a single component and toggle visibility?

You can!

For example, create component (example name) “New Product”.

Then when editing your custom targeted variant or A/B test variant of a page (which normally shows email signup), insert an instance of component “New Product”. It should be conditionally visible only in the variant.

Note also that even if you have a completely different design within the same component, there’s usually only a single root element that needs conditional visibility set - you don’t need to set any other elements to be conditional.