Custom Pricing Common Styling Fixes

Custom Pricing provides you with the flexibility to customize many aspects of the app's storefront display.

There are several display settings that can be changed for the Quantity Breaks grid within Custom Pricing's admin. However, some adjustments do require a small coding fix to work correctly.

Note These are general instructions that are applicable to the most commonly-used themes. Thorough testing should be completed post-installation to ensure the customization is working on your theme.

Hide First Row in Quantity Breaks Grid

On your storefront, the Quantity Breaks grid displays every single purchase range for your products.

In most cases, your quantity discounts are for purchases that have more than one product. However, the grid still shows a 0% discount starting at purchasing 1 or more product(s).

To hide this from your storefront grid, please follow these steps:

From Shopify's admin, select Online Store, then ... > Edit code beside the theme you would like to apply this customization to.
Under Layout, open theme.liquid.
Copy and paste the following code into this file under <head>:
```
{{ 'bold.css' | asset_url | stylesheet_tag }}
```
Select Save.
Under Assets, find the bold.css file.
1. If this file doesn't exist, select Add a new asset.
2. Select Create a blank file.
3. Enter bold for the asset name, and select .css from the list of file types.
4. Select Add asset.

Copy and paste the following code into this file:

.shappify_qb_grid tbody tr:nth-child(1) { display: none; }

Paste CSS Code

Select Save.

Add Text Above the Quantity Breaks Grid

Note This customization can only be applied if you are using Custom Pricing in the Variant Dependant Method (Version 1) or Draft Order Method (Version 2).

By default, the Quantity Breaks grid displays without any additional text above it. You may want to add text to incentivize your customers into purchasing more items.

To add text to the top of your grid, please follow these steps:

From Shopify's admin, select Online Store, then ... > Edit code beside the theme you would like to add this customization to.
Under Templates, select product.liquid.
Note You need to select the theme file that contains your quantity breaks grid code. This may be located under Sections within the product-template.liquid file.

Find the following line of code:

<div class = "bold_qb_grid" data-variant-id = "{{ product.selected_or_first_available_variant.id }}"></div>

Find QB Grid Code

Paste the following line of code above the grid:
Note You need to change the YOUR TEXT HERE section to the message you want to display to your customers. You can also change the style of the text using HTML and CSS.
```
{% if product_has_qb %} <p style="text-align:center"><strong>YOUR TEXT HERE</strong></p> {% endif %}
```
Select Save.