Appearance

Call to action sticker ​

This guide describes the Call to action sticker section.

Use the section to overlay a store page with a sticker that links to an (optional) URL, like a store collection page.

The previous video shows a store's home page. In the upper left, part of Theme editor's section menu is displayed. The menu's Animate in after first section option is set to on. This option applies a transition animation to the section's sticker. When a store visitor moves the page downwards, the animation displays the sticker after the visitor has scrolled past the page's first section. In the previous video, the section is displayed on a store's home page (bottom right).

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Configure the Call to action sticker section ​

To configure your Call to action sticker section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select the Home page.

    Note

    The section is accessible from all pages, excluding the Checkout, Gift card, and Password pages.

  2. From the side menu, select Call to action sticker.

    The Call to action sticker section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Home page onlySet the Home page only checkbox to on or off. Enable this option to display the section only on the home page.
Animate in after first sectionSet the Animate in after first section checkbox to on or off. Enable this option to apply a transition animation that displays the section's sticker after a store visitor has scrolled past the first section on the page.
Hide when scrolling upSet the Hide when scrolling up checkbox to on or off. Enable this option to hide the section's sticker when a store visitor scrolls up the page.
TextIn the Text text box, enter text to display inside section.
Text > Connect dynamic sourceTo display (body) text from a dynamic source, select the Connect dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
LinkIn the Link box, enter a URL or select a link to a store page. To remove a link, select the X icon inside the Link box. This setting is optional. With this setting enabled, the sticker is hyperlinked.
Link > Connect dynamic sourceTo display (Link) text from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields.
ShapeUse the Shape options to select a shape. For example, select Default, Circle, Rounded nonagon, or Pixelated. Selecting some shapes will crop the image. The shape you select is applied to the section's sticker. For a list of available shapes, refer to Stickers.
WidthAdjust the Width slider between 100 and 200 pixels. Use this option to specify a width for the section.
Half width on mobileSet the Half width on mobile checkbox to on or off. Enable this option to display the section at half width on mobile display devices.
PositionUse the Position options to select Left or Right. Use this option to control the position of the section on the page.
Font sizeUse the Font size options to select Extra small, Small, Medium, Large or Extra large. Use this option to specify a size for the section's text. The font size is scaled relative to the sticker's Width. For best results, apply this setting after you set the section's Text and Shape.
Custom image > ImageUse the Image picker to select an image to display inside the section. The image is displayed instead of the section's text. Refer to Add, replace or remove an image or video inside a section or block.
Custom image > Image > Connect dynamic sourceTo display an image from a dynamic source, select the Connect dynamic source icon beside the Image image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
Position > RotateAdjust the Rotate slider between -90 and 90 degrees. Use this option to rotate the section on a page.
Position > Enable rotation animationSet the Enable rotation animation checkbox to on or off. Use this option to show/hide an animation that rotates the section automatically.
Mobile > Show on mobileSet the Show on mobile checkbox to on or off. Use this option to show/hide the section on mobile display devices.
Color > Color schemeUse the Color scheme selector to select a color scheme. Refer to Colors.
Color > Theme settings (link)Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store.
Color > Background colorUse the Background color options to select Text, Accent 1, Accent 2, Card, Background or Gradient. Use this option to specify a color for the section's background.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.