> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/products/compact-product-bundle.md).

# Compact product bundle

This block allows merchants to promote product bundles that customers can quickly review and add to cart without navigating away from the current page.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F25zkMc243csrBEgp3irk%2Fimage.png?alt=media&amp;token=c7c7292d-416d-44a9-a6e2-12d35cbb748c" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td><strong>Subheading</strong></td><td>The subheading of the section</td></tr><tr><td><strong>Heading</strong></td><td>The title of the section</td></tr><tr><td><strong>Enable heading underline animation</strong></td><td>Enable heading underline animation</td></tr><tr><td><strong>Underline style</strong></td><td>Select Underline style</td></tr><tr><td><strong>Underline color</strong></td><td>Customize Underline color</td></tr><tr><td><strong>Description</strong></td><td>The description of the section</td></tr><tr><td><strong>Heading size</strong></td><td><p>The size of the title:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Column gap</strong></td><td>The spacing between the main image and products content</td></tr></tbody></table>

#### Content settings <a href="#blog-posts" id="blog-posts"></a>

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Displays a visual element within the section, such as a product photo, banner, or decorative graphic. <em><strong>(696px x 750px recommended)</strong></em></td></tr><tr><td><strong>Mobile image</strong></td><td>Allows you to upload a separate image specifically optimized for mobile devices. <em><strong>(350px x 303px recommended)</strong></em></td></tr><tr><td><strong>Desktop image width</strong></td><td>Controls the width of the image when displayed on desktop devices.</td></tr><tr><td><strong>Desktop image position</strong></td><td>Determines the horizontal alignment of the image within the section when viewed on desktop devices.</td></tr><tr><td><strong>Image ratio</strong></td><td>Specifies the aspect ratio used to display the image.</td></tr><tr><td><strong>Enable quick add for items</strong></td><td>Allows customers to add products directly to their cart without leaving the current page.</td></tr><tr><td><strong>Button label</strong></td><td>Defines the text displayed on the button within this section or block.</td></tr><tr><td><strong>Button link</strong></td><td>Specifies the destination URL or page that the button will navigate to when clicked.</td></tr><tr><td><strong>Hidden button on mobile</strong></td><td>When enabled, this setting hides the button on mobile devices while keeping it visible on desktop and tablet views.</td></tr></tbody></table>

#### Section padding <a href="#section-padding" id="section-padding"></a>

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>

#### Section divider <a href="#section-padding" id="section-padding"></a>

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Display a dividing line to separate from the previous section.</td></tr></tbody></table>

### Block settings

<table><thead><tr><th width="207">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Select your featured product</td></tr><tr><td><strong>Vertical position</strong><br><strong>Horizontal position</strong></td><td>Determine the position for the product pointer</td></tr></tbody></table>