connect-telegram
Skip to main content
BurgerShop Help Center

Custom CSS

May 27, 2026
May 27, 2026

The Custom CSS setting lets you add your own CSS code to customize the appearance of your BurgerShop storefront beyond the default theme settings.

You can use Custom CSS to adjust spacing, hide specific elements, change text styles, customize product sections, or fine-tune the storefront layout for desktop and mobile.

Important
Custom CSS is recommended for advanced users or sellers who have support from a developer. Incorrect CSS may affect your storefront layout or make some elements display incorrectly

On this page

  • Access Custom CSS settings
  • Understand Custom CSS
  • Add CSS for desktop
  • Add CSS for mobile
  • Save and preview changes

Access Custom CSS settings

You can add custom CSS from the Theme Editor.

Steps:

  1. Log in to your BurgerShop admin.
  2. Go to Online store.
  3. Select Themes.
  4. Open the theme you want to edit.
  5. Click Customize.
  6. In the left sidebar, click General setting.
  7. Select Custom CSS.

From this section, you can add separate CSS code for Desktop and Mobile views.

Understand Custom CSS

Custom CSS controls how storefront elements look on your site.

For example, you can use CSS to:

  • Hide specific elements
  • Change font size
  • Adjust spacing
  • Customize button style
  • Change product card appearance
  • Update section background
  • Modify layout behavior
  • Improve mobile display

The Custom CSS section includes two code areas:

This allows you to customize desktop and mobile experiences separately.

Add CSS for desktop

Use the Desktop field to add CSS that should apply to desktop screens.

Steps:

  1. Go to General setting > Custom CSS.
  2. Find the Desktop code editor.
  3. Enter your CSS code.
  4. Review the storefront preview.
  5. Click Save.

Add CSS for mobile

Use the Mobile field to add CSS that should apply to mobile screens.

Steps:

  1. Go to General setting > Custom CSS.
  2. Find the Mobile code editor.
  3. Enter your CSS code.
  4. Switch to mobile preview.
  5. Review the storefront layout.
  6. Click Save

Tip
Always preview mobile changes carefully. Small layout changes can have a bigger impact on mobile screens.

Save and preview changes

After adding CSS, always check your storefront before publishing.

Steps:

  1. Add or update your CSS code.
  2. Click Save.
  3. Review the storefront preview.
  4. Switch between desktop and mobile preview.
  5. Test important pages, such as:
    • Homepage
    • Product detail page
    • Collection detail page
    • Cart page
    • Checkout page

If the layout looks incorrect, remove or adjust the CSS code and save again