Why Use Custom CSS, JavaScript, and HTML in GemPages?
GemPages can support most customized styles without requiring 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 seeking to enhance their store’s design and functionality through custom code.
- CSS (Cascading Style Sheets) controls the layout, appearance, and design elements of your page. Think fonts, colors, margins, and positioning.
- JavaScript adds interactivity, such as 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 and 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.
Step 3: After inserting your custom CSS, JavaScript, or HTML:
- Click Save.
- Use the Preview mode in GemPages to check how your design looks across devices.
Best Practices for Custom Code in GemPages
- Keep your CSS and JavaScript clean and organized.
- Test your custom code across devices for responsive design.
- Avoid excessive custom scripts to maintain fast page speed.
- Always back up your work before applying major code changes.
Thank you for your comments