> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/globo-b2b-bulk-order/collection-quick-order/button-below-product.md). # Add a button below products Use the Classic template to add a variant dropdown, a quantity stepper and an Add to Cart button below each product on your collection pages. This guide sets up Collection Quick Order with the **Classic** template (**Button below product**), from creating the form to checking it on your storefront. When you're done, each matching product card shows a variant dropdown, a quantity stepper and an **Add to Cart** button under its price. Buyers add products to the cart without opening the product page. ## Before you start * Turn on the **Globo Bulk Order** app embed in your theme. Without it, nothing appears on your storefront. On the app's Dashboard, in the **Quick Setup Guide**, click **Activate app embed**. Your theme editor opens with **Globo Bulk Order** turned on. Click **Save** there. For details, see [Enable the app embed](/globo-b2b-bulk-order/getting-started/enable-app-embed.md). * You don't need an app block or a shortcode. The app finds the product cards in your theme's product grids and adds the controls by itself. * Prefer a small cart icon on each product image? See [Add a cart icon on product images](/globo-b2b-bulk-order/collection-quick-order/icon-on-image.md). ## Create the form and choose products {% stepper %} {% step %} ### Open Collection Quick Order In Shopify admin, go to **Apps** > **Globo B2B Bulk Order**, then click **Collection Quick Order** in the app navigation. {% endstep %} {% step %} ### Create a new form Click **Create form**. The builder opens with the name **Quick Buy Collection** and an **Active** badge at the top. You can also open the builder from the app's Dashboard: in **Bulk order tools**, click **Create form** on the **Collection Quick Order** card. To rename the form, click the name field above the preview and type a new name, for example `Collection buttons - all buyers`. Buyers never see the name. The builder has three tabs on the left: **Products**, **Customize** and **Visibility**. The preview on the right shows up to three product cards and updates as you change settings. {% endstep %} {% step %} ### Choose the products The builder opens on the **Products** tab (heading **Product targeting**). Pick which products get the button: | Option | Which product cards get the button | | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | | **All products** (selected for a new form) | Every product card the app finds. The banner reads **All products in your store will be displayed in this form.** | | **Specific products** | Only the products you pick. | | **Conditions** | Products that match your rules. | **Specific products:** click **Add products**, select products in the Shopify product picker (for example **Classic Crew Tee** and **Ceramic Coffee Mug**), then click **Select**. To pick from a collection instead, click **Add from collection**, choose a collection such as **Wholesale Essentials**, tick the products you want and click **Add products**, or click **Add all products** to take the whole collection. **Conditions:** under **Products must match:**, choose **All conditions** or **Any condition**. Then set each rule's field, operator and value, for example **Product tag** **contains** `apparel`. Click **+ Add another condition** for more rules. A new form starts with the rule **Product title** **is not equal to** and an empty value, and every rule needs a value before you can save. For every field and operator, see [Product conditions](/globo-b2b-bulk-order/targeting-and-design/customer-and-product-targeting.md#product-conditions). {% endstep %} {% endstepper %} ## Customize the button Click the **Customize** tab. It has four sections, in this order: **Template**, **Show columns**, **Style** and **Custom CSS**. ### Template Select **Classic** (**Button below product**). A new form already uses it. The app places the controls directly below the product's price on each card. If it can't find a price on your theme's cards, it places them at the bottom of the card. ### Show columns The controls appear in the order of the column chips, from left to right: | Column | What buyers see | Shown for a new form? | | --------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------- | | **Variant** | A dropdown of the product's variants, for example `Teal / M`. Sold-out variants are greyed out and can't be picked. | Yes | | **Quantity** | A **-** and **+** stepper around a number box that starts at 1. **+** stops at the variant's available stock. | Yes | | **Stock** | The stock label of the selected variant, for example `Only 4 left`. It changes when the buyer picks another variant. | No | | **Add to cart** | The add button. You can't hide it. | Yes | * **Reorder the controls:** drag the column chips. * **Hide a column:** click the **x** on its chip. * **Show a hidden column:** click **Add column**, then tick it under **Hidden columns**. While the **Variant** column is shown, two checkboxes appear under the chips: | Checkbox | What it does | Default | | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | **Show variants in a popover** | For products with two or more variants, removes the dropdown and turns the add button into a **Choose options** button. That button opens a list of variants, and clicking a variant adds it to the cart. Products with one variant keep the normal add button. | Off | | **Hide variant selector for single-variant products** | **Products with only one variant show the Add to cart button without a dropdown, so the product title is not repeated.** This checkbox is hidden while **Show variants in a popover** is on, because the popover never shows for single-variant products. | On |
Collection Quick Order builder on the Customize tab with the Classic template selected and the Show columns section showing the Variant, Quantity and Add to cart chips and two variant checkboxes

Choose the controls and their order in Show columns, then decide how variants are picked.

### Style **Style** has a row of sub-tabs. The **Variant** and **Quantity** sub-tabs appear only while those columns are shown. | Sub-tab | Settings (default) | | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Variant** | **Text size** (14 px), **Text weight** (400), **Border radius** (8 px), **Border width** (1 px). | | **Variant popover** (replaces **Variant** while **Show variants in a popover** is on) | **Panel width** (260 px), **Row height** (24 px), **Text size** (12 px), **Text weight** (600), **Border width** (1 px), **Shadow** (**Enabled**). These are the same settings as **Variant dropdown** in the **Floating** template, so changing one changes the other. | | **Quantity** | **Text size** (14 px), **Text weight** (400), **Border radius** (8 px), **Border width** (1 px). | | **Add to cart** | **Same style as theme button** (off), **Select icon** (**Cart**), **Icon position** (**Before text**), **Text size** (14 px), **Text weight** (500), **Border width** (1 px), **Border radius** (8 px). | | **Colors** | The colors of each control. See the table below. | On the **Add to cart** sub-tab: * **Select icon:** click **Choose icon**, then pick **None**, **Cart**, **Plus** or **Arrow**. * **Icon position:** **Before text**, **After text** or **Only icon**. **Only icon** hides the button text. If the icon is **None**, the text still shows. * **Same style as theme button:** **Use your theme's Add to Cart style. If unavailable, the app's default style will apply.** When it's on, the app stops applying its own colors, border and text settings to the button, and hides those settings on this sub-tab and on **Colors**. The button then takes your theme's general button styles, so the result depends on your theme. On the **Colors** sub-tab, each shown control has its own group: | Group | Colors (default) | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Variant** | **Background color** (`#ffffff`), **Border color** (`#929292`), **Text color** (`#333333`). | | **Variant popover** | **Background color** (`#111111`), **Border color** (`#ffffff`), **Text color** (`#ffffff`). | | **Quantity** | **Background color** (`#ffffff`), **Border color** (`#929292`), **Text color** (`#000000`). | | **Add to cart** | **Background color** (`#000000`), **Hover background color** (`#333333`), **Border color** (`#929292`), **Text color** (`#ffffff`), **Hover text color** (`#ffffff`). | Size fields take pixels and text weight goes from 0 to 1000. Click a color to open the color picker. For more on these settings, see [Design & custom CSS](/globo-b2b-bulk-order/targeting-and-design/design-and-custom-css.md). ### Custom CSS This section starts collapsed. Click **Custom CSS** to open it, then type CSS in the box. Under **Available CSS classes**, click a class to add it to the box, for example: | Class | Description | | ----------------------------------------------- | --------------------------------------- | | `.samitaBO-collection-quick-buy-controls` | **Variant + quantity + add button row** | | `.samitaBO-collection-quick-buy-variant-select` | **Variant dropdown/select** | | `.samitaBO-collection-quick-buy-quantity` | **Quantity stepper wrapper** | | `.samitaBO-collection-quick-buy-stock` | **Stock status text** | | `.samitaBO-collection-quick-buy-add` | **Add to cart button** | The preview applies your CSS as you type. On your storefront, your CSS is added to the page as written, so it applies to every Collection Quick Order on the page and to anything else your selectors match. Start your selectors with the classes above so they don't change other parts of your theme. {% hint style="info" %} The preview uses the app's built-in wording, for example **Add to cart**. Your storefront uses the wording from **Settings** > **Translations**, so the button reads **Add to Cart** for buyers until you change it. {% endhint %} ## Choose who sees the button and where Click the **Visibility** tab. It has two sections: **Customer targeting** and **Display location**. ### Customer targeting Choose an option under **Who can see this form?**: | Option | Who sees the button | | ---------------------------- | ---------------------------------------------------------------------------------------------- | | **All customers** (default) | Everyone, logged in or not. | | **Logged-in customers only** | Only customers who are logged in to their account. | | **Guest customers only** | Only visitors who aren't logged in. | | **Customers with tags** | Logged-in customers who have at least one of the tags you add under **Include customer tags**. | To add a tag, click **Add customer tag**, then tick an existing tag or type a new one, for example `wholesale`. Tags must match the customer's tag exactly, including capital letters. Use **Exclude customer tags** to hide the button from customers with any of those tags, for example `retail`. This field isn't shown with **Guest customers only**. For more examples, see [Customer & product targeting](/globo-b2b-bulk-order/targeting-and-design/customer-and-product-targeting.md). ### Display location Under **Choose where this form appears**, tick the pages where the button should show: | Checkbox | Product cards it covers | | --------------------------------- | ----------------------------------------------------------------------------------------------------------- | | **Home page** | Product grids on your home page, such as a featured collection. | | **Collection page** | Collection pages. Click **Add** in the **Collection page** box to limit the button to specific collections. | | **Search page** | Search results. | | **Featured and related products** | Product grids on product pages, such as related or recommended products. | For example, tick **Collection page**, click **Add** and choose **Wholesale Essentials**. The button then shows only on that collection's page. To remove a location, untick it or click the trash icon in its box. A new form has no location ticked and shows the banner **No display locations selected. This form will appear on all pages where the app can render it.** It then appears on every page with product cards, including other pages such as blog posts. Once you tick a location, the button shows only on the pages you ticked. The app never adds the button inside your cart, menus or footer, or to the main product on its own product page.
Collection Quick Order builder on the Visibility tab with Collection page ticked under Display location and the Wholesale Essentials collection added

Tick Collection page and add a collection to show the controls only on that collection.

## Activate and save {% stepper %} {% step %} ### Check the status At the top of the builder, make sure **Active** is selected. Choose **Draft** if you aren't ready to publish yet. Draft forms never appear on your storefront. {% endstep %} {% step %} ### Save the form Click **Save** in the save bar at the top of the screen. The message **Form created** confirms it. The builder stays open, so you can keep editing. Later saves show **Form updated**. If something is missing, a red banner titled **There are errors with this collection:** lists the problems, and the builder opens the tab with the first one: | Message | How to fix it | | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | **Name can't be blank** | Enter a name in the name field above the preview. | | **Select at least one product** | On **Products**, add a product or choose another option. | | **Enter value for Product title is not equal to.** | On **Products**, fill in the value of that condition. The message names the field and operator of the empty rule. | | **Add at least one customer tag** | On **Visibility**, add a tag under **Include customer tags**. | | {% endstep %} | | {% step %} ### Check your storefront Open a page you picked in **Display location** on your online store, for example the **Wholesale Essentials** collection page. If you limited the form to tagged customers, log in as a customer with that tag first. It can take a few moments after saving for the button to appear, so refresh the page if you don't see it yet. Each matching product card now shows the controls below its price. Products with only one variant, such as **Stoneware Tea Cup Set**, show the quantity stepper and the button without a dropdown.
Wholesale Essentials collection page where the product cards show a variant dropdown, a quantity stepper and an Add to Cart button below the price, with no dropdown on the single-variant Stoneware Tea Cup Set

With the Classic template, the controls sit below each product's price on the collection page.

{% endstep %} {% endstepper %} {% hint style="warning" %} Button not showing? Check that the **Globo Bulk Order** app embed is on, the form is **Active**, the page is ticked in **Display location**, the product matches the **Products** tab, and you're viewing as a customer who matches **Customer targeting**. A card shows only one Collection Quick Order, so a newer form for the same product may show instead. See [When several forms match a product](/globo-b2b-bulk-order/collection-quick-order/overview.md#when-several-forms-match-a-product). More fixes are in [Troubleshooting](/globo-b2b-bulk-order/help/troubleshooting.md#collection-quick-order-buttons-dont-appear-on-product-cards). {% endhint %} ## What buyers see ### With the variant dropdown 1. The buyer picks a variant in the dropdown. While the dropdown is shown, the card's price is the selected variant's price, in place of a range such as "From $5.95". When the buyer picks another variant, the price changes to match, and the card's image changes too when that variant has its own image. If you use [Globo B2B Wholesale Pricing](https://apps.shopify.com/wholesale-sami), that app manages the card prices instead. 2. They set the quantity with **-** and **+**, or type it. If they type more than the available stock, the app adds the available quantity. 3. They click **Add to Cart**. A spinner shows on the button, then a check mark and **Added**. 4. A message **Added to cart successfully** appears with a **View cart and checkout** link. The quantity goes back to 1 and the cart count updates. The cart drawer doesn't open on its own. If the selected variant is sold out, the button reads **Sold out** and can't be clicked. ### With Show variants in a popover 1. The buyer sets the quantity, then clicks **Choose options**. 2. A list of the product's variants opens, for example **Mint**, **Midnight Blue** and **White** for **Ceramic Coffee Mug**. Each row shows a variant and its price, plus its stock label if the **Stock** column is shown. Sold-out variants show **Sold out** and can't be clicked. 3. The buyer clicks a variant. It's added to the cart right away with the quantity they set, the row shows a check mark, the **Added to cart successfully** message appears, and the list closes. Buyers close the list without adding with the **×** button, by clicking outside it, or with the Esc key.
Wholesale Essentials collection page with the variant list open under the Choose options button of the Ceramic Coffee Mug card, listing Mint, Midnight Blue and White with their prices

With Show variants in a popover, buyers pick a variant from a list and it goes straight to the cart.

### Change the wording * **Button and list texts:** go to **Settings** > **Translations**, click the pencil icon (**Translate**) in the row of a language, and open the **Quick Buy Collection** section. There you can change **Add to cart** (the button text), **Added**, **Sold out**, **Choose options**, **Options** (the list title for products without an option name), **Close** and **Added to cart successfully** (the message heading). See [Edit translations](/globo-b2b-bulk-order/settings/edit-translations.md). * **Message text, link text and look:** the message's second line and its **View cart and checkout** link are in the **Toast** section of **Settings** > **Translations**. To change the message's colors, position and duration, or to turn it off, go to **Settings** > **Toast**. See [Toast notifications](/globo-b2b-bulk-order/settings/cart-notifications.md). ## Next steps * [Add a cart icon on product images](/globo-b2b-bulk-order/collection-quick-order/icon-on-image.md) * [Customer & product targeting](/globo-b2b-bulk-order/targeting-and-design/customer-and-product-targeting.md) * [Design & custom CSS](/globo-b2b-bulk-order/targeting-and-design/design-and-custom-css.md) * [Stock thresholds](/globo-b2b-bulk-order/settings/stock-status.md)