Appearance
Quick buy drawer ​
This guide describes the Theme editor's Theme settings > Quick buy drawer menu options.
Use the menu options to configure your store's Quick buy drawer for supported product pages. When a store visitor selects a product, the Quick buy drawer opens as an overlay with product variants and purchase options.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.
Set up the quick buy drawer ​
To set up the quick buy drawer:
In the Theme editor, go to Theme settings > Quick buy drawer.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Product media crop | Use the Product media crop options to select No crop, Landscape, Square, or Portrait. This setting controls the aspect ratio of the product media displayed in the quick buy drawer. |
| Variants > Select the first available variant | Use the Select the first available variant options to turn on or off "First available variant" mode. When enabled, the first in-stock variant is automatically selected in the quick buy drawer. With this setting off, adding to the cart will not be possible until each product option has a selection. |
| Quantity selector > Show quantity selector | Use the Show quantity selector options to show or hide a quantity input field in the quick buy drawer. |
| Quantity selector > Show label | Use the Show label options to show or hide the text label associated with the quantity selector in the quick buy drawer. To use this option, enable the Show quantity selector option. |
| Quantity selector > Label position on desktop | Use the Label position on desktop options to specify a position for the label associated with the quantity selector in the quick buy drawer on desktop display devices. The options are Left or Above. |
| Variant picker > Options style | Use the Options style options to select Dropdown or Button. This setting specifies the visual style for product variant pickers in the quick buy drawer. |
| Variant picker > Full width buttons | Use the Full width buttons options to turn on or off "Full width buttons mode". With this setting enabled, variant picker buttons fill the available width of the drawer container. To use this option, set Options style to Button. |
| Variant picker > Show option labels | Use the Show option labels options to show or hide the text label associated with the variant picker in the quick buy drawer. |
| Variant picker > Label position on desktop | Use the Label position on desktop options to specify a position for the label associated with the variant picker in the quick buy drawer on desktop display devices. The options are Left or Above. |
| Variant picker > Hide sold out or unavailable variants | Use the Hide sold out or unavailable variants options to show or hide variant options in the quick buy drawer, for variants that are currently out of stock or not available for purchase. |
| Product group > Options style | Use the Options style options to select Button, Swatches, Thumbnails, or Dropdown. This setting defines the visual layout for product group pickers in the quick buy drawer. To use these options, create a metaobject for a product group, then link it to each product with a metafield. Then, enable product groups in Theme settings > Product grid tiles > Quick buy. |
| Product group > Full width buttons | Use the Full width buttons options to turn on or off "Full width buttons mode". With this setting enabled, product group buttons span the full width. For the Swatches and Thumbnails styles, this only applies if the Show value option is enabled. To use this option, set Options style to Button. |
| Product group > Show value | Use the Show value to show or hide a value overlay on products from a product group with a value label in the quick buy drawer. To use this option, set Options style to Swatches or Thumbnails. |
| Product group > Show option labels | Use the Show option labels options to show or hide the text labels associated with product groups in the quick buy drawer. |
| Product group > Label position on desktop | Use the Label position on desktop options to specify a position for the text labels associated with product groups in the quick buy drawer. The options are Left or Above. |
| Buy buttons > Show dynamic checkout button | Use the Show dynamic checkout button options to show or hide a dynamic checkout button for accelerated checkout in the quick buy drawer. With this option enabled, each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Note that the button is hidden for pre-order products. Refer to Shopify help: Accelerated checkout buttons. |
| Buy buttons > Show installments | Use the Show installments to show or hide Shop Pay Installments in the quick buy drawer. Refer to Shopify help: Shop Pay Installments |
| Buy buttons > Show total price | Use the Show total price options to show or hide the calculated total price in the quick buy drawer. |
| Buy buttons > Show total compare-at price | Select the Show total compare-at price checkbox to show or hide the total compare-at product price in the quick buy drawer. Refer to Shopify help: Setting sale prices for products. To use this option, enable Show total price. |
| Description > Show description | Use the Show description options to show or hide product descriptions in the quick buy drawer. |
| Description > Truncate description | Use the Truncate description options to show or hide truncated (shortened) product descriptions in the quick buy drawer. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.