Custom Pricing Common Styling Fixes

Overview

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.

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.

Select the customization below to view the solution:

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:

  1. From Shopify's admin, select Online Store, then Action > Edit code beside the theme you would like to apply this customization to.
  2. 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.
    4. Select .css from the list of file types.
    5. Select Add asset.
  3. Copy and paste the following code into this file:
    .shappify_qb_grid tbody tr:nth-child(1) { display: none; }

    Paste CSS Code

  4. Select Save.

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:

  1. From Shopify's admin, select Online Store, then Actions > Edit code beside the theme you would like to add this customization to.
  2. 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.

  3. 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

  4. 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 %}

    Paste Text Code

  5. Select Save.
Was this article helpful?
0 out of 0 found this helpful