Call to action section

This section was introduced in version 2.2

The “Call to Action” section can be a vital part of your store and is designed to engage customers and prompt an immediate response from them. It can play a key role in driving conversions and achieving your e-commerce business goals.

Section settings

Background and media

Background Image: Upload a background image to enhance the visual appeal of your call to action.

Self hosted background video: If you want to use a video background (self hosted), upload a video in this setting.

External URL: Alternatively, if the video you wish to set as the background is hosted on YouTube or Vimeo, enter its URL here.

Overlay background: Add a gradient overlay to your background image to enhance readability and aesthetic appeal.

Video description: Describe the video to make it accessible for customers using screen readers.

Content

Heading and Description: Craft a compelling message with customizable heading and description fields. Use this space to clearly communicate what you’re offering and why visitors should take action.

Heading size: Adjust the size of your heading to make your message stand out.

Text size: Adjust the size of the main text.

Button label and Link: Customize your call to action button with a specific label and link it to any part of your store, such as a product page, a contact form, or another desired location.

Layout

Make section fullwidth: Choose to extend the section to the full width of the viewer’s screen for a bold, immersive look.

Height (in pixels): Specify the height of the section in pixels to ensure it fits seamlessly into your store’s design.

Content position: Determine where the content will be positioned within the section.

Content alignment: Determine where the content will be aligned within the card (left, center, right).

Content width: Adjust the width of your content within the section to optimize readability and visual balance. Only applies on desktop. The maximum width (in percentage) of the call to action’s content (heading and description).

Mobile layout

Height: Adjust the height of the section for mobile devices.

Background image: Optional secondary image to be displayed only on smaller screen sizes.

Heading size: The section’s heading size in mobile devices.

Content position: Set the section’s content position for mobile devices.

Colors

Content color scheme: Applies on the content cards. Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Hide section if…: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if the most important field(s) are empty, i.e. when there is no meaningful output.