Success
Button
Create a flexible call-to-action button with customizable style, icon, link, and mobile display options.
Use this block to add a clear call to action within a section or block. You can keep it simple with text and a link, or make it more visual with an icon, alternative styles, and mobile-specific display choices.
Core settings
Section titled “Core settings”Start with the button text and link, then adjust the visual style to match how prominent the action should feel. Stronger styles work best for primary actions, while plain or secondary styles suit supporting links and less prominent actions.
You can add an emoji or a supported icon name to give the button a quick visual cue. In most cases, the icon should support the label rather than replace it.
Layout controls where the icon appears, or whether the button shows only the icon. Icon-only buttons work best when the meaning is obvious from the surrounding content or the symbol is widely recognized.
If you use an icon-only layout, make sure the action is still easy to understand at a glance. Text labels are usually clearer and more accessible.
Use the smaller or larger size variants when the default button feels out of scale with the surrounding content. Large styles can help a featured promotion stand out, while small styles fit better in compact layouts.
The full-width mobile option makes the button easier to tap on smaller screens. This is especially useful in stacked layouts or promotional areas where a narrow inline button could be easy to miss.
If the button points to an external destination, opening the link in a new tab can help customers keep their place. For internal destinations, opening in the same tab usually feels more natural.
Standard block settings
Section titled “Standard block settings”Visibility settings
Section titled “Visibility settings”Visibility settings let you show or hide this block on desktop or mobile. This is helpful when you want different button treatments for different screen sizes or need to simplify a crowded mobile layout. For related theme editor behavior, see Shopify documentation on customizing sections
See Visibility settings for the shared behavior of these controls.
Usage notes
Section titled “Usage notes”- Use clear action text. Choose labels that tell customers exactly what will happen next, such as Shop now, Learn more, or Book an appointment.
- Match prominence to priority. Reserve stronger or larger styles for the main action and use quieter styles for secondary links.
- Keep icons supportive. Add icons to reinforce meaning, but avoid relying on them alone unless the context makes the action unmistakable.
- Optimize for mobile taps. Turn on full-width display when the button needs more presence or easier tapping on small screens.
- Check style fallbacks. Leave colors and visual overrides unset when you want the button to inherit the surrounding area’s fallback styling; add explicit styling only when the button should stand apart from its container.
- Check hidden states. If you hide the block on desktop or mobile, make sure the same action is still available somewhere else on that device.