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.
| Setting | Description |
|---|---|
| Label | Enter the label to appear on the button Default is ‘Instant Checkout’ |
| Width | Choose between Wide – fills the available space Narrow – hugs the content of the button Custom – manually set the width, in px |
| Corners | Choose between Round – completely round ‘lozenge’ style button Rounded – a rectangular button with curved corners Square – a rectangular button with sharp corners |
| Colour | Choose between Dark – Coloured button with white text White – White button with coloured border and text |
| Height | Choose 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}}
{{/if}}Below this code, copy and paste your button code in.
Click ‘Save’