Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/larguar/shopify-short-titles
Shorten product titles on the website's frontend while keeping things as is within the Shopify Admin.
https://github.com/larguar/shopify-short-titles
liquid shopify
Last synced: 19 days ago
JSON representation
Shorten product titles on the website's frontend while keeping things as is within the Shopify Admin.
- Host: GitHub
- URL: https://github.com/larguar/shopify-short-titles
- Owner: larguar
- Created: 2024-12-03T14:32:51.000Z (20 days ago)
- Default Branch: main
- Last Pushed: 2024-12-03T17:01:53.000Z (20 days ago)
- Last Synced: 2024-12-03T17:46:19.494Z (20 days ago)
- Topics: liquid, shopify
- Homepage: https://pinultimate.co/collections/pins
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopify Short Titles
We can all agree that SEO is important to get people to your website. But once they're there, good design is just as important. For my shop, I wanted the best of both worlds, so I wrote some code[^1] to shorten my product titles on the website's frontend while they maintained their long SEO-formatted titles within the Shopify Admin.
## Table of Contents
* [Usage](#usage)
* [Code](#code)
* [Questions](#questions)
* [Donate](#donate)
* [Notes](#notes)
## Usage
Within the Shopify Admin, I have a title format that I use across all products to better my website's SEO and ensure my products are showing up when people are searching for them online. This full title appears in several important places including order confirmation emails, packing slips, share previews, and search engine results.
| Formula | Examples |
| :--- | :--- |
| `Product Name` `Product Type` by `Product Vendor` | Progress Pride Enamel Pin by Pinultimate
Internet Friends Enamel Pin Set by Pretty Useful Co.
Creator's Club Suncatcher by A Fink & Ink |
With this long format, a user can quickly identify:
* The name of the product
* What the product is
* Who made the product
Anyone searching for just one of those 3 things could also happen upon my shop, so it's important to have all of this information embeded within the actual product. However, once a user has clicked through to my shop, a lot of the product information becomes visual.
Each product card includes the following:
* Product Image
* Product Title
* Product Vendor
* Product Price
In this new format, the long title is redundant. We already have the product vendor listed, so we can remove that from the title. At this point, the user also knows what product they're shopping for (pins), so we can go the extra step to shorten 'enamel pin' to just 'pin':
| Full Product Title | Short Title |
| :--- | :--- |
| 
**Labrador Retriever Enamel Pin
by Doggie Drawings**
Doggie Drawings
$15.00 |
**Labrador Retriever Pin**
Doggie Drawings
$15.00 |
A user scrolling through our products should be able to easily consume the content on the page, and with this short title format, we're left with a visual representation of each product that is clean and straight to the point.
## Code
:file_folder: **snippets/product-item.liquid**
Search for `echo product.title | escape` and replace with:
```
assign fullTitle = product.title | split: " by "
assign shortTitle = fullTitle[0] | remove: "Enamel "
echo shortTitle | escape
```
:file_folder: **sections/main-product.liquid**
Search for `{%- when 'title' -%}` and replace contents inside `
` with:
```
{%- liquid
assign fullTitle = product.title | split: " by "
assign shortTitle = fullTitle[0] | remove: "Enamel "
echo shortTitle | escape
-%}
```
## Questions
If you have any questions, feel free to find me at:
* Email: [email protected]
* Website: [larguar.com](https://larguar.com)
* Github: [@larguar](https://github.com/larguar)
## Donate
Appreciate this code? Say thanks with a coffee:
[](https://ko-fi.com/W7W21YVJJ)
## Notes
[^1]: This code is specific to the [Combine](https://themes.shopify.com/themes/combine/styles/objects) theme in Shopify, but should work for other themes with some adjustments. File names will likely be different across themes.