Getting Started
Getting StartedTheme Extensions
App SettingsCollection ButtonsFloating Wishlist LinkProduct Page ButtonsWishlist PageCustomisations
Code AccessCustom Wishlist PageInstant Header LinkCustom Colour SwatchesSave for Later in CartWishlist NotificationsIntegrations
KlaviyoGoogle AnalyticsMeta PixelMaestraCollection Buttons
Wishlist buttons for collections.
These buttons will float on top of the product images. Our collection buttons work straight out of the box for all current themes from the official Shopify theme store. If your theme is not listed in our presets, or for some reason isn’t compatible, we will manually add some code to make this work.
Style
Select a wishlist button style. This uses the global colour and button values from app settings.
Position
Position the floating button relative to the product image (e.g. bottom right corner).
Offset
Offset the the floating button position.
- Horizontal offset Negative values move the button left, positive values move the button right.
- Vertical offset Negative values move the button down, positive values move the button up.
Background
Collection buttons will always have a clickable area of 48px width and height. This helps especially on touch devices to make sure the buttons are easy to use. However, you can adjust the visible background size and styling without effecting the clickable area.
Shadow
Adds a shadow to the collection button. This uses the global shadow values from app settings.
Icon
Adjust the wishlist button icon style. Icons will use the global colour values from app settings.
Search & filter app preset
We have presets for popular collection filter and search apps to inject our wishlist buttons into their code.
In some cases a manual setup is required.
- AI Search, Filter & Recommend by Boost
- Algolia Search and Discovery
- Smart Product Filter & Search by Globo
- Smart Search Bar & Filters by Searchanise
- Smart Search & Product Filter by SoBooster
Manual setup
To manually setup wishlist buttons for your collections, every button requires two things:
- Product link The product link is used to connect the wishlist button to a specific product/variant.
- Reference element The wishlist button will float over this element (e.g. product image).
Product link selector
The product link is defined by a CSS selector, which points to an anchor element with a product page href. We recommend to be as specific as possible with this selector to avoid injecting the button in unwanted places. We often use a selector with a pattern match to reference product links.
.card .card__heading > .full-unstyled-link[href*="/products/"]
Floating reference
The reference element is defined in a single line of JavaScript code. The code gets a single argument named target, which is a light wrapper around the product link. If you want the buttons to float over the product link element, you can just set this value to target
.
In case you want to float the wishlist button over another element, use these chain-able methods to reference another element.
closest(selector: string)
Query a parent html element. Learn morefind(selector: string)
Query a child html element. Learn more
target.closest(".card").find(".card__media")
← Previous
Next →