CTA Buttons Document

⭐️ How to set up CTA Buttons app:

After installing CTA Buttons app you be directed to Group Button tab:

Here you can choose to disable or unable app status by pressing the Enable button in the App Status section.**


In the Group Button section, click New Group to add more groups to your store.


It then open a tab which include the group’s name and description:


Edit Groups Information is also available in order to change their information, enable/disable status or removal.

✏️ Note: If any of the groups it’s not necessary needed at one point you can disable them at any time, which means the group you turn off will no longer be displayed on your store’s interface.

Click Edit button will open an Edit Group Button panel, at which you can change your group button information.



Now, choose one of the groups you just make and start the group setting process.

1. General Setting Group:

We recommend you add buttons in the Button Settings Group before you move to General Setting . After setting up a new group, the group will be displayed on your admin store to simulate how they will be shown on your online store. It will be much easier for you to continue modifying while monitoring the group buttons right on your Shopify admin page.



We have provided you a very detail default option for the General Setting section. Feel free to set up the group button as your wish!



Direction : pick a display direction that’s visually appealing for you, whether it’s vertical or horizontal.

Placement : After the icon direction have been set, you can place them left, bottom or right.

Icon size : Not only can you alter the position of the buttons, you can also change the button’s icon size.

Icon Position : Drag the Icon Position slider to the left or right to modify the group position. The group button will move depend on where their placement is. If you place them on the right side of your store, the group will go up as you move the slider towards the left and vice versa.

Icon Style : You can even reshaped your buttons via the three default options available.


For your better visualization, we have set up 2 examples for you:

This is how group button 1 and 2 settings example will be displayed on the store’s interface:



Display : The app is 100% mobile friendly. Therefore, you can choose the icon availability on desktop or mobile or on both of them.


Display time : If you choose Always Show the button will always be displayed on your store. If you just want the group button appear in some amount of time, choose the Time Range option, at which you can adjust the timer and the time zone according to where you reside.


One of the most peculiar features of this app that it have the ability to collect and transfer your store’s data and to Google Analytics and Facebook Pixel if you want to.


Google Analytics:
Before you can start gathering data about your store, you need to have a Google account, sign up for analytics tracking, and choose what data you want to track.

Shopify passes information about events that you can use for Enhanced Ecommerce for Google Analytics. If you want to learn details instruction about how to set up Google Analytics, please check out our Shopify Help Center:

https://help.shopify.com/en/manual/reports-and-analytics/google-analytics/google-analytics-setup

Facebook Pixel:
Before you can add a Facebook Pixel to your online store, you need to have a Facebook ads account and you need to set up the pixel in Facebook Ads Manager.

You can integrate a Facebook Pixel with your online store to help you understand customer behavior and traffic. Facebook Pixel collects data about how your customers are using your online store pages, so that you can plan your ad campaigns more effectively to find new customers.

Visit our Shopify Help Center to gain further information about Facebook Pixel :
https://help.shopify.com/en/manual/promoting-marketing/analyze-marketing/facebook-pixel

2. Button Settings Group

How to change the button order:

If you want to rearrange their order, drag them to the position you want and drop them to their new position.

For instance, to put Instagram button under Twitter, click Instagram, and then drag it under Twitter.


Button Settings:

Click “**Edit**” button to carry out your adjustment, it then open the Button Settings panel .


In the Type section, choose one out of 12 buttons to make modifications.

We have prepared some of the default icons for you to choose from, but if you want your icon have a unique outward, you can click “ Custom Icon *” to upload your own image.


Depending on what type of button you pick, the next section’s personal information to fill in it’s different relatively.

For example, if your choice is social media buttons, such as Twitter or Instagram, the User Name box will show up.


You should fill in the box your phone number if the buttons are related to mobile communication.


Apply color to your icon with our wide range palette. the same method can be applied to change the button’s background color.


If you find the button a bit overpowering, you can adjust the icon’s opacity easily by dragging the slider towards the left to reduce the opacity and vice versa.


The icons can be displayed by themselves but you can always attached them with text or set them up with only text.
If you choose related text options then you probably want to add a little hint to impulse the customer to press the button and leave you a message or a call.



Once you have decided on all adjustments, all you have to do is save the recipe.

What's more, if you don't use a button at all, you can remove them completely from your store.

⚠️ If you have any problem in using CTA Buttons please do not hesitate to contact us, our support team will make sure your problem is solved as soon as possible.

Updated on: 07/11/2024