2.2 VISUAL INTEGRATION with seQura On-Site Messaging App - EN
Installation and setup
Step 1: Install the app
The seQura seQura On-Site Messaging App Messaging App can be installed from the Shopify marketplace. After selecting a Shopify store, you will be prompted to confirm app permissions and install the app.
Once you confirm the permissions, you will be redirected to the app dashboard page.
Step 2: Setup the SeQura payment gateway
The seQura On-Site Messaging App is dependent on the SeQura payment gateway and requires it to be installed and set up on your store. If you do not have the SeQura payment gateway installed and set up, you will be prompted to install it.
Clicking on the link on this page will lead you to the SeQura payment gateway page in your store.
Once the SeQura payment gateway is installed and activated, the seQura On-Site Messaging App will pull all the necessary data from it and use it for initialization.
Step 3: Setup selling countries
Once the payment app is set up, the seQura On-Site Messaging App will pull all the supported selling countries from SeQura and intersect them with countries that are currently active in your Shopify store. If the app detects that there are no available countries in the current configuration, you will be prompted to configure them.
Clicking on the button on this page will lead you to the country configuration page in Shopify where you can activate additional countries supported by SeQura.
Once there is at least one selling country supported by SeQura available in the store configuration, you will be taken to the widget configuration page.
Widget configuration
After installing the seQura On-Site Messaging App and setting it up, you can configure promotional widgets on your store.
You have the option of customizing the look and feel of SeQura promotional widgets using the widget configurator and then you can just copy the generated JSON configuration into the designated field in the widget configuration page.
Additionally, you can select on which pages you want to allow widgets to be displayed and, in case of product listing mini-widgets, you will be able to configure additional options.
To ensure that mini-widgets work on different themes, we provide the mini-widget CSS selector which is initially prepopulated with the default selector that works on the most popular Shopify themes. However, you can alter this selector to match the theme you are using. This does require a bit of technical knowledge, so please consult your store administrator for help in setting this up.
IMPORTANT: Please make sure to include the CSS selector of the entire product listing element that contains the product price, in order to ensure that mini-widgets are displayed properly.
Aside from that, you can also configure display labels for mini-widget messages in each of the supported languages by clicking on the “Configure Texts” button. This will show labels for both the teaser message, shown when the product price is equal or higher than the minimum supported amount for the SeQura product that offers mini-widgets, and message below limit, shown when the product price is lower than the minimum supported product amount.
All labels should include the special character “%s” that will be replaced with the calculated installment amount on the storefront.
Widget placement
Once you have enabled and configured promotional widgets in the app configuration, you can add them to your product and cart pages in the store theme using the theme editor.
IMPORTANT: SeQura promotional widgets are available for all themes supporting Shopify Online Store 2.0.
Once you select the theme you want to customize, navigate to either the product or the cart page and find the place you want to add the SeQura promotional widgets to. You can add this content block either as a separate section of the page or as the block in the existing section.
Once clicked, the SeQura content block will be added to the designated place on the page at the bottom of its parent content block, and you can drag it to a more suitable location on the page.
You can also customize which products you want to display promotional widgets for in the component menu. Enabling/disabling a certain product option will show/hide the corresponding promotional widget in the page.
Once the changes are saved, promotional widgets will be shown to customers on the storefront.
Widget interaction
Product listing page
Customers browsing the product listing page on your storefront will be able to see ways to pay for a specific product using SeQura installments when they hover over that product in the listing. In case the product price is equal or higher than the minimum supported product amount on SeQura, it will show the configured teaser message in the current storefront language.
Otherwise, if the product price is lower than the minimum supported product amount on SeQura, hovering over the product will display the configured message below limit in the current storefront language.
Product page
Customers that open the product page for a given product will be able to see ways to pay for that product using SeQura payment methods. Promotional widgets use the current product price and take into account any additional costs caused by the specific product variation or quantity change.
Additionally, clicking on the info link in a specific promotional widget block opens up more information about payment arrangement for that specific SeQura payment method.
Cart page
Customers that reach the cart page in your Shopify storefront will be able to see options to pay for their current cart using SeQura payment methods.
Similarly as on the product page, customers can click on the link in the promotional widget and see more information about payment options with that payment method.