Adding Custom CSS Styling

The landing page generated by Inveterate is not a Shopify page, therefore you're unable to modify the code directly. But since it still loads on the front-end within your theme you're able to add code to a shared layout file that will affect the page.

To add custom CSS to the landing page:

  1. Create a new file in the snippets/ folder. This file can be named whatever you'd like, we recommend using inveterate-styles.liquid

  2. In the file you created, add an HTML <style> tag

  3. Wrap the style tag in {% if request.path == '/community/membership' %} - this prevents the styles from leaking out to other pages

  4. Render the snippet in layout/theme.liquid anywhere within the <head> HTML element: {% render 'inveterate-styles' %}

  5. Then back in the snippet file you should be able to write any custom CSS for the landing page

A better view of steps 2 & 3 inside of inveterate-styles.liquid :

{% if request.path == '/community/membership' %}
  <style>
    // Add custom CSS here
  </style>
{% endif %}
PreviousAdding the Landing Page to Your StoreNextMessaging

Last updated