It looks like you're visiting the GB site. Please choose another country or region to see content specific to your location.

Continue

Implementing The Butterfly Mark

All the information you need to integrate the Butterfly Mark into your website and app

You can include the Butterfly Mark on your website in four easy steps. Use the panel below to configure and copy the code you need.

If you use a hosting provider like Shopify or Squarespace, see below for more detailed guides, or download our full Butterfly Mark Implementation Guide for details on advanced configuration and the Butterfly Mark API for app integration.

Still stuck? Our Support Team is happy to help.

Configure Your Butterfly Mark

Shopify Integration

The best way to integrate with Shopify is to edit your theme. Here’s how to do that:

  1. Go to your theme settings in your Shopify Admin and make a backup of your theme by either duplicating it or downloading it as a theme file.
  2. Select “Edit code” from the Actions Button to enter the Theme Editor.
  3. Select the main theme file (theme.liquid) from the navigation on the left-hand side to open it in the Theme Editor.
  4. Paste your Butterfly Mark code into the Theme Editor wherever you would like the Butterfly Mark to appear. This is normally best just above the footer, which you will see as {% section ‘footer’ %} in the Theme Editor.
  5. Save your Theme by pressing the Save button at the top right of the Theme Editor.
  6. Check your site and you should now see your Butterfly Mark appear at the bottom of each page, just above the footer.

Layout Tip

When you insert the Butterfly Mark, depending on how your theme works, you might find that it sits on the left-hand side of the screen. If you’d like to centre the Butterfly Mark on the screen, try adding the following code to your Butterfly Mark:

style=”width:100%;text-align:center;margin-top:80px;”

For more information, download our Butterfly Mark Integration Guide.

Squarespace Integration

Squarespace limits the number of things you can do with their standard package. To integrate the Butterfly Mark, you will need a Premium Plan so you can add JavaScript to your site.

With Squarespace, you will need to create a Code Block wherever you want the Butterfly Mark to appear. You can add a Code Block to individual posts and pages, or to the footer so it will appear on every page of your site. Note that some template families such as Bedford and Pacific also have a “Pre-footer” which appears above the footer where you could put the Butterfly Mark instead.

Creating A Code Block

Code Blocks are added just like any other block in Squarespace.

  1. To edit the page, post, footer or pre-footer, click an insert point and select “Code” from the menu.
  2. Paste your entire Butterfly Mark code into the Code Block.
  3. Ensure that the Code Type at the top right is set to “HTML”, and that the “Display Source” checkbox at the top-left is not checked.
  4. Click “Apply” and your Code Block will be saved to your page, post, pre-footer or footer.
  5. Check your site and you should now see your Butterfly Mark appear wherever you have added the Code Block.

For more information on Code Blocks, see this page on Squarespace’s Support Site which includes a short video tutorial:

https://support.squarespace.com/hc/en-us/articles/206543167

For more information, download our Butterfly Mark Integration Guide.

Magento CMS Integration

For Magento, the best method is to create a custom Block which can be re-used across the site wherever you want the Butterfly Mark to appear.

Creating a Custom Block

  1. On the Admin sidebar, go to Content > Elements > Blocks.
  2. In the top-right corner, click Add New Block.
  3. In the Block Title field, give the block a name, like PL_Block.
  4. In the Identifier field, give the block an identifier, like PL_Block.
  5. Choose the Store View where the block will be available.
  6. In the editor below these fields, ensure that “Show/Hide Editor” is set to “Hide” so you can input JavaScript and HTML.
  7. Paste your entire Butterfly Mark code into the editor area.
  8. In the top-right corner, save the settings and return to the Page Builder workspace.

Adding the Block to a Page

  1. On the Admin sidebar, go to Content > Elements > Pages.
  2. Select a page where you would like to include the Butterfly Mark and select “Edit” in the Action column.
  3. Expand the Content section and scroll down to the Page Builder workspace.
  4. In the Page Builder panel, expand the Add Content section. Then, drag a Block placeholder to the new row.
  5. Hover over the empty Block container. Then, choose Settings in the toolbox.
  6. On the Edit Block page that shows, click Select Block and add the Butterfly Mark block that you created.
  7. In the top-right corner, click Save to save the settings and return to the Page Builder workspace.
  8. In the top-right corner on the Save menu, choose Save & Close to save your changes.

For more information on creating and using Blocks, and for further information on the Page Builder, visit this page on Magento’s website:

https://docs.magento.com/m2/ee/user_guide/cms/page-builder-tutorial2-blocks.html

For more information download our Butterfly Mark Integration Guide.