When Google displays your page in search results, it shows the searcher several details about the page.
The result includes these main parts:
- The title of the page
- The meta description of the page
- The website’s name
- The separator
Here is an example of how they appear:
Most Shopify themes use a dash (“-”) as the default separator.
A dash does the job, though many sites use it. A different separator can distinguish your site from the other search results.
Follow these steps to change your Shopify store’s separator.
What is an SEO Separator?
A separator (also known as an “SEO separator”) is what separates the title of your page from your website’s name when people see your page in the Google search results. A separator is typically a dash (“-”) by default. But it can also be set to other characters, such as a pipe (“|”) or arrow (“←”).
How To Change Your SEO Separator on Shopify
- Log In As An Administrator To Your Shopify Store
- Take A Backup of Your Shopify Store
- Navigate To Online Store → Themes
- Edit Your theme.liquid File
- Find Your Title Tag And Change The Separator
Log In As An Administrator To Your Shopify Store
To edit your Shopify theme, your account must have the necessary staff permission level.
Signing in as an administrator is the easiest way to ensure you have permission to edit the theme.
Sign in at https://accounts.shopify.com/store-login.
Take a Backup of Your Shopify Store
You do not technically need a backup before editing, though I recommend taking one.
A small mistake in a theme file can cause serious problems and crash your entire store.
I highly recommend backing up your Shopify store before moving to the next step.
Use a backup guide if you are unsure how to do this. I have seen many store owners accidentally crash their sites, which is why I recommend taking this precaution.
Navigate to Online Store → Themes → Actions → Edit Code
After signing in, look for “Online Store” beneath “SALES CHANNELS” in the left sidebar.
Open Themes under Online Store.
Look for the dropdown button labelled “Actions”.
Open that dropdown and select “Edit Code”, as shown in the screenshot below.
Edit Your theme.liquid File
Look for the search box in the top-left corner of the screen.
Search for theme.liquid, as shown below.
Open the file by clicking theme.liquid.
Find Your Title Tag And Change The Separator
Opening theme.liquid displays a large amount of code.
That code may look daunting if you are unfamiliar with HTML and Liquid, the programming language Shopify uses to create stores:
Feeling overwhelmed by a large block of code is a normal reaction.
For this change, you only need the line containing the <title> tag.
Use Ctrl+F to find it.
Press Ctrl+F, or CMD+F on a Mac, and search for <title> without quotation marks.
The result should look similar to this:
Your code may differ from the example because each Shopify theme is coded differently.
Find – between the opening <title> tag and the closing </title> tag.
In HTML, – encodes a dash (“-”), which is your current SEO separator.
Replace – with the separator you want to use.
I prefer the arrow (“←”) separator for a higher conversion rate because it stands out in Google results. I use it for Web Pop.
Another option is the pipe (“|”) separator.
A pipe uses very few pixels.
Google limits the pixel length of your <title> tag. A narrow separator can therefore leave room for more product information before the title gets cut off in Google.
