Skip to main content

Shopify Checkout

Give your Shopify store a modern checkout experience with our Sonic Checkout. Our plugin integrates seamlessly to simplify payments and deliver a faster, more engaging checkout journey for your customers. Follow this guide for a quick, step-by-step setup and start accepting payments effortlessly with Nimbbl.

SAMPLE EXPERIENCE

Compatibilities and Dependencies​

  1. Active Shopify account with a Store

Prerequisites​

You should have registered with Nimbbl and received your test access key and secret key. If you haven’t registered, please sign up on the Nimbbl website or fill this form, and our team will contact you.
in the given form make sure, in the domains section where it says canonical domain, enter your myshopify domain which for example looks something like this - "vtbasy-jf.myshopify.com".
this is generated right when you create your shopify store.
apart from this, make sure you also provide your rest of domains configured in shopify, you can find these in Settings -> Domains section shown below, here "indiesportz.art", "www.indiesportz.art" are the rest of the domains. Shopify domains settings panel

Plugin Installation​

  • Begin by installing the application via the provided link sent to your email address.

How to Install Our Plugin From Shopify?​

  1. Click on the link
  2. Select your shopify account

Select your Shopify account

  1. Click “Install”

Click install button

  1. Plugin Configuration page will open where you can configure your nimbbl plugin preferences

Nimbbl plugin configuration page

Access App Preferences​

Once the installation is complete, open the app from the list of installed applications and navigate to its "Preferences" section.

Enter Credentials​

  1. In the Preferences, Nimbbl Sandbox toggle will be selected by default , input your sandbox key and secret and click save changes to start testing the plugin in your test environment
  2. Make sure that you toggle off sandbox when using your live environment credentials.

Sandbox credentials input form Live environment credentials form Saved preferences confirmation

Implement Checkout Override​

To ensure the checkout override functions correctly, a script must be included in the store's theme. This script will execute every time a product page or checkout drawer is opened, overriding the existing functionality of the "Buy Now" and "Checkout" buttons to open the Nimbbl checkout.

  1. In the Shopify admin homepage, click on "Online Store."
  2. Click on the three dots located to the left of the "Customize" button and select "Edit Code." This action will open the theme code editor, resembling Visual Studio Code.

Shopify theme edit code option

  1. In the editor, locate the Snippets folder and create a new file named nimbbl-checkout.liquid. Paste the following code:
<script>
  window.customerDetails = {
    email: {{ customer.email | json }},
    phone: {{ customer.phone | json }},
    first_name: {{ customer.first_name | json }},
    last_name: {{ customer.last_name | json }},
  };
  window.shopCurrency = {{ shop.currency | json }};
  window.productDetails = {{ product | json }};
</script>
<script defer type="module" src="/apps/ncs-proxy/nimbbl-checkout.js"></script>

Snippets folder in theme editor Create new snippet file Naming the snippet file Pasted code in snippet file

  1. To ensure the snippet functions correctly, it must be included in the theme.liquid file, which can be located by selecting “layout” and add the following line within the <head> tag of “theme.liquid” file
{% render 'nimbbl-checkout' %}

Theme layout file location Render tag in theme head section

Uninstallation​

  1. Uninstall the app from the Apps list.
  2. Remove the snippet included from theme.liquid.
  3. Delete the nimbbl-checkout.liquid snippet from the Snippets folder.

Shopify installed apps list Uninstall app option Uninstall confirmation dialog App uninstalled successfully

Sonic Product OverviewFull Sonic checkout experience in ShopifyCommand Center: CredentialsFind your API keys for setup