Custom Pricing Common Styling Fixes

Follow

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.

    Select_Online_Store.png

  2. Select Actions.

    Select_Actions.png

  3. Select Edit Code.

    Select_Edit_Code.png

  4. Under "Assets", find the bold.css file.

    Find_bold.css.png

    1. If this file doesn't exist, select Add a new asset.

      Select_Add_a_New_Asset.png

    2. Select Create a blank file.

      Select_Create_a_Blank_File.png

    3. Enter bold for the asset name.

      Enter_asset_name.png

    4. Select .css from the list of file types.

      Select_CSS.png

    5. Select Add asset.

      Select_Add_asset.png

  5. Copy and paste the following code into this file:
    .shappify_qb_grid tbody tr:nth-child(1) { display: none; }

    Paste_CSS_Code_1.png

  6. Select Save.

    Select_Save.png

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.

    Select_Online_Store.png

  2. Select Actions.

    Select_Actions.png

  3. Select Edit code.

    Select_Edit_Code.png

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

    Select_product.liquid.png

  5. 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.png

  6. 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.png

  7. Select Save.

    Select_Save.png

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.