The widget is a collection of components — including a floating icon, campaign information, various buttons, and messages. Customers can click the floating icon to open the widget and view a list of active campaigns.
The widget is displayed when there is at least one campaign that meets all of the following conditions:
Campaign status is Active
The current time is within the campaign's active dates
A campaign title has been set in the display settings
Field | Description |
|---|---|
Show in widget | Toggle on or off. |
Campaign title | Enter the title to display in the widget for this campaign. |
Campaign description | Enter the description to display in the widget for this campaign. |
Copy button (discount / manual only) | Enter the label for the button that copies the discount code. |
Add gift button (gift only) | Enter the label for the button that adds the gift to the cart. |
Display position | Specify the display order when multiple campaigns are shown, using a number. Campaigns are sorted in ascending order. |
The overall widget design can be customized in the theme editor.
Steps
Go to Online Store → Themes in the Shopify admin.
Click Customize.
Click the app embed icon in the theme editor.
Expand RuffRuff Order Bonus and adjust the settings.
Click Save.
Settings Available in the Theme Editor
Category | Settings |
|---|---|
Floating button | Show/hide, position (bottom-left / bottom-right), icon image, badge color |
Widget overall | Background color, main text color, sub text color |
Widget header | Header title, header subtitle |
Widget items | Background color, gift added background color, button background color, button text color, button border color |
Popup | Background color, text color, border radius |
Toast notification | Background color, text color |
Situation | Behavior |
|---|---|
Gift eligibility conditions met | A badge appears on the floating button |
Gift added to cart | A toast or popup notification appears, and the badge count for that campaign decreases |
Gift in cart no longer meets conditions | The gift is automatically removed from the cart |
Translation Target | Method |
|---|---|
Widget text (header, buttons, etc.) | Use Shopify's Translate & Adapt app. |
Campaign title and description | Select the target language from the language selector in the app's display settings and enter the translation. |
Hiding the floating icon: Select "Hidden" under Floating button > Visibility in the theme editor.
Hiding a specific campaign from the widget: Turn off "Show in widget" in the campaign's display settings, set the campaign status to inactive, or adjust the active dates.
Campaign title is required for widget display: If no campaign title is set, that campaign will not appear in the widget.