Facebook requires that they “Send To Facebook” widget is positioned just below the Add To Cart button. There should be nothing else between the button and the widget. By default, we place this widget just below the Add To Cart button.
Please refer to the Facebook “Send to Messenger” widget compliance list.
However, if you do need to re-position it, just use this code:
So how can you re-position the widget?
From you dashboard, you can choose to have the widget aligned left or center.
2: Theme gap:
Depending on your theme, you might feel the space between the “Add To Cart” button and the widget is too big or too small, or the gap between the widget and the content is too big or too small, and you’d like to adjust it.
This gap is controlled by your theme (and we call it “Theme gap“), and can only be adjusted by adjusting your theme’s CSS. There is no on-size-fits-all for this. If you need help with this, let us know and we’ll be happy to give you a hand!
Positioning outside the Add To Cart button
This code will only work inside the Add To Cart submit form action code – which places it pretty close to the Add To Cart button.
For example, if you try to put it in the footer, it will not work. It can only work within the form action code of the Add To Cart button.
How to customize the widget
To customize the widget:
- From your dashboard, navigate to the Messenger > Dashboard.
- Choose the widget you’d like to customize – Discount widget or Add To Cart widget
- Click “Edit” to make changes to the widget
You can then change the text and color of the widget, as well as align the text left or center.
Similarly you can make changes for the Messenger discount widget:
How do I offer discounts?
If you are using the discount widget, you’ll need to create a discount from Shopify. Similarly as we recommend, if you offer a discount as an incentive for your customers to come back and complete the order, you’ll need to create the discounts.