What does the Add To Wishlist button block do?
The Add To Wishlist button block renders the wishlist button at a spot you choose on the product page. It’s a section block, available on product templates only. This page documents every setting in the block and what each one changes.
How the block works
- The block renders an empty container with the ID
wishlist-hero-product-page-button, and the app script fills it with the wishlist button - Each setting is either applied as CSS scoped to this block’s container or passed to the app script through data attributes on the container
- The block is available on product templates only
- To fully control placement, turn on Disable automatic product button placement in the App Configuration embed; otherwise the automatic button and this block can both show
Settings reference
| Setting | Setting ID | Type | Default |
|---|---|---|---|
| Display style | displayButtonMode |
Select | As Configured in App |
| Content alignment | contentAlignment |
Text alignment | Center |
| Button alignment | buttonAlignment |
Select | Center |
| Top margin | topMargin |
Number | Empty |
| Bottom margin | bottomMargin |
Number | Empty |
| Button height | buttonHeight |
Number | Empty |
| Max width | maxWidth |
Number | Empty |
| Override default font | overrideFont |
Checkbox | Off |
| Custom font | customFont |
Font picker | Helvetica |
| Use full width | buttonFullwidth |
Checkbox | On |
| No border / box-shadows | removeBoxShadowAndBorder |
Checkbox | Off |
| Horizontal padding | horizontalPadding |
Range, 0 to 50 px | 20 |
| Size (icon) | iconSize |
Number | Empty |
| Top Offset (icon) | iconTopOffset |
Range, -10 to 10 px | 0 |
| Additional CSS Class | addedCssClassNames |
Text | Empty |
| Additional Container Style | addedContainerStyles |
Text | Empty |
Display and layout
Display style
Per-block override of the button’s display mode. As Configured in App uses the display mode from the app’s button settings; the other options are Button with icon, Button Only, Text Only, Icon Only, and Text with icon. The value is passed to the app script as the data-wlh-mode attribute. See Button settings.
Content alignment
Text alignment inside the button: left, center, or right. Applied as text-align on the button.
Button alignment
Where the button sits in the block: Left, Center, or Right. Applied as the flex container’s justify-content value.
Spacing and size
All settings in this group are optional and measured in pixels. Leave a field empty to use the app default.
- Top margin: space above the button, passed through
data-wlh-margin-top - Bottom margin: space below the button, passed through
data-wlh-margin-bottom - Button height: the button’s height, passed through
data-wlh-button-height - Max width: caps the button’s width; applied as
max-widthon the button, and 0 disables the cap - Font size: the button label’s font size, passed through
data-wlh-button-font-size - Horizontal padding: inline padding around the button, from 0 to 50 px with 20 px as the default, passed through
data-wlh-hpadding
Font
Override default font
Shows the Custom font picker below it. The button uses the app’s configured font until you turn this on.
Custom font
Loads the selected font in the theme and applies its family to this block’s button with !important , scoped to the block so no other buttons change. The picker only shows when Override default font is on.
Button effects
Use full width
Stretches the button and its container across the full block width. On by default, so the button matches the width of the add to cart button above it.
No border / box-shadows
Removes the button’s border and box shadows, including the ::before and ::after pseudo elements that themes use for overlay effects. Use it when your theme draws frames or shadows around buttons.
Icon
Size
Font size of the button’s icon, applied to its SVG. Leave it empty to match the button text size.
Top Offset
Vertical nudge for the icon, from -10 to 10 px in steps of 0.5, applied as a relative top offset. Use it when the icon sits too high or too low inside the button.
CSS integration
Additional CSS Class
Class names added to the block’s container. Use them to target this specific button from your own CSS.
Additional Container Style
Inline styles added to the block’s container, for overall spacing adjustments.
For deeper styling, use the app settings or the CSS Customization Guide linked in the block. If you need help, contact support.
Related pages
