Customizing your widget's display options
Transform your widget's appearance: Three Ways to Customize Using Shopify's Theme Editor
Customizing the display options of your widget is a great way to make it more user-friendly and visually appealing to your customers. In this article, we will cover the three different ways you can customize your widget's display options using your Online Store Theme Editor.
Display primary checkbox?
The primary checkbox acts as a way to keep the widget display options compact, until the customer has decided to add them to their order.
To customize your widget display options to include the primary checkbox, follow these steps:
- Open the Shopify Online Store Theme Editor.
- Select the Apps icon in the top left corner (below the paint brush icon).
- Select the Wrapped app, and open the list of settings.
- Scroll down within the list of settings to find: "Hide primary checkbox?"
- Untick this box (if it is ticked), and press "Save" in the top right corner.
- The online store editor will refresh the page automatically, and you will see the widget appearance change (similar to the image below).
Drop-down (select menu)
A drop-down menu, also known as a select menu, is a popular way to display a list of options in a compact way. When your customer clicks on the drop-down menu, a list of options appears, and they can choose the one that best fits their needs.
To customize your widget display options using a drop-down menu, follow these steps:
- Open the Shopify Online Store Theme Editor.
- Select the Apps icon in the top left corner (below the paint brush icon).
- Select the Wrapped app, and open the list of settings.
- Scroll down within the list of settings to find: "How will gift option variants appear?"
- From the list, select "Drop-down list", and press "Save" in the top right corner.
- The online store editor will refresh the page automatically, and you will see the widget appearance change (similar to the image below).
Radio buttons
Radio buttons are another popular way to display a list of options. They are usually displayed as circular buttons with a dot in the center that can be selected by the customer. Radio buttons allow your customers to quickly select an option from a list without having to scroll through a drop-down menu. This is a great solution when working with 3-5 unique gift option variants.
To customize your widget display options using radio buttons, follow these steps:
- Open the Shopify Online Store Theme Editor.
- Select the Apps icon in the top left corner (below the paint brush icon).
- Select the Wrapped app, and open the list of settings.
- Scroll down within the list of settings to find: "How will gift option variants appear?"
- From the list, select "Radio buttons", and press "Save" in the top right corner.
- The online store editor will refresh the page automatically, and you will see the widget appearance change (similar to the image below).
Gift option images
Using images to display your gift option variants is a great way to make them more visually appealing and engaging to your customers. Images can be used to represent different products, categories, or features in your app.
To customize your widget display options using gift option images, follow these steps:
- Open the Shopify Online Store Theme Editor.
- Select the Apps icon in the top left corner (below the paint brush icon).
- Select the Wrapped app, and open the list of settings.
- Scroll down within the list of settings to find: "How will gift option variants appear?"
- From the list, select "Gift option images", and press "Save" in the top right corner.
- The online store editor will refresh the page automatically, and you will see the widget appearance change (similar to the image below).
Additionally, you can upload custom images for each gift option variant in the Shopify Admin > Products section. "Standard packaging" will use the product's main image by default.
In the images above you will see "Standard packaging" as the default option, this is equivalent to the customer NOT selecting any gift option for their order. You can edit "Standard packaging" label within the app itself, via: Shopify Admin > Apps > Wrapped > Widgets & Labels.
See the related article below for more details.
In conclusion, there are three different ways to customize your widget's display options using the Shopify Online Store Theme Editor: drop-down menus, radio buttons, and gift option images. By following these steps, you can create a more user-friendly and visually appealing widget that will help your customers engage with your products and services.