Adding a Buy Button to a Shopify Store

Convictional Buy Buttons are an easy way to capture more potential buyers. They simply plug into your existing store code and begin working right away.

Buyers often source new products by searching directly on a seller's website. Without an easy way to get in contact with you, partnership opportunities may be lost.

With buy buttons, buyers arriving at your store have an easy way to contact you and begin trading.

Setup

If you run into any issues during setup, please don't hesitate in reaching out to support.

(Note that these changes can be previewed before going live with them.)

Step 1: Sign into your Shopify store

Sign into your Shopify dashboard.

Step 2 (Optional): Create a Copy of your Theme

You can create a temporary copy of your theme to see the buy button before going live. You select "Themes" on the left side under "Sales Channels". On the themes page, you can select "Actions" in the "Current theme" section. From the dropdown select "Duplicate".

You should see your duplicated theme just below.

Step 3: Click "Edit code" using the Themes page

You will need to modify the code of either your current theme or duplicated version. If it's the current theme, the changes are seem immediately.

Step 4: Editing your Code

We will be first adding in the dependencies for the buy buttons. We need two things: the CSS file (styling for the button and form), and the Javascript file (the logic). You will need to find the general outer HTML tags. This file should have a <html>, <head>, and <body>. The code and file structure of Shopify stores differ too much to provide an exact location of this file. In our sample store above we could find all of this code in Layout/theme.liquid.

The CSS will be added in the <head> tags and the Javascript will be added above the closing </body> tag. In the head tag, paste in:

<link rel="stylesheet" href="https://cdn.convictional.com/public/assets/buy-button/css/main.css">

Above the closing body tag, paste in:

<script src="https://cdn.convictional.com/public/assets/buy-button/index.js"></script>

Here's what it looked like in our sample store:

Step 5: Find a place for the button

You will need to determine where you want the button to live on your store. It's recommended that you put it in a place to make it feel natural and native to your theme. Below is a screenshot of our product page. We put it above the share buttons.

It may take a few minutes to find your desired location but you will need to locate where this snapshot of code lives. Your theme should be set up in such a way that it is fairly obvious. In our sample store, we could find the "share" buttons in Sections/product-template.liquid. For finding the exact spot in the HTML code, we looked for keywords like "description" or "share" and it jumped to the exact spot.

You will be adding these three lines:

<div id="ConvictionalButton"></div>
<input type="hidden" id="CompanyId" value="<YourConvictionalID>">
<input type="hidden" id="CompanyName" value="<YourBusinessName>">

The next step is updating the values. This is what our store looked like for editing:

Step 6: Update the Values

You will need to update <YourConvictionalID> and <YourBusinessName> with the ones that relate to your business. For your business name, enter your business name. There is no specific formatting. For the Convictional id, you will need to log into your Convictional dashboard. Your id can be found under Settings.

Update the two value fields and save your changes.

Step 7: Test it out!

Shopify offers an easy way to preview changes to your website.

Head over to your site and confirm that the buy button is there and working! You can try submitting a form request. Just put "Testing my buy button" in one of the fields.

Step 8 (Optional): Publish Your Duplicated Theme

If in step 2, you may have created a duplicate of your theme to avoid modifying the live one. Once you are happy with the changes you have made, open the "Actions" dropdown and hit "Publish"!

How did we do?

Contact