There are three ways to customize the personalizations to match your own styling preferences:
Partial Customization
The easiest method is to partially adjust an existing personalization template using the CSS block under Additional Options.
Steps for Adjusting in CSS Block
- If you want to style a button to match the buttons on your own site, you can copy the CSS from your site and apply it to the classes we use for buttons.
- Select a button within the personalization, right-click to open the menu, and select Inspect.
- This will display all the styling currently in use on the right, which you can then copy.
- Repeat this process for the button in the Spotler Activate block to identify the classes we use. You’ll see an ID specific to the personalization, followed by the actual class.
- This ID changes whenever you modify the personalization. To address this, use the class a.sqzly.btn and include the {{cssPrefix}} variable to keep the ID consistent. Copy this entire code to the CSS block.
Partial Customization with Custom Classes
You can also incorporate website styling by adding classes used on your site. For example, a link labeled "Click here" is blue by default, but if links on your website are red due to an additional "link" class, adding this class to the link here will automatically apply your site’s CSS styling.
This template already includes HTML, making customization simple. If needed, you can always edit the template itself by clicking Edit template under the blocks in the personalization module. This allows you to add a class, but note that any changes here apply only to the current personalization.
It’s essential to test your custom styling live, as the font and CSS load directly from your site.
Example:
Custom: Full Control
You can also create a fully custom template when selecting a variant. This option starts with a blank template, so HTML knowledge is required. If you are interested in this approach, additional guidance can be provided.