The Custom CSS option allows you to apply your own CSS code to your customer-facing Menu page.
This is an advanced feature, so to use it effectively, you or someone on your team should be familiar with how HTML and CSS work. Otherwise, identifying elements and applying styles may be difficult.
You can find this option by going to the Settings page, Menu tab, scrolling to the bottom, and locating the Custom CSS field.
How it works
To find the elements you want to style, visit your store as a customer (either by logging out of your Admin dashboard or opening an incognito window and visiting your store there), inspect the page in your browser, and identify the classes, IDs, or other selectors of the elements you want to target. Once you have that information, paste your CSS code into the Custom CSS field.
After saving your changes, refresh your store page and review the result.
Example
Let’s say we want to change the color of the CONTINUE TO CHECKOUT button on the Menu.
After inspecting it, we see we can use the following selector: button.btn.continue-btn.storeBgColor.btn-secondary. We then target that element and change its background color.
In this case, we are changing it to an orange color. We are also adding !important to make sure the style is not overridden.
Under Custom CSS we add:
We refresh the site, and see how the CONTINUE TO CHECKOUT button changed.
This is only an example. The exact selector you need will depend on the specific element you want to style.
Important notes
This feature gives you full flexibility over the appearance of your Menu page, but any changes made through custom CSS are outside of GoPrep’s control. Because of this, we are not responsible for errors, layout issues, or broken styling caused by custom CSS added to your store.
You are also responsible for making sure your CSS works correctly across desktop and mobile devices. In some cases, you may need to add additional CSS rules depending on the changes you want to make.
We recommend testing your changes carefully before leaving them in place on your store.
Don't hesitate to contact GoPrep's Customer Support Team for further assistance.
You can do so by submitting a request or sending an email to help@goprep.com.
Comments
0 comments
Please sign in to leave a comment.