​There is a limited set of options for styling the components on the screen.

Most of the styling is inherited from the Shopify Theme. However, there are times when you need to tweak the settings of a button; change the size or weight of a text, or change the spacing between items on the page. This is possible by using CSS Overrides.

CSS stands for Cascading Style-Sheets. It means that styles are inherited from more generalised styles that ‘cascade’ down the specification unless they are overridden. It uses ‘classes’ attached to parts of the HTML page elements to indicate which parts of the Style-Sheet are applicable to that element.

Your Shopify Theme uses CSS to style all of the parts of the page to match and complement other parts of the Theme. You can override the styles attached to items on the page as long as you add more specific styles to those parts of the page you want to adjust.

The key information you need to know is:

​

The bottom of the window will be replaced with HTML code on the left and CSS on the right. The HTML corresponding to the paragraph text you clicked on (<p>…</p>) is highlighted by a grey bar.

​

​

The CSS section of this page shows the CSS styles that are being applied to the currently selected element. In this case, this is the paragraph that you right-clicked on.
​

​
The structure of a CSS ruleset is the following:

The list of rulesets on the right-hand side of the page is ordered with the high-priorities at the top. Attributes override those further down following the CSS and following the Specificity, Inheritance and Cascade rules. The more specific (i.e. more items in) the selector, the higher the priority. If there is a draw (i.e. the selectors are the same), then the last one encountered wins.

There is also the ‘!important’ tag that allows us a ‘trump card’ which wins against normal specificity.

This list allows you to see the current selectors in the Theme that are affecting the paragraphs.

Let’s look at a specific example. Let’s say we want to change the colour of the START button in the app screen.

4. Right-click on the START button and select Inspect again.
​ ​

You see that the <button… > element is selected in the left-hand side:

​
The related CSS is highlighted on the right-hand side:

The active selectors are shown in black (‘.Esc-returns-form button’) and those that are not active are shown in grey (‘.Esc-returns-form label’ and ‘.Esc-returns-form input’).

We need to work out what attributes we need to change.

We can test changes live on the page by adding CSS attributes into the ‘element.style {}’ block at the top. This adds a style attribute directly to that specific item on the page. It only lasts until the page is reloaded. It is not permanent but it allows us to test and play with attributes.

Looking further down the list of CSS, you see a ‘background-color: #557b97’ declaration under the ‘.btn’ selector block. This is what we need to override.

5. Click on the ‘element.style {}’ block at the top of the list:

​
​

You get a flashing cursor and a ‘:’ (colon symbol). Type the attribute that you want to affect. In this case, background-color. It will provide auto-complete options as you type so that you know what is available.
​

​

6. Press the TAB key on your keyboard to move over to the value part of the declaration. This is where we will enter the new colour. In a pop up window, a list of colours will be displayed. Type red and click ENTER.

You now see a red START button instead, and a small colour-square next to it.

​

7. Click on the colour square to pop-up a colour selector and either enter a #nnnnnn colour from your theme, or pick a colour.

In order to know what to add to our style-sheet (‘ background-color: red’), we need to work out what selector we need to use.

At the bottom of the screen there is a list showing the nesting of the elements containing our button:

​

Reading from right to left, this shows that the ‘button’ element has classes (shown by the initial ‘.’ character) of ‘btn’, ‘btn-block’ and ‘btn-primary’, and that the button is immediately inside a ‘form’ element with the class ‘Esc-returns-form’. The class is inside a ‘div’ element with the class ‘mb20’, which is inside another ‘div’ with the class ‘Esc-returns-container’… and so on – out to the ‘html’ tag that contains the whole page.

The ‘div’ with the class ‘Esc-returns-container’ is the element that holds ALL the app contents. Everything outside that div there is nothing to do with the app. So we need to ensure that we don’t affect any elements outside that.

We need to override the selector that’s active for whichever attribute we need to change.

Selectors are made up of ‘words’ that are used to match the HTML elements in the page. It can include the tag, an id, one or more classes, etc. In this case we will keep it to classes and tags.

The selector is a description of which nested tags are relevant for this CSS. Each ‘word’ in the selector is an optional HTML tag (e.g. p, div, table, span) followed by one or more classes preceded by ‘.’

​

Let’s take the css selector (note the space between the two parts):

div.outer .inner.extra {}

This matches a div tag with the class ‘outer’ and (due to the space) then anything inside that div (no matter how deeply nested) is with the classes ’inner’ and ‘extra’. So the HTML below explains what matches:

<div class=”outer”>

<p class=”inner extra”>This matches</p>

<p> This doesn’t – no .inner and .extra </p>

<p>

<span class=”inner”>Nope – no .extra class</p>

<span class=”inner extra”>This does too – even nested</span>

</p>

</div>

<div class=”dummy”>

<p class=”inner extra”>But this doesn’t – no div.outer</p>

</div>

​

With this in mind, we can see that the selector for our button could be:

​

button.btn.btn-block.btn-primary {}

​

However – this will match any button on the page with those classes. We are only interested in matching buttons inside the app container, so we can add that:

​

div.Esc-returns-container button.btn.btn-block.btn-primary {}

​

The nesting is not important – as long as the specified button is somewhere within our div with the ‘Esc-returns-container’ class it’ll match.

​

So adding our attributes in, our required CSS ruleset is:

​

div.Esc-returns-container button.btn.btn-block.btn-primary {

background-color: red;

}

The next step is to put this into your Theme and test it.

Inside Shopify, we need to edit the ‘code’ of the Theme and insert our CSS into it.

3. Navigate to the ‘Assets’ folder within the code – scroll down the list of folders and click on the Assets folder. It expands to show a list of files.

4. Find the file called ‘theme.scss.liquid’.

​

5. Click on the ‘theme.scss.liquid’ file to open it in the editor.

6. Scroll to the bottom of that file.

​

7. Add the following text to the file:

Comments are surrounded by ‘/*’ and ‘*/’ delimiters.

It is critical to comment any changes so that you (or anyone who subsequently edits this file) understands the CSS changes you make. Including your initials/name means that people know who to call when it breaks.

/* --------- Custom CSS for MyShop below here ----------------*/

​

/* JoeBloggs: Additional CSS to recolour app returns button */

div.Esc-returns-container button.btn.btn-block.btn-primary {

background-color: red;

}

​

8. Click the SAVE button at the top of the screen to save your changes.

9. Switch back to the Returns page of the app and refresh the page (hit F5 or the refresh icon).

You see your red START button with a key difference – the extra CSS you added will be visible in the CSS section of the debugger.

​
​

You can use this technique to override the CSS for *any* item inside the app container – the key point is that you should always start your CSS selector with

div.Esc-returns-container to ensure that you don’t override something you don’t want to.

Attributes like font-size, font-weight, padding can all be applied to whichever element or tags you want.

Play with the CSS debugger on the page to ensure you’re happy with the results and then try it in the Theme code.

​
​