In this article, you'll learn how to create and customize a Store Widget skin using a streamlined editor with a live preview. This lets you match your widget's fonts, colors, and button styles to your brand, helping you create a more polished shopping experience for clients. Business owners and staff members with appropriate permissions can configure these settings.
Key tips
Staff members need the Edit widgets permission to create or modify Store Widget skins.
Configure your store categories and catalog items before customizing your skin. The widget displays whatever's already set up in your store.
The Proceed to checkout button doesn't appear in the live preview. This is expected behavior and doesn't affect how the widget works on your website.
If you have unsaved changes, a You have unsaved changes notice appears at the bottom of the page. Make sure to save before leaving the page.
Create or modify a Store Widget skin
To create or modify a Store Widget skin:
Open the App Drawer
then click View All > Setup > Website Widgets > Store.
On the Store page, create or modify a skin:
To create a new skin, click Add Skin. In the popup, enter a name for your skin, then click Save.
To modify an existing skin, click the skin you want to modify in the list.
Configure your widget settings using the panel on the right side of the page. Click a section heading to expand Store items to show or Store display. Styling is always visible. For details on each section, see Store items to show, Store display, and Styling below.
Use the Live Preview on the left side of the page to see your changes in real time. Click the device buttons to switch between desktop and mobile views, or click Open in full screen to view the widget in an overlay at full size.
When you're done, click Save.
Settings panel
All widget settings are organized into three sections in the right-side panel: Store items to show, Store display, and Styling. Store items to show and Store display are collapsed by default. Click a section heading to expand it. Styling is always visible.
Store items to show
Under Select items, choose which items appear in your widget:
To include everything in your store, choose All store items.
To choose specific items, click the dropdown, then search for and select individual products, Purchase Options, gift cards, or memberships. Select Select all to include every item currently in the list.
Store display
Display items for selected locations – Choose whether to show items available at all locations or only specific locations.
Default layout – Choose Grid or List to set how items are displayed by default.
Default sort – Choose how items are sorted by default. Choose how you want items sorted from the Default sort list, then choose a direction from the Order list that appears below it.
The available sort attributes and their order options are:
Manual (custom order) – Items appear in the order you've arranged them in your store settings. No Order list is shown for this option.
Date created – Sort by when items were added. Choose Newest - oldest or Oldest - newest from the Order list.
Alphabetically – Sort items by name. Choose A to Z or Z to A from the Order list.
Price – Sort items by price. Choose Lowest - highest or Highest - lowest from the Order list.
For example, if you want to lead with your most premium offerings, select Price as the sort attribute and Highest - lowest as the order. The live preview updates immediately so you can see exactly how your store will look before saving.
The selected sort applies consistently across both Grid and List layouts.
Styling
Under Styling, configure the visual appearance of your widget to match your business branding. All changes are reflected immediately in the Live Preview. Available options include:
Background color
Font text color
Primary color
Secondary color
Accent font color
Font family
Under Titles, you can set:
Title color
Title font family
Under Borders and separators, you can set:
Color
Line thickness
Button corner radius
Filters corner radius
Next steps
After saving your widget skin, add it to your website. For more information, see Embed a widget.