On-site messaging - Vintage Themes

# Add the Smartpay messaging library to your online store

Before you can use Smartpay On-Site Messaging on your website you need to add the Smartpay messaging library to your online store. You only need to do this once before adding the different widgets.

<Embed url="https://www.youtube.com/watch?v=jZPQKM9vZPA&feature=youtu.be" title="Shopify 以前のテーマに Smartpay の messaging.js を追加" favicon="https://www.youtube.com/s/desktop/e2c5c5f8/img/favicon.ico" image="https://i.ytimg.com/vi/jZPQKM9vZPA/maxresdefault.jpg" provider="youtube.com" href="https://www.youtube.com/watch?v=jZPQKM9vZPA&feature=youtu.be" html="%3Ciframe%20class%3D%22embedly-embed%22%20src%3D%22%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FjZPQKM9vZPA%253Ffeature%253Doembed%26display_name%3DYouTube%26url%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DjZPQKM9vZPA%26image%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252FjZPQKM9vZPA%252Fmaxresdefault.jpg%26key%3Df2aa6fc3595946d0afc3d76cbbd25dc3%26type%3Dtext%252Fhtml%26schema%3Dyoutube%22%20width%3D%22854%22%20height%3D%22480%22%20scrolling%3D%22no%22%20title%3D%22YouTube%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3D%22true%22%3E%3C%2Fiframe%3E" />

How to add Smartpay messaging library to your shop

***

1. Edit the code for your online store theme.\
   (Online Store > Themes > Current Theme > Actions > Edit code)
2. Open the `theme.liquid` file.
3. Copy the first section (`script` HTML tag) from our [On-Site Messaging code builder ](https://dev-kit.smartpay.co/osm).
4. Insert the copied tag within the `head`tag in `theme.liquid` file. (Remove the extra `head` tags surrounding the copied code).
5. Replace `<YOUR_PUBLIC_KEY>` with your public key, that you can find on your [Smartpay dashboard](https://dashboard.smartpay.co/settings/credentials) under Profile > Settings > Credentials page.
6. Save the changes you made.

<hr>

# Product page promotion

<div class="osm-description">
  <div>
    <p>Delivering the right payment message at the moment of consideration will increase both conversion and average order values. Use our payment messaging widget to show payment options based on item price or basket size. Place this below the price of an item to automatically display the best message.</p> 
  </div>
  <div class="osm-image">
    <img src="https://files.readme.io/19c887a-cart-product.svg" width="500"/>
  </div>
</div>

<br/>

<Embed url="https://www.youtube.com/watch?v=cT8O_xuRyko&feature=youtu.be" title="Shopify以前のテーマにSmartpay 商品ページプロモーションを追加" favicon="https://www.youtube.com/s/desktop/e2c5c5f8/img/favicon.ico" image="https://i.ytimg.com/vi/cT8O_xuRyko/maxresdefault.jpg" provider="youtube.com" href="https://www.youtube.com/watch?v=cT8O_xuRyko&feature=youtu.be" html="%3Ciframe%20class%3D%22embedly-embed%22%20src%3D%22%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FcT8O_xuRyko%253Ffeature%253Doembed%26display_name%3DYouTube%26url%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DcT8O_xuRyko%26image%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252FcT8O_xuRyko%252Fmaxresdefault.jpg%26key%3Df2aa6fc3595946d0afc3d76cbbd25dc3%26type%3Dtext%252Fhtml%26schema%3Dyoutube%22%20width%3D%22854%22%20height%3D%22480%22%20scrolling%3D%22no%22%20title%3D%22YouTube%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3D%22true%22%3E%3C%2Fiframe%3E" />

## How to add product page messaging to you shop

1. After adding the Smartpay messaging library above, open the `product-template.liquid` file.
2. Find the section where the product price is displayed. `<div class="product__price"> ... </div>`
3. Go to our [On-Site Messaging code builder ](https://dev-kit.smartpay.co/osm) and select `Product`. You can change the formatting to fit the design of your store.
4. Once you are happy with the formatting, copy the second section of the code (`div` HTML tag) from the code builder.
5. Insert the copied code under the product price in the `product-template.liquid` file. (Remove the extra `body` tags surrounding the copied code).
6. Replace the amount with `{{ current_variant.price | times: 0.01 }}`, so the widget will always display the price of the selected product.
7. Save the changes you made.