Overview
This guide explains how to apply custom CSS directly to Growave App blocks within the Shopify Theme Editor. This allows for advanced styling, such as changing borders, shadows, or specific spacing, that goes beyond the standard options available in the Growave admin panel.
📘 Note
You can already customize the look of Rewards, Reviews, and Wishlist directly in the Growave admin. The Branding section allows you to change colors, fonts, icons, and button styles without needing code. We recommend using Custom CSS only if you need a design change not available in these standard settings.
Key benefits
Granular control: Adjust specific elements like padding, shadows, or border radius to match your theme perfectly.
No theme code editing: Apply changes safely within the editor without modifying your theme's liquid files.
Instant preview: See your CSS changes applied immediately in the Shopify Theme Editor preview.
How to apply Custom CSS
Step 1: Find the widget's class name
To apply styles, you first need to identify the specific CSS class of the Widget you want to change.
Open your store's page where the widget is visible in a web browser.
Right-click on the widget (e.g., the background of the reviews slider).
Select Inspect (or Inspect Element) from the browser menu.
In the code panel that appears, look for the line starting with
<div class=".....Copy the class name. It usually starts with a
gw-prefix (e.g.,gw-rv-product-mini-slider-widget).
✅ Tip
Hover over different lines in the code inspector to highlight different parts of the page. This helps ensure you have selected the main container of the widget.
Step 2: Add Custom CSS in Shopify
Once you have the class name, you can add your styles in Shopify.
In your Shopify Admin, navigate to Online Store > Themes.
Click Edit Theme next to your current theme.
Navigate to the page where the Growave widget is located (e.g., the Product Page).
In the left sidebar, click on the Growave App block (e.g., "Reviews Mini Slider") to open its settings.
Locate the Custom CSS text box.
Enter your CSS rules here. Do not wrap your code in
<style>or<script>tags.
Example: Modern card style
Here is an example code snippet to give the Reviews mini slider a clean, modern card style with a white background and soft shadow. Class used: .gw-rv-product-mini-slider-widget:
.gw-rv-product-mini-slider-widget {
background-color: #ffffff !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
padding: 16px !important;
color: #333333 !important;
}To ensure your styles take priority, add !important after each property value as shown in the example above.
Supported widgets
Currently, you can add Custom CSS via the Shopify Theme Editor for the following widgets:
Rewards: Earn points widget, Loyalty info widget, dedicated Rewards page widgets.
Wishlist: Add to Wishlist button.
If you have any questions or need further assistance, reach out to us at [email protected] or use the chat icon in the bottom-right corner of your Growave admin panel.