Component: Offers

Purpose: A display of offers stored on the campaign. This is the most generic Offers component.

Screenshot_2022-11-10_at_13.09.15.png

You also have the option to allow users to purchase multiple subscriptions. This can easily be done by enabling the `Allow Multibuy` attribute on the offer/offers you intend to use in the `Offers` component.

`Allow Mutlibuy` can also be coupled with the offer attribute `Default Quantity` this allows you to specify the minimum and maximum amounts a user can purchase as well as set the how much the basket increment/decrement each time a user increases/decreases there required amount of subscriptions. Ie if the minimum range was set to 10 and the maximum range was set to 20 and the increment was set to 2. A user could only purchase between 10 and 20 subscriptions and each time the user incremented or decremented the amount it would be done in steps of 2.

Screenshot 2023-08-18 at 17.27.17.png

Props

Prop Name	Label	Type	Default Value	Description
primaryColor__limio_color	Primary color	color	#F47C24	Main color used in component
offerWidth	Card width	number	2	Width of offer cards
shadow	Card shadow	boolean	true	If true a shadow will appear for each card
border	Card border	boolean	false	If true a border will appear for each card
roundCorners	Card round corners	boolean	false	If true each card will have rounded corners
layout	Card layout	picklist	left	Options: center, left, right
offerOverflowLayout	Card alignment	picklist	stretch	Options: stretch, center, start, end
splitByGroups	Group offers?	boolean	false	If true the offers will split by grouping based of the group__limio attribute
imageShape	Image shape	picklist	square	Options: round, default, circle, square. full-width
imagePosition	Image position	picklist	middle	Options: top, middle, bottom
showAllImages	Show all images?	boolean	true
ineligibleMessage	Ineligible for trial message	string	You are not eligible for a trial offer. Please select a different offer to continue.	Ineligible for trial message
thumbnailPosition	Image thumbnail position	picklist	left	Options: center, left, right
mobileSwipe	Mobile swipe or stack?	boolean	true	If true and in mobile view the offers will be swipeable
mobileArrows	Mobile arrows?	boolean	true	If true and in mobile view the arrows will be visible
mobileArrowsColor	Mobile arrows color	color	#505050	Color of the mobile arrows
invertCTA	CTA invert	boolean	false	Colours of the CTA buttons will invert
removeText	CTA remove text	string	Remove
productSelectText	Product groups text	string	Choose One
showLearnMore	Show learn more	boolean	true	If true the learn more button will be displayed
learnMoreText	Learn more text	string	Learn more	Learn more text