# Product form

Adjust the style and functionality of your variant selectors and 'add to cart' buttons.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FGCJJPWgPBVx91NX8JRGm%2Fproduct-form-theme-settings.gif?alt=media&#x26;token=45b1496f-0e7c-4215-b955-3e42437a497e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="222.8194580078125">Settings</th><th width="134.7431640625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Show gray background behind images</td><td align="center"><code>checkbox</code></td><td>Adds a gray background behind product images.</td></tr><tr><td>Variants style</td><td align="center"><code>select</code></td><td>Choose how the variant options display: <code>Auto</code>, <code>Boxes</code>, or <code>Dropdowns</code>.</td></tr><tr><td><strong>Variant image</strong></td><td align="center"></td><td></td></tr><tr><td>Show variant image</td><td align="center"><code>checkbox</code></td><td>Displays images linked to variant selection.</td></tr><tr><td>Swatch style</td><td align="center"><code>select</code></td><td>Layout style for variant images: <code>Stacked</code> or <code>In-line</code>.</td></tr><tr><td><strong>Media</strong></td><td align="center"></td><td></td></tr><tr><td>Enable video looping</td><td align="center"><code>checkbox</code></td><td>Loops any product video media.</td></tr><tr><td><strong>Out of stock notification</strong></td><td align="center"></td><td></td></tr><tr><td>Show ‘Notify me when available’ popup</td><td align="center"><code>checkbox</code></td><td>Displays a newsletter-style popup on out-of-stock items.</td></tr><tr><td><strong>Final sale</strong></td><td align="center"></td><td></td></tr><tr><td>Show on all sale products</td><td align="center"><code>checkbox</code></td><td>Globally show disclaimer on all sale products.</td></tr><tr><td>Content on hover</td><td align="center"><code>text</code></td><td>Tooltip message (hover text).</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Color of the final sale label.</td></tr><tr><td><strong>Add to cart button</strong></td><td align="center"></td><td></td></tr><tr><td>Show button with 50% width</td><td align="center"><code>checkbox</code></td><td>Displays button at half width (desktop only).</td></tr><tr><td>Display product price</td><td align="center"><code>checkbox</code></td><td>Adds price to the button (stacks if 50% width is active).</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Choose from: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Options: <code>Solid</code>, <code>Outline</code>, <code>Solid with border</code>, <code>Soft</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Options: <code>Small</code>, <code>Medium</code>, <code>Large</code>.</td></tr><tr><td><strong>Buy it now button</strong></td><td align="center"></td><td></td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Choose from: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Options: <code>Solid</code>, <code>Outline</code>, <code>Solid with border</code>, <code>Soft</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Options: <code>Small</code>, <code>Medium</code>, <code>Large</code>.</td></tr><tr><td><strong>Gift card</strong></td><td align="center"></td><td></td></tr><tr><td>Show recipient information form for gift card products</td><td align="center"><code>checkbox</code></td><td>Displays an optional form to email gift cards directly to a recipient. </td></tr><tr><td><strong>Quantity selector</strong></td><td align="center"></td><td></td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose from: <code>Dropdown</code> or <code>Standard</code>.</td></tr></tbody></table>
