This installation guide is applied for Dawn and other Shopify themes in Online Stores 2.0. Shopify has upgraded its theme architecture in Online Store 2.0, so you can install Social Proofy pixel code in Shopify’s Theme Editor and use all Social Proofy widgets. In this article, we’ll walk you through the step-by-step instructions to install our widgets on your store.
Visit Social Proofy demo store (password: 123456), or check our examples for inspiration to see how other Social Proofy users are customizing their widgets. If you need additional customizations beyond our app settings, our support team will work on basic customization requests.
Step 1: Open the Shopify's Theme Editor
After adding the Social Proofy app from the Shopify App Store, 5 different widgets are added to your account with their settings.
- Installation by Social Proofy (for all themes)
- Installation by You (for Dawn and other themes in Online Store 2.0)
Don’t worry if you don’t have a theme that supports Online 2.0, your pixel code will be added automatically after you add the Social Proofy application. Click on the app title to manage the widgets and you will be automatically redirected to the Social Proofy dashboard.
Step 2: Enable the App Embed
- For all the widgets to work, please make sure to enable the App Embed in Shopify’s Theme Editor by choosing Theme Settings at the bottom left.
- When the Theme Settings panel appears on the right, click on the App Embeds tab.
- Toggle the bar to enable the Social Proofy Core Snippet, then click Save.
Important note:
Make sure to enable the Social Proofy Code Snippet before you add any widgets because it contains the code needed and shared by multiple widgets (e.g. it controls which Latest Conversions show up on the widgets). In other words, our widgets are dependent on the Social Proofy Code Snippet, so you need to enable it in order for the widgets to function correctly.
Step 3: Install the widgets by using Social Proofy
- Latest Conversions
The Latest Conversion widget is set to automatically display the last 30 orders in your store. New orders will be automatically added to the display queue. If you want to change the widget display settings, click the pencil icon on the right side of the widget in Social Proofy dashboard.
- Basic: You can change the name of the widget, the information to be displayed, the total number of data to be displayed, the time elapsed between the widget display in this field.
- Triggers: You can set the widget’s page display rule, trigger rule, session and device display settings from this area.
- Display: You can change the time the widget stays on the page, its position on the screen and the closing option from this area.
- Customize: You can change the general design and color settings of the widget, as well as the entrance and exit animations from this area.
- Statistics: You can use this page to view detailed statistics of the widget.
2. Free Shipping
The Free Shipping widget is designed to help you increase the average order amount of your store. The Free Shipping limit is set as USD 50 by default. You can customize it for your store by following the steps below.
- When cart is empty: Contains the message that will be displayed if there is no product in the visitor’s cart. You can change the message visitors see by replacing the values.
- Below free shipping limit: Contains the message that will be displayed if the visitor’s cart total is below the shipping limit. The amount you set is calculated and displayed on the widget. You can change the message visitors see by replacing the values.
- When free shipping available: If the visitor’s cart total is above the free shipping limit you set and he is entitled to free shipping, the message in this field is displayed. You can change the message visitors see by replacing the values.
- Delivery Locations: Make sure ‘Enable for any delivery location.’ is turned off for the widget to appear in all countries.
- Important note: The Free Shipping widget has been added to your account to work only on the Cart page. You can make the widget appear on different pages by changing the Triggers settings.
3. Countdown Timer
The Countdown Timer widget is designed to create FOMO on visitors. What you need to do is to determine the date when the counter will stop and activate it after preparing the campaign message. The Countdown Timer does the rest.
- Title & Description: Add your campaign message and discount rate to these fields to activate the user.
- End Date: When you activate the counter, the countdown starts until the date you set in this field.
- Recurring Timer: If you want the counter to repeat continuously for a certain period of time, activate this field and select 1, 3, 8 or 24 hours. The timer will countdown continuously until the end time.
- Button URL: Add the link of the page to this field to direct your visitors to a specific page.
- Triggers: If you want the widget to run only on the page you specify, you can adjust the Trigger settings here.
- Display: Use these settings to determine where and how long the widget stays on the page.
- Customize: If you want to customize the widget according to your brand or campaign colors, you can use this field.
4. All-in-One Chat
The easiest way to communicate with your visitors is the All-in-One Chat Widget. Add a photo of your support team and identify communication channels. You can show your visitors multiple options where they can reach you.
- Chat Header: Add information about your support team from this area and show your visitors who to talk to.
- Chat Body: Add a welcome message for your visitors. Shorter messages are always more effective.
- Buttons: You can activate only 5 different channels at the same time. Add the link of the channel and activate it, that’s all.
- Triggers: If you want the chat widget to appear only on a specific page, use the Triggers settings.
5. Coupon Code
Show your visitors the coupon codes in your store and get them to complete their shopping. Especially if you show the coupon codes on the cart page, you can increase the rate of visitors to the payment step.
- Title: Title Message: Add a catchy message to this area to notify visitors.
- Title: Description: Specify the percentage of discount visitors will receive when they use the coupon code.
- Image: We’ve added an eye-catching image for you, but you can upload a different image if you want.
- Coupon Code: Create a coupon code in your store and add it to the widget.
Add New Notification
Social Proofy allows you to use more than 30 widgets in your store. You can collect feedback or email using widgets or create a nice looking popup. All you have to do is edit and activate the widget you want to use according to your needs.
- Chat Header: Add information about your support team from this area and show your visitors who to talk to.
- Chat Body: Add a welcome message for your visitors. Shorter messages are always more effective.
- Buttons: You can activate only 5 different channels at the same time. Add the link of the channel and activate it, that’s all.
- Triggers: If you want the chat widget to appear only on a specific page, use the Triggers settings.