Advanced Styling Guide for InMail Shop | Email Pulse Help Center

Available CSS Selectors

Product Card Container

.epulse-item

The main container for each product card
Default padding: 10px
Default font-size: 16px
Default text-align: center

Example:

.epulse-item {   
  padding: 20px;   
  background-color: #f9f9f9;   
  border-radius: 12px; 
}

Product Image

.epulse-item-img-wrap

Container wrapping the product image
Controls image alignment

.epulse-item-img

The product image itself
Default width: 100%

Example:

.epulse-item-img {   
  border-radius: 8px;   
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}

Product Title

.epulse-item-title

The product name/title text
Automatically truncates based on line count settings

Example:

.epulse-item-title {   
  color: #333;   
  font-weight: 600;   
  font-family: 'Arial', sans-serif; 
}

Product Attributes

.epulse-item-attrs-wrap

Container for product attributes (price, compare price, etc.)
Default margin-top: 5px

Example:

.epulse-item-attrs-wrap {   
  margin-top: 10px;   
  padding: 8px 0; 
}

Pricing

.epulse-item-price

The current/sale price
Default display: inline

.epulse-item-compare-price

The original price (shown with strikethrough)
Default display: inline with text-decoration: line-through

Example:

.epulse-item-price {   
  color: #e63946;   
  font-size: 1.2em;   
  font-weight: bold; 
}  

.epulse-item-compare-price {   
  color: #999;   
  font-size: 0.9em; 
}

Call-to-Action Button

.epulse-item-cta-btn-wrap

Container for the CTA button

.epulse-item-cta-btn

The call-to-action button itself
Default background: #00d (blue)
Default color: #fff (white)
Default border-radius: 8px

Example:

.epulse-item-cta-btn {   
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);   
  border-radius: 25px;   
  font-weight: 600;   
  transition: transform 0.2s; 
}

Section Heading

.epulse-heading

The main heading above your product cards
Default font-size: 24px
Default letter-spacing: 3px

Example:

.epulse-heading {   
  font-size: 32px;   
  color: #2d3748;   
  font-family: 'Georgia', serif;   
  letter-spacing: 2px;   
  margin-bottom: 20px; 
}

Quick Styling Examples

Minimalist Card

.epulse-item {   
  padding: 15px;   
  background: white;   
  border: 1px solid #e0e0e0; 
}  

.epulse-item-cta-btn {   
  background: black;   
  border-radius: 0;   
  text-transform: uppercase;   
  font-size: 0.85em;   
  letter-spacing: 1px; 
}

Vibrant Card

.epulse-item {   
  padding: 20px;   
  background: linear-gradient(to bottom, #fff 0%, #f8f9fa 100%);   
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);   
  border-radius: 16px; 
}  

.epulse-item-price {   
  color: #ff6b6b;   
  font-size: 1.4em;   
  font-weight: bold; 
}  

.epulse-item-cta-btn {   
  background: #ff6b6b;   
  border-radius: 30px; 
}

Professional Card

.epulse-item {   
  padding: 24px;   
  background: white;   
  border: 2px solid #f0f0f0;   
  transition: border-color 0.3s; 
}   

.epulse-item-title {   
  color: #1a1a1a;   
  font-weight: 500; 
}  

.epulse-item-cta-btn {   
  background: #007bff;   
  border-radius: 6px; 
}

Matching Your Brand Fonts

You can use custom web fonts in your product cards to match your brand's typography. Add font imports at the top of your custom CSS using either @import or @font-face.

Using Google Fonts

@import 'https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400&display=swap';  

.epulse-item {   
  font-family: 'Epilogue', sans-serif; 
}  

.epulse-heading {   
  font-family: 'Epilogue', sans-serif; 
}

Matching Klaviyo Template Fonts

If you're using Klaviyo and want your product cards to match your email templates exactly:

Step 1: Find the Font Import

Open a Klaviyo template preview
Right-click and select "Inspect" or "Inspect Element"
In the developer tools, look in the <head> section for an @import line that looks like:

https://static-forms.klaviyo.com/fonts/api/v1/{account_id}/custom_fonts.css

Step 2: Get the Specific Font Declarations

Copy that URL and open it in a new browser tab
You'll see multiple @import or @font-face declarations for your Klaviyo fonts
Copy the specific font declarations you need (usually 2-4 lines)

Step 3: Add to Your Custom CSS Paste the copied font declarations at the top of your Advanced Styling section:

@import 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400&display=swap'; 
@import 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700&display=swap';  

.epulse-item {   
  font-family: 'Poppins', sans-serif; 
}  

.epulse-heading {   
  font-family: 'Poppins', sans-serif;   font-weight: 700; 
}

Why copy individual declarations? Copying the specific @import or @font-face lines instead of importing the entire custom_fonts.css file ensures fonts load faster and more reliably by eliminating extra network requests.

Font Declaration Methods

Using @import (simpler):

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap';

Using @font-face (more control):

@font-face {   
  font-family: 'Custom-Font';   
  src: url('https://your-cdn.com/fonts/custom-font.woff2') format('woff2');   
  font-weight: 400;   
  font-display: swap; 
}

Tips

Use em units for sizing relative to the base font-size
Test your styles across different screen sizes
Keep accessibility in mind with sufficient color contrast
Always include fallback fonts (e.g., 'CustomFont', sans-serif)