To generate the code for the Instant Checkout button, go to ‘Settings > Sell With Rezolve’.
If you have completed eCommerce onboarding succesfully, this screen 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 Shopify Templates
To access the template code in Shopify, you need to do the following.
In the sidebar, under ‘Sales Channels’ click ‘Online Store’
In the top ‘Themes’ box (which shows your current theme), click the ‘…’ button next to the ‘Customise’ button at the bottom right.
From the pop up menu that appears, select the ‘Edit Code’ option.
You can now access the templates you need to add the code to.
Code for Head Area
The first code block in Rezolve is designed to go into the <head> area of your Shopify 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 ‘theme.liquid’. Click on it to open it.
Click in the code and press ‘Ctrl + F’ ion your keyboard (or ‘Command + F’ on a Mac). This brings up a search box.
Search 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’
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-template.liquid’. You will find this within the ‘Sections’ folder within the templates.
Use search again to find the following tag within the code:
<button type=”submit” name=”add”
A few lines below this you should see the following tag:
</button>
Add a new blank line just below this tag, and copy and paste the code as shown:
If you want to add in separator with the words ‘—or—’ above the Instant Checkout button, then add this line of code above the code you just pasted in.
<div style=”text-align: center; padding: 10px 0;”>—or—</div>
Click ‘Save’
You can also add your Instant Buy buttons to the grid of products by editing the ‘product-card-grid.liquid’ template (within the ‘Snippets’ folder). Add your code right at the bottom of this file.
Now use the ‘Preview Store’ button (at the top right) to check your changes.
