If you’re a programmer, freelancer, developer, or agency looking to customize the style of specific elements on your GemPages designs, adding extra CSS classes is an effective solution.
About CSS Class
A CSS (Cascading Style Sheets) class is a rule defined in your website’s stylesheet that allows you to apply styles to elements.
By assigning a CSS class to an element, you can control its appearance, such as its size, color, spacing, and other visual properties.
In cases where you need advanced customization beyond the default settings in GemPages, you can write your own CSS code to style elements according to your preferences.
Best Practices & Limitations When Using Custom CSS with GemPages
Adding custom CSS gives you more styling freedom, but it’s recommended to scope classes clearly to avoid theme conflicts and unexpected overrides.
- Avoid applying CSS rules globally unless necessary.
- Use class-level targeting instead of targeting IDs or generic tags.
- Don’t duplicate styling that GemPages already provides with built-in controls.
- Test mobile and tablet layouts before publishing.
- Keep CSS modular and reusable (e.g., using utility-style class naming).
This ensures your custom code stays maintainable and won’t break when you update the theme, version, or layout.
How to Add a Custom CSS Class to an Element?
Unlike adding CSS directly inside Shopify Theme Customize, adding custom classes in GemPages allows styling specific blocks or components without affecting the entire store.
Follow these steps to add a custom CSS Class to a GemPages element.
Step 1: Click on the element you want to customize. This will open the element’s settings in the left sidebar.
Step 2: In the settings menu on the left sidebar, locate and click on the Advanced tab.
Scroll down to find the CSS class field.
Step 3: In the CSS class field, type the name of the CSS class you want to add.
Example:
If your CSS includes:
.red-text { color: red; }
.bold-text { font-weight: bold; }
Entering red-text bold-text in the CSS Class field will apply both red color and bold text to the element.
For further customization options, explore this article.
FAQs about CSS Class
1. Can I apply my custom CSS from GemPages to the entire site?
No, CSS applied in GemPages only affects elements rendered by GemPages pages. If you need global CSS across the entire store, add CSS at Shopify theme level.
2. Will custom CSS impact performance?
Large custom CSS or loading many fonts can affect performance. Stick with minimal rules and reuse classes to avoid unnecessary file weight.
3. Can I combine GemPages custom CSS with theme-level custom CSS?
Yes, but avoid overlapping selectors to prevent conflicts. Keep GemPages classes scoped per component/page when possible.
Thank you for your comments