App block customization

For standard Shopify theme

EQL App Blocks offer built-in customization options that can be easily adjusted directly in the Theme Editor.

To customize your app block:

• Open the Theme Editor from your Shopify Admin
• Navigate to the template that includes the EQL app block
• Click on the EQL App Block in the preview
• A side panel will appear with options to adjust:
  • Base fonts
  • Colors
  • Spacing
  • Layout
• Make your desired changes, then click “Save”

💡 Changes will apply to all launches using that app block.

App block standard customization options

---

For custom theme (with development agencies or in-house developers)

If your theme is custom built and you prefer to override some of the CSS styling on EQL app blocks, you can refer to the class names table below.

Class Name	Description
eql-link	Styles anchor tags or text links used within the EQL app block
eql-text	Base text style for general content
eql-header1	Primary heading style (e.g. launch title)
eql-header2	Secondary heading style (e.g. section titles)
eql-countdown	Container for the launch countdown timer
eql-countdown-header	Styling for the countdown title or label
eql-countdown-body	Styling for the numeric countdown display (e.g. time remaining)
eql-countdown-footer	Styling for additional info or subtext below the countdown
eql-button	Primary call-to-action button (e.g. “Enter Draw”)
eql-secondary-button	Secondary button style (e.g. “Cancel” or “Back”)
eql-text-field	Wrapper element for grouped input fields
eql-text-field-header	Optional header above a group of input fields
eql-text-field-label	Label text for an input field
eql-text-field-input	Styles the input field itself (e.g. text, email, code entry)
eql-text-field-helper-text	Helper or hint text below an input field
eql-text-field-error-text	Styling for error messages or validation feedback under the input

Follow these steps to safely apply custom styling to the EQL Launches app block using your theme's CSS:

1. Go to your Shopify Admin → Online Store → Themes → Edit Code
2. Create a new CSS file
   • In the “assets” folder, click “Add a new asset”
   • Select CSS, and name the file: eql-app-block.css
3. Add your custom styles
   • Use the class names provided in our class reference table above.
   • Apply your styling as needed
   • Save the file
4. Link the CSS file in your theme
   • Open theme.liquid (under Layout folder)
   • Just before the closing </head> tag, paste the following line:

   {{ 'eql-app-block.css' | asset_url | stylesheet_tag }}

5. Save your changes
6. Preview your custom styling
   • Open the Theme Editor and navigate to a page with the EQL app block
   • Confirm your styles are applied as expected

💡 Keep your overrides focused on layout and branding — avoid overriding logic-related behavior and EQL branding blocks, as this may impact launch functionality.