# Component: Add To Basket Offers **Purpose**: A display of offers stored on the campaign. Use this Offers component when you want to bring your customers directly to the checkout, or you have multi-quantity offers. {% embed url="" %} ## Props | Prop Name | Label | Type | Default Value | Description | | --------------------------- | ---------------------------- | -------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | | 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 | | | cta\_checkout\_button\_text | CTA go to checkout text | string | Go to checkout | CTA button text | | 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 | | detailedPricePosition | Detailed Price position | picklist | top | Options: Top, bottom | | 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 | | productSelectText | Product groups text | string | Choose One | | | showLearnMore | Show learn more | boolean | true | If true the learn more button will be displayed | | showQuantityInput | Show Quantity Input Field | boolean | false | | | learnMoreText | Learn more text | string | Learn more | Learn more text | ## --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.limio.com/components/component-library/standard-components/component-add-to-basket-offers.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.