GemPages can support most customized styles without the need for coding. However, for specific design requirements that need to be tailored, you can use custom code. This guide is intended for developers, freelancers, or agencies looking to improve their store’s design and functionality with custom code.
About Custom CSS and JavaScript
- CSS (Cascading Style Sheets) controls the layout, appearance, and design elements of your page. Think fonts, colors, margins, and positioning.
- JavaScript adds interactivity—animations, hover effects, dynamic content updates, and more.
Each element in GemPages is assigned a default CSS class name, making it simple to target and customize specific elements.
To locate the CSS class name of an element, simply select the element, right-click, and choose Custom Code.
How to Customize Element Styles with Custom CSS & Javascript?
Step 1: Right-click on the element you want to modify. From the context menu, select Custom Code.
This opens the panel where you can insert your custom code.
Step 2: Once in the Custom Code panel, you’ll see two tabs: CSS and JavaScript.
Select the CSS tab if you’re focusing on styling, or the JavaScript tab for adding interactivity.
Note: In the selected tab, you can either write your code directly or paste it from another source.
