Flash Sale:75% Off Hosting + Free DomainEnds in13h47m14sView Plans
Hostvento logoHostvento
Get Started

How to enable a theme for your Magento mobile site

This guide shows you how to apply a mobile-friendly theme in Magento so your store looks good on phones.

How-To Guides2 min read15 steps

What is a theme?

A theme is the look of your store. It controls colours, fonts and layout. Most modern Magento themes are responsive. That means the page changes its shape to fit small screens, such as phones.

Menu names differ between versions. These steps follow Magento 2. Look for similar names in other versions.

Before you start

Take a backup of your store files and database. Changing themes can alter how your store looks and works.

Step 1: Install the theme

  1. Download a theme from a trusted source. Choose one that says it is responsive or mobile-friendly.
  2. Follow the install instructions from the theme maker. Many themes are copied into the app/design folder or installed with Composer, a tool that downloads software packages.
  3. After installing, clear the cache. Go to System, then Cache Management, and click Flush Magento Cache.

If you are not comfortable with files and commands, ask a developer or open a support ticket to find out what Hostvento can help with.

Step 2: Apply the theme

  1. Log in to your Magento admin panel.
  2. Click Content.
  3. Under Design, click Configuration.
  4. You see a list of scopes: Global, Website and Store View. Find the row for your store view and click Edit.
  5. Open HTML Head and other sections to check your settings, if needed.
  6. Find the Applied Theme drop-down.
  7. Choose your new theme.
  8. Click Save Configuration.
  9. Flush the cache again.

Step 3: Test on a phone

  1. Open your store on a real phone.
  2. Check the menu, product pages and checkout.
  3. On a computer, you can press F12 in your browser and click the phone icon to preview small screens.

If your store has a separate mobile address

Some older stores used a different theme for mobile visitors. In that setup you create a store view for the mobile address and apply the theme to that store view. Today a single responsive theme is simpler and better for search engines.

Tip: Try new themes on a test copy of your store first. This protects your live shop from mistakes.

Quick recap

  • Pick a responsive theme.
  • Back up before you change anything.
  • Apply the theme under Content, Design, Configuration.
  • Flush the cache and test on a real phone.