How to Use Custom CSS on Your Menu Page

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 [e-mail].