Styling

Changing the appearance of the TryNow Button

Button Classes

Like the form, the TryNow Button will attempt to match styles automatically. Additional adjustments may be necessary by providing custom CSS to the button. Attach new class names to the TryNow Button in the provided setting box in the Shopify Theme Customizer.

Add classes without any extra syntax and separated by spaces. For example to add the classes foo and bar directly to the button, input foo bar

CSS Selectors

You can also input CSS rules to target the TryNow button in the Custom CSS input setting.

These are the selectors to target the elements related to the TryNow button.

SelectorDescription
trynow-cta-buttonContainer for the TryNow Button.
#trynow-cta-buttonThe <button> inside the container.
#trynow-cta-descriptionDescription below the button. Usually text information regarding the trial period.
#trynow-cta-powered-byContainer for the Power by TryNow text.
#tn-cta-info-iconLearn more / info icon below the CTA button.