# Product subscription

## Overview

A subscription options block that displays purchase choices for products with selling plans. Allows customers to select between one-time purchases and various subscription options, showing pricing comparisons, discounts, and subscription details. The block dynamically updates based on variant selection and integrates with Shopify's selling plans functionality.

## Common use cases

* Use only with products that have selling plans properly configured in Shopify admin
* Place within or near product forms for optimal user experience
* Enable default subscription option for subscription-focused products to improve conversion
* Configure appropriate padding based on surrounding layout context
* Test thoroughly with different subscription configurations and discount types
* Use visibility settings to control display on different device sizes if needed

## Block settings

### General

| Setting                | Description                                         | Options                   |
| ---------------------- | --------------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals enable default subscription, and visibility | Checkbox (default: false) |

### Content

| Setting                     | Description                                                                | Options                                                                                           |
| --------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| Product                     | Select the product to display subscription options for                     | Product picker                                                                                    |
| Enable default subscription | Automatically selects the first available subscription option on page load | <p>Checkbox (default: true)<br><br>Visible when <strong>Show advanced settings</strong> is on</p> |

### Spacing

| Setting                   | Description                              | Options                   |
| ------------------------- | ---------------------------------------- | ------------------------- |
| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the block        | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the block     | Checkbox (default: false) |

### Color

| Setting    | Description             | Options                                                                                                                                                                                                                                                      |
| ---------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Text color | Controls the text color | <p>• Default (default)<br>• Alternative<br>• Primary background<br>• Primary foreground<br>• Secondary background<br>• Secondary foreground<br>• Tertiary background<br>• Tertiary foreground<br>• Neutral background<br>• Neutral foreground<br>• Shade</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |