Using of CSS Overrides for styling Sorted Returns App
There are a limited set of options for styling the Sorted Returns components on the screen.
For the most part, 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 some text, or change the spacing of items on the page. This is possible by using CSS Overrides.
CSS stands for Cascading Style-Sheets and the Cascading part is key here – 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 to indicate which parts of the Style-Sheet are applicable to that part of the page.
Your Shopify Theme uses CSS to style all of the parts of the page to match and complement other parts of the Theme. But if we want to – we can override the styles attached to items on the page as long as we add more specific styles to those parts of the page we want to adjust.
The key information we need to know is:
How to tell CSS to identify the item we want to change
What changes to style we want to make
Where to add that information into the Shopify Theme so that it only affects what we want
Preparing
I’m assuming at least a passing knowledge of what HTML is and what a webpage is built from – don’t be afraid to search the Web for things you don’t understand.
You need to have your Shopify Site configured and running, and also have the Sorted App installed onto the site. We will assume the default settings have been used, so the Sorted User Returns page is at ‘http://yourshop.myshopify.com/a/returns’
We’ll be using Google Chrome as the browser in the examples – but Firefox and Edge both have a developer mode too.
We’ll use the Debut Theme that is a free Shopify Theme – yours will be different, but we’ll explain where you need to make adjustments.
Let’s go…
Finding the CSS Specifier for the item
Bring up your Shopify website – the Front End that the user sees – not the administration pages.
Go to the Sorted Returns pages – you may well have a menu item fort this on the site, this should be at https://yoursite.myshopify.com/a/returns
Now let’s use Chrome to explore the structure of the page and see the objects that make up the form.
Right-click on the ‘To start the return process…’ text and select Inspect
The bottom of the window will be replaced with loads of HTML 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 the Paragraph that you right-clicked on)
The structure of a CSS ruleset, is a selector that tells the browser what to apply the styles to, followed by a block, which lists declarations within ‘{ }’ braces. Each declaration has an attribute and a value. The attributes specify properties of the element (colour, size, spacing, font, border etc..) the value indicate what it should be – there is a LONG list of attributes – you’ll need to explore to find the ones you need to use.
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 following the Specificity, Inheritance and Cascade rules.
These are a detailed fully elsewhere on the Internet (google ‘css specificty’) – but basically 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 us to see the current selectors in the Theme that are affecting the paragraphs (in this case). We need to understand this, as this is what we will need to override in our adjustments.
Let’s look at a specific example. Let’s say we want to change the colour of the ‘START’ button in the Sorted screen.
Right Click on the START button and select Inspect again.
You should see that the <button… > element is selected in the left hand side:
and that we have the related CSS highlighted on the right hand side:
The selectors active are shown in black (‘.Esc-returns-form button’)and those not active are shown in grey (‘.Esc-returns-form label’ and ‘.Esc-returns-form input’)
What the selectors are becomes important once we know what attributes we want to change. We need to work out what attributes we need to change – and we can do that live on the page you are already viewing. We’ll come back to selectors later.
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 – so nothing is permanent – but it allows us to test and play with attributes.
Looking further down the list of CSS, you should be able to see under the ‘.btn’ selector block there is a ‘background-color: #557b97’ declaration. This is what we need to override.
Click on the ‘element.style {}’ block at the top of the list:
You should get a flashing cursor and ‘:’ – 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.
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. It will pop up a list of colours. Type red and hit ENTER.
You should now see a red START button instead, and small colour-square next to it.
You can click on the colour square to pop-up a colour selected and either enter a #nnnnnn colour from your theme, or pick a colour.
So now we know what CSS we want to add to our style-sheet (‘ background-color: red’) we need to work out what selector we need to use.
CSS Selectors
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’, which is in turn inside a ‘div’ element with the class ‘mb20’, which is in turn inside a ‘div’ with the class ‘Esc-returns-container’… and so on – out to the ‘html’ tag that contains the whole page.
A key point here for Sorted use - The ‘div’ with the class ‘Esc-returns-container’ is the element that holds ALL the Sorted contents. Everything outside that div is nothing to do with Sorted – 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.
Here’s a brief example of how selectors work. There are tons more guides to this on the web.
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, and some other bits and pieces. Selectors are a whole tutorial on their own – but 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) 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>
Armed with this information, 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 Sorted 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.
Inserting CSS into Themes
Inside Shopify, we need to edit the ‘code’ of the Theme and insert our CSS into it.
Open up your Shopify Administration page – in a new tab, we’ll come back to the returns page.
Click on Online Store , then Themes. Click on the Actions dropdown and select Edit Code
This will take you straight into the internals of your Theme.
We need to navigate to the ‘Assets’ folder within the code – scroll down the list of folders and click on the Assets folder which should expand so show a list of files.
There should be one called ‘theme.scss.liquid’ – your Theme may be slightly different – but it will either be a ‘.scss.liquid’ , ‘.scss’, or ‘.css’ file within that folder. It may be best to consult any documentation that came with your theme for information on CSS overrides.
Click on the ‘theme.scss.liquid’ file to open it in the editor.
If you scroll right to the bottom of that file – this is important, as we need to be sure that our additions are included last.
Add the following text to the file – comments are surrounded by ‘/*’ and ‘*/’ delimiters.
It is critical to comment any changes here 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 Sorted returns button */
div.Esc-returns-container button.btn.btn-block.btn-primary {
background-color: red;
}
Then hit the SAVE button at the top of the screen to save your changes.
Switch back to the Sorted Returns page and refresh the page (hit F5 or the refresh icon).
You should 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 tweak override the CSS for *any* item inside the Sorted 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 mean 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.