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 the app's admin. However, some adjustments do require a small coding fix to work correctly.
Alert
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.
On your storefront, the Quantity Breaks grid will display every single purchase range for your products.
In most cases, your quantity discounts will be for purchases that have more than one product. However, the grid will still show 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 Action > 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.
- If this file doesn't exist, select Add a new asset.
- Select Create a blank file.
- Enter bold for the asset name, and select .css from the list of file types.
- Select Add asset.
- Copy and paste the following code into this file:
.shappify_qb_grid tbody tr:nth-child(1) { display: none; }
- Select Save.
Alert
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 will display 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 Actions > Edit code beside the theme you would like to add this customization to.
- Under Templates, select product.liquid.
Note: You'll 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>
- Paste the following line of code above the grid:
Note: You'll 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.