Customizing Widgets & App Blocks with CSS

The XGEN Shopify App gives you multiple ways to visually customize the product cards and widget elements on your storefront. While our WYSIWYG tools allow for basic styling, advanced users may wish to apply custom CSS for more control.

There are two supported locations to apply custom CSS styles:

Widget Custom CSS Panel (Shopify App)

You can add CSS directly within the Widget Customization panel, available in the XGEN App interface.

Steps to add CSS to your widget:

1. Open the XGEN Shopify App.

2. Navigate to the Widgets section and select the widget you want to customize

3. Scroll to the Global Custom CSS area at the bottom of the side panel

4. Add your custom CSS rules

5. Inspect the element you want to modify. Note: In the preview, class names do not use the xgen- prefix.

6. Click on the App Block container and click  “Custom CSS” input:

.product-card .custom-badge {
  background-color: #f5f5f5;
  color: #333;
  padding: 4px 8px;
  font-weight: bold;
}

7. Save the file and preview your store..

Best for: Styling specific widgets without editing theme code.

Limitation: Scoped only to that widget. Global styles or complex selectors may not apply consistently.

Shopify Theme App Block

If you're using XGen App Blocks in your Shopify theme, you can inject CSS within the app block’s configuration. However, due to the scoped nature of Shopify's app blocks, some styles may not apply as expected.

To ensure full control, we recommend adding your custom styles via your theme’s main stylesheet.

Steps to add CSS in your Shopify theme:

1. Open you Shopify Theme Editor by clicking “Customize” on your chose theme

2. Select the Product Page or Collection Page that holds your App Block

3. Use your browser’s "Inspect Element" tool to locate the class name of the element you'd like to modify. For example, .xgen-recommendation-heading.

4. Copy the full class name and apply your CSS like this:

   .xgen-recommendation-heading {
     font-size: 60px;
   }

5. Save the file and preview your store.

There is a character count limitation of 500 within the App Block CSS input field imposed by Shopify. For more details on editing theme CSS in Shopify, refer to this Shopify Help Article.

Always inspect elements from the correct context (App Block on storefront vs. theme preview) to determine the appropriate class name and prefix usage. Do not use the xgen- prefix when adjusting class styles in the Widget Custom CSS section, only use that prefix when adjusting styles in the App Block within your theme.

For additional assistance, reach out to your XGEN account manager or support team.

Customizing Fonts

To add custom fonts to your XGEN Shopify App, you'll need to upload the font files, typically in WOFF or WOFF2 format, to your theme's assets and then reference them in your theme's CSS.

Steps to Customize Your Fonts

Download and Prepare Your Font

1. Obtain Font Files: Acquire the font files you want to use. Common formats for web use are WOFF, WOFF2, TTF, and OTF.

2. Convert to Web Formats: If your font isn't already in a web-friendly format like WOFF or WOFF2, you can convert it using an online converter.

Upload Font Files to Shopify

1. Access Theme Editor: Go to your Shopify admin, then Online Store > Themes > Actions > Edit code.

2. Navigate to Assets: In the code editor, find the "Assets" folder in the sidebar.

3. Add New Asset: Click on "Add a new asset" and upload your font files (WOFF, WOFF2, etc.).

Reference the Font in Your CSS

1. Locate theme.scss.liquid (or similar): Find your theme's main CSS file (e.g., theme.scss.liquid, base.css, or style.css).

2. Add @font-face rule: Add the following code at the top or bottom of the file, making sure to replace the placeholders with your actual font file source and desired font family name:

@font-face {
  font-family: 'YourFontName';
  src: url('{{ "your-font-file.woff2" | asset_url }}') format('woff2'),
       url('{{ "your-font-file.woff" | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
}

3. Add that font family: scroll to your body in the same CSS file and add font-family: “YourFontName”;

4. Apply the Font: Use the font-family property in your CSS to apply the custom font to the desired elements:

body {

  font-family: 'YourFontName', sans-serif; /* Fallback to a system font */

}

5. Save Changes: Click "Save" to apply the changes to your theme.

Troubleshooting CSS Application