How to Edit Shopify CSS

Shopify stores don’t require much technical knowledge to manage. In fact, you don’t need to know any code at all in order to launch and run one, which is great for the vast majority of us that have absolutely no coding skills.

But what happens if you want to edit Shopify CSS to change something small, like banner dimensions or the color of a small element? Do you really need to be a Shopify whizz to make these changes?

This guide will explain how to edit your Shopify theme files so that you can make small adjustments to things like text styling and element colors, so you can get the most out of your Shopify site without always having to rely on a developer.

How to Open and Edit Your Shopify Theme Files

To open and edit a Shopify theme file, follow these simple step-by-step instructions:

1. Log in to your Shopify admin panel: Open a web browser and go to your Shopify store’s URL (e.g., yourstorename.myshopify.com/admin). Enter your login credentials (email and password) and click “Log In.”
2. Navigate to the “Online Store” section: Once logged in, you’ll be in the Shopify admin dashboard. From the left-hand sidebar, click on “Online Store.” This will open a drop-down menu with additional options.
3. Access the “Themes” section: In the “Online Store” section, click on “Themes.” You’ll be taken to the “Themes” page, where you can manage your store’s themes.
4. Choose the theme to edit: On the “Themes” page, you’ll see your current active theme listed. To edit it, click on the “Actions” button (represented by three dots) beside the theme and select “Edit Code” from the drop-down menu.
5. Familiarize yourself with the theme files: In the theme editor, you’ll see a list of files on the left-hand side. These files represent different sections and components of your Shopify theme. The primary file you’ll likely edit is the “theme.liquid” file, which controls the overall structure and layout of your store.
6. Edit the theme file: Locate and click on the file you wish to edit (e.g., “theme.liquid”). The contents of the file will appear on the right-hand side of the editor. You can make modifications to the code here, such as adding HTML, CSS, or JavaScript.
7. Save your changes: After making the necessary edits, click on the “Save” button located at the top right corner of the editor. This will save your changes to the theme file.
8. Preview and test your changes: To see how your modifications look on your live store, click on the “Preview” button. A new window or tab will open, displaying your store with the applied changes. Ensure everything appears as intended and functions correctly.
9. Publish your changes: If you are satisfied with the changes and want to make them live on your store, click on the “Publish” button. This will update the active theme with your modifications.

Remember to exercise caution while editing theme files and keep a backup of your original theme files in case you need to revert any changes.

The important thing to note here is that you always want to have an idea in mind as to what you want to adjust before actually going in to edit the theme. On a live environment, you don’t want to experiment or add code just for the sake of testing.

So what exactly can you do with this knowledge? Now that you know how to get into the theme code, I will explain how to edit Shopify CSS so you can style certain elements the way you want.

How to Style Shopify Buttons Using CSS

To change a plain “Add to Cart” button into a rounded button with a blue to purple gradient and a transparency effect on hover using CSS, these simple CSS changes will do the trick:

Identify the class or ID of the “Add to Cart” button: Inspect the HTML code of your button element using your browser’s developer tools. Look for the class or ID attribute that identifies the button. For example, let’s assume the class is “add-to-cart-button”.

Define the CSS styles for the button:

.add-to-cart-button {

border-radius: 25px;
background: linear-gradient(to right, blue, purple);
transition: background 0.3s ease-in-out;
}

.add-to-cart-button:hover {

opacity: 0.8;
}

Apply the CSS styles to the “Add to Cart” button: In your theme’s “theme.liquid” file or any relevant CSS file, add the above CSS code targeting the class or ID of your button. For example:<button class=“add-to-cart-button“>Add to Cart</button>

Save the changes and preview: Save the modified CSS file and refresh your store’s page. You should now see the “Add to Cart” button with the rounded shape, blue to purple gradient, and a transparency effect when hovered.

Feel free to adjust the CSS properties such as border radius, colors, and transition duration to fit your desired brand style.

How to Resize Your Shopify Homepage Banner Using CSS

Homepage banners are one of the single most important pieces of real estate on your whole eCommerce store. Being able to adjust them to your needs is an important part of making your online store as responsive as possible for your visitors.

Here’s a simple guide on how to resize your banner using CSS:

Open the CSS of your theme as before, and search for the CSS selector that targets the homepage banner. This selector will vary depending on the specific theme you’re using. Common selectors might include .banner, .hero, or .homepage-banner.

Once you find the selector, add the following CSS code to resize the banner the way you want:

.banner {

width: desired-width;
height: desired-height;

}

Replace desired-width and desired-height with the specific dimensions you want for your banner. You can use values like pixels (px), percentages (%), or any other valid CSS unit.

Save the changes to the file.

Go back to your Shopify admin panel and preview your website to see the updated banner size. If it looks as expected, publish the changes.

How to Change Your Navigation Font in Shopify

Let’s say you wanted to change the font in your main navigation without it changing the way your font looks anywhere else on your website. Maybe you want it to match your logo’s font, but would rather not convert the font elsewhere on the website or in any other navigation areas.

Inside the file, search for the CSS selector that targets the navigation menu. This selector will vary depending on the specific theme you’re using. Common selectors might include .site-nav, .main-navigation, or .nav-menu.

Once you find the selector, add the following CSS code to change the font.

.navigation-selector {

font-family: desired-font, sans-serif;

}

Replace .navigation-selector with the actual CSS selector you found in the previous step. Replace desired-font with the name of the desired font you want to use.

You can use web-safe fonts or include custom fonts using the @font-face rule. The sans-serif part is a fallback font that will be used if the desired font isn’t available.

Save the changes to the file and check to see if it looks the way you want.

Want a Full Re-Design or Added Functionality?

Once you get a gist for finding which CSS selectors belong to which elements on your Shopify pages, it’s fairly easy to make small tweaks to the CSS in order to style the website how you like.

This is a great approach if you are comfortable working in the theme files and want to make small changes, but what if you are looking for a larger redesign or non-native functionality?

When it comes to making any significant changes on your Shopify store, you’re likely going to need the help of an experienced Shopify web developer.

Custom coding in order to develop a unique-looking page or special functionality is an in-depth process that can’t be handled by CSS tweaks alone.

You also want to make sure that any functionality you add mirrors the design of your Shopify website. If either one or the other is implemented without its counterpart, the whole experience will appear unpolished and may not look or function how your customers expect.

Is it worth making aesthetic and functionality changes to your Shopify store?

This is a question that many merchants wrestle with, but one good indication that your store is in need of some design or development help is if there is a high bounce rate. If traffic is coming to your site but isn’t converting for one reason or another, this is also a sign.

There can be several reasons for this. Your Shopify store might not be mobile friendly enough, which may require a responsive design overhaul. Perhaps it doesn’t speak strongly to your target audience and needs to be changed strictly from a design standpoint. This would require a branding update.

Either way, these are much more intensive projects than just changing out some CSS, so if you are looking to make a significant change on your Shopify website, you may want to get in touch with us first so we can guide you to the right choice!