# Call to action sticker

This guide describes setting up the Call to action sticker section.

Use the section to overlay the homepage with a sticker that links to a URL, like a store page.

The previous video shows a Call to action sticker section on a store’s homepage (bottom right). When a store visitor moves the homepage down, a popup animation displays the sticker. The sticker’s Shop now text is displayed, and a 10 point star shape is applied to the sticker. A Rotation animation rotates the sticker automatically. The sticker is hyperlinked to the store’s Collections page.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks (opens new window)

# Set up a call to action sticker section

To set up a Call to action sticker section:

  1. Go to Customize theme. At the top of the page, select the Home page template.

    Note

    The section is available only on the Home page template.

  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 name Description
Enable call to action sticker Select the checkbox Enable call to action sticker to show/ hide the section on the homepage.
Animate in after first section Select the checkbox Animate in after first section to turn on/ off animation for the section. With this setting enabled, the sticker is displayed whenever a store visitor scrolls past the first section on the homepage.
Text In the Text box, enter text to display inside section.
Link In the Link box, enter a URL or select a store page for the section to link to. To remove a link, select the X icon inside the Link box. This setting is optional. With this setting enabled, the sticker is hyperlinked.
Shape Use the Shape dropdown to set a shape for the section. The shape is applied to the sticker. For a list of available shapes, refer to Stickers.
Width Adjust the Width slider to set a width for the section between 100px and 200px (pixels).
Font size Use the Font size dropdown to set 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. The dropdown options are Extra small, Small, Medium, Large, and Extra large.
Custom image Use the following Image selector options to set up an image inside the section. The image is displayed instead of the section’s text.
  • To add an image, choose Select image, and then upload an image or select an image file from your store’s file library.
  • To edit an uploaded image, select Edit in the image selector’s thumbnail preview area. Refer to Edit an image inside a section or block.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
  • Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. Refer to Shopify help: Adding alt text to media (opens new window)
  • To display a custom image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window)
Custom image > Image > Connect dynamic source To display an image from a dynamic source, select the Connect dynamic source icon beside the Custom image selector, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window)
Position > Rotate Adjust the Rotate slider to rotate the section from -90deg to 90deg degrees.
Position > Enable rotation animation Select the checkbox Enable rotation animation turn on/ off an animation that rotates the section automatically.
Mobile > Show on mobile Select the checkbox Show on mobile to show/ hide the section on mobile display devices.
Color > Color Select the Color dropdown to set a color for the section’s background. Set the background color to the current color scheme’s Text, Accent, Card, Background, or Gradient color.
Color > Color scheme Use the Color scheme dropdown to set the section’s color scheme to Primary, Secondary, Tertiary or Quaternary. Refer to Colors.