Instant Checkout for BigCommerce

To generate the code for the button, go to ‘Settings > Sell With Rezolve’.

If you have completed eCommerce onboarding successfully, it should look like this:

Click the green ‘Generate Instant Buy Button’ button.

Use the controls down the left to adjust the appearance of the button.

LabelEnter the label to appear on the button
Default is ‘Instant Checkout’
WidthChoose between
Wide – fills the available space
Narrow – hugs the content of the button
Custom – manually set the width, in px
CornersChoose between
Round – completely round ‘lozenge’ style button
Rounded – a rectangular button with curved corners
Square – a rectangular button with sharp corners
ColourChoose between
Dark – Coloured button with white text
White – White button with coloured border and text
HeightChoose between
Small – a small button, suitable for lists
Large – a larger button, suitable for details pages

You’ll be able to preview your button while you make changes.

Once you are happy, you are ready to copy and paste the code for the button into Shopify.

Editing BigCommerce Templates

In BigCommerce, go to ‘Storefront’ in the left sidebar and select ‘Themes’.

Your current theme will appear on this page.

In order to edit your theme files in BIgCommerce, you need to be using a custom theme rather than a system one. You can tell if you have a custom theme or not by clicking on the ‘Advanced’ button. You want an option there called ‘Edit Theme Files’.

If you don’t have this option, then do the following.

  • Select ‘Make a Copy’
  • Give your new theme a meaningful name e.g. ‘Instant Checkout Theme’
  • Click ‘Save a Copy’

Your custom theme will now be created. The process takes about 30 seconds.

Once created, it will appear under ‘Themes’.

Click the ‘…’ button on your new theme and click ‘Apply’.

Note: the advantage of this is that if you run into issues, it’s very simple to switch back to your original theme.

Now you can choose ‘Edit Theme Files’

Code for Head Area

The first code block in Rezolve is designed to go into the <head> area of your BigCommerce site code – this is the area where all the script and design settings are loaded when the page first loads.

The <head> code for your site is contained within a template file called ‘base.html’ which you will find by expanding ‘templates’ and then expanding ‘layout’.

Look for </head> (this is the closing tag that ends the head section).

Just above this tag, copy and paste in your code as shown:

Click ‘Save & apply file’

Code for Body Area

The second code block goes where you want the button to actually appear.

To add it to your product details page, you need to open the template file called ‘product-view.html’. You will find this file by expanding ‘templates’, then expanding ‘components’ and then expanding ‘products’.

Search for the word ‘wishlist’. You should find this code:

        {{#if settings.show_wishlist}}
            {{> components/common/wishlist-dropdown}}

Below this code, copy and paste your button code in.

Click ‘Save’