Resize your Shopify logo for mobile devices with custom code

Table of Contents

1. Introduction
2. The Issue with Logo Size on Mobile
3. Why Custom Code is Preferred over Apps
4. Resizing the Logo on Shopify Store
   1. Accessing Shopify Dashboard
   2. Editing Code
   3. Finding the CSS Files
   4. Opening base.css or team.css
   5. Adding Custom Code for Resizing
   6. Saving the Changes
5. Testing the Resized Logo
6. Conclusion
7. FAQs

Introduction

Welcome back to the John Hop Channel, where we provide you with helpful tips and tutorials for your Shopify store. In this video, we will address an issue that many users have been facing - resizing the logo on the mobile version of your Shopify store. We will guide you through the process of resizing the logo using custom code, ensuring that the changes only apply to the mobile version while keeping the desktop version intact.

The Issue with Logo Size on Mobile

Recently, many users have experienced a problem with the logo size on the mobile version of their Shopify stores. Despite setting a specific size for the logo using the theme customizer, the logo appears either too big or too small on mobile devices. This discrepancy between the desktop and mobile versions can be frustrating and affects the overall visual appeal of the store.

Why Custom Code is Preferred over Apps

Before we dive into the solution, let's discuss why we prefer using custom code instead of relying on Shopify apps. While apps offer convenience, having too many apps installed can drastically impact the loading speed of your store. Slow loading times can result in a decrease in conversion rates, which is undesirable for any e-commerce business. By using custom liquid code, we avoid overloading the store with unnecessary apps and ensure optimal performance.

Resizing the Logo on Shopify Store

To resize the logo specifically on the mobile version of your Shopify store, follow these steps:

1. Accessing Shopify Dashboard

First, log in to your Shopify account and navigate to the Shopify dashboard. From the left-hand menu, select "Online Store."

2. Editing Code

Next, click on the three dots next to "Customize" and choose "Edit code." This will open the code editor for your Shopify theme.

3. Finding the CSS Files

Scroll down to the bottom of the page and locate the "assets" folder. Inside this folder, you will find various CSS and GS5 files. Look for either "base.css" or "team.css," depending on your theme. Click on the file to open it.

4. Opening base.css or team.css

Once you have opened the CSS file, you will see a range of CSS code. Scroll down to the bottom and create a new line.

5. Adding Custom Code for Resizing

In this new line, paste the following code:

.logo-class {
    font-size: 50px; /* Adjust the number to resize the logo */
}

Replace .logo-class with the appropriate class or ID that applies to your logo element. You can then adjust the font-size value to increase or decrease the size of the logo. Experiment with different values until you achieve the desired result.

6. Saving the Changes

Once you have added the custom code, click on the "Save" button to save the changes you made to the CSS file.

Testing the Resized Logo

To ensure that the logo has been successfully resized on the mobile version, go back to your Shopify store and reload the page on your mobile device. You will now see the new resized logo, which should match the dimensions you specified in the custom code. If you switch back to the desktop version, the logo will remain in its original size.

Conclusion

Resizing the logo on your Shopify store's mobile version is a common issue that can be easily resolved by using custom code. By following the steps outlined in this tutorial, you can ensure that the logo size is consistent across different devices, enhancing the overall user experience.

FAQs

Q: Can I resize the logo on the desktop version as well?

A: The method described in this tutorial only applies to resizing the logo on the mobile version. If you also want to resize the logo on the desktop version, you will need to modify the CSS code accordingly.

Q: Which file should I edit if my theme uses team.css instead of base.css?

A: If your theme uses team.css instead of base.css, follow the same steps outlined in this tutorial, but open the team.css file instead.

Q: Will resizing the logo using custom code affect the loading speed of my Shopify store?

A: No, resizing the logo using custom code will not impact the loading speed of your Shopify store. Unlike installing multiple apps, which can slow down the website, custom code is lightweight and efficient.

Q: Can I revert back to the original logo size if I'm not satisfied with the changes?

A: Yes, you can simply remove the custom code from the CSS file to revert back to the original logo size.