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.
Selector | Description |
---|---|
trynow-cta-button | Container for the TryNow Button. |
#trynow-cta-button | The <button> inside the container. |
#trynow-cta-description | Description below the button. Usually text information regarding the trial period. |
#trynow-cta-powered-by | Container for the Power by TryNow text. |
#tn-cta-info-icon | Learn more / info icon below the CTA button. |
Updated 2 months ago