The widget is a group of elements that controls the floating icon, campaign information, buttons, and messages. Selecting the floating icon opens the widget and shows customers a list of active campaigns.
For the widget to appear, at least one campaign must meet all of the following conditions.
"Show in widget" is on in display settings
The current time is within the display period, or within the campaign's Active dates if no display period is specified
If display conditions are set, those conditions are met
A campaign title is set
In each campaign's display settings, you can set the following items.
Field | Description |
|---|---|
Show in widget | Toggle this on or off. |
Campaign title | Enter the campaign title shown in the widget. |
Campaign description | Enter the campaign description shown in the widget. |
Copy button (discounts with manual application only) | Enter the label for the button that copies the discount code. |
Add gift button (gifts only) | Enter the label for the button that adds the gift to the cart. |
Display position | When there are multiple campaigns, specify display order with a number. Smaller numbers appear first. |
You can configure the following settings in the "RuffRuff Order Bonus" app embed in the theme editor.
Category | Settings |
|---|---|
Floating button | Show/hide, position (bottom left / bottom right / center left / center right), distance from the edges (set separately for mobile and desktop), icon image, badge color |
Entire widget | Background color, main text color, and subtext color |
Widget header | Header title and header subtitle |
Widget item | Background color, gift-added background color, button background color, button text color, button border color |
Popup | Background color, text color, and corner radius |
Toast notification | Background color, text color |
To display the widget, enable the app embed and configure the campaign's display settings.
Prerequisite: Showing the widget requires enabling the app embed in the theme editor.
(1) Open the theme from Shopify admin
Open Shopify admin → Online Store → Themes.
(2) Select "Customize"
Select "Customize" for the theme you want to edit.
(3) Open the app embed "RuffRuff Order Bonus"
Select the App embed icon in the theme editor, then expand "RuffRuff Order Bonus."
(4) Change the settings and save
Change the display or design, then select "Save" in the upper-right corner.
For items such as color and position, see "Items you can set in the app embed".
(1) Open the campaign "Display settings"
Open a Discount campaign or Gift campaign, then select "Display settings."
(2) Enable "Show in widget"
For campaigns you want in the widget, turn on "Show in widget".
(3) Enter the content to display
For the Campaign title, description, button, and other fields, refer to "Fields available in campaign display settings."
(4) Check the display period and display conditions
Set the display period and display conditions as needed.
(5) Save settings
Select "Save" in the upper-right corner.
For details, see "Display Settings (Discount Campaign)" or "Display Settings (Gift Campaign)."
Translation target | Method |
|---|---|
Widget text (header, buttons, and more) | You can translate using Shopify's "Translate & Adapt" app. |
Popup and toast text | You can change it for each language in "Online store (Theme Extensions) → Storefront texts" on the Settings page. |
Campaign title and description | In the app display settings, choose the target language from the language selector and enter the translation. |
To learn how to change the popup and toast texts, see "Change the popup and toast texts".
Campaigns that meet the conditions are listed in the widget.
Situation | Behavior |
|---|---|
Gift distribution conditions are met | A badge is displayed on the floating button |
Select the choice gift button | The gift selection popup opens so the customer can choose a gift. It opens even after "Decline gift" was selected |
Add gift to cart | A toast or popup notification appears, and that campaign's badge count decreases |
The gift in the cart no longer meets the conditions | The gift is automatically removed from the cart |
Hide the floating icon: In the theme editor under "Floating button > Visibility", select "Hidden".
Hide a specific campaign from the widget: Turn off "Show in widget" in the campaign display settings, deactivate the campaign, or change its active period.
A title is required to display in the widget: If the campaign title is not set, that campaign is not shown in the widget.
Embedding on the cart page: The widget cannot be embedded as a block on the cart page or in the drawer cart. Only the widget opened from the floating button can be displayed.
Progress display: There is no feature that shows progress such as "Spend a little more for the next gift". Only information about active campaigns can be displayed.
Hover color: The color shown when hovering over a button cannot be changed. If the button text color is white or close to white, the text is hard to read in that state.
Choosing a choice gift again: The choice gift button exists only in the widget. If "Show in widget" is turned off for the campaign, a customer who selected "Decline gift" cannot reopen the popup.