Customize the Bold Upsell Window



This guide requires extensive Liquid coding knowledge in order to change the appearance of the Upsell window. Please contact our Merchant Success team if you are unsure how to adjust this yourself.

Bold Upsell gives you the flexibility to manipulate and adjust the location of all the elements in the upsell window.

To adjust the placement of these elements, please follow these steps:

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under "Snippets", select Add a new snippet.

    Select Add a New Snippet

  5. Enter bold-custom-upsell-template as the snippet name.

    Enter bold-custom-upsell-template

  6. Select Create snippet.

    Select Create Snippet

  7. Copy and paste the following code into the snippet: bold-custom-upsell-template.liquid

    Copy/Paste Code

  8. Adjust the snippet accordingly.

    Note: This is where you will adjust the placement of certain elements in the window. The comments around each section of the template will need to be removed in order for your changes to be pushed to the storefront.

    Adjust Coding

  9. Select Save.

    Select Save

  10. Under "Layout", select theme.liquid.

    Select theme.liquid

  11. Find the </body> tag and paste the following code above that line:
    {% include "bold-custom-upsell-template" %}

    Paste include bold-custom-upsell-template

  12. Select Save.

    Note: Additional CSS styling may be required to have these elements display correctly in the upsell window. Visit Basic CSS Styling for Bold Upsell for more information on where and how to style the modal.

    Select Save

  13. Test Bold Upsell to see how the app now displays on your storefront.

That's it!

Next Steps:

Blog Posts:

1 out of 1 found this helpful



Please sign in to leave a comment.