Modifying templates

Our SEO metadata and alt text templates are powered by LiquidJS, a widely used templating language in e-commerce platforms, including Shopify. Its flexible yet powerful syntax enables merchants to define dynamic content easily, without the need for advanced coding skills.

Add dynamic content such as product titles, collection titles and use conditional logic to display SEO metadata and alt text that’s consistent across your entire site.

Using LiquidJS

Liquid filters allow merchants to manipulate and modify text, numbers, and other data, while Liquid tags provide control flow, iteration, and other logic to create custom templates. Using both liquid tags and filters can create effective templates for improving SEO metadata and alt text.

Liquid Filters

When it comes to modifying SEO metadata and alt text templates, the following Liquid filters may be particularly useful:

  • upcase: Formats text in UPPERCASE. Learn more

  • downcase: Formats text in lower case. Learn more

  • capitalize: Capitalises the first character of a string. Learn more

  • append: Joins two strings together and returns the combined result. Learn more

  • prepend: Adds the specified string to the beginning of another string. Learn more

  • join: Joins the elements of an array into a string with the specified separator character. Learn more

Learn more about Liquid Filters

Liquid Tags

  • if is a for adding conditional logic. It can display text only if a certain condition is true. For example, you can use if to display alt text if a product image is based on a specific product type.

    Learn more

  • unless is the opposite of if. For example, it can display text only if a certain condition is not met. Learn more

  • for for iterating over collections. For example, you can use it to dynamically generate meta descriptions based on product attributes. Learn more

Configuring Templates

Image Alt Text

Alt text is like a helpful friend whispering in the ear of search engines. It describes your image in a concise way that makes it accessible and SEO-friendly.

For a dress in your catalogue, here's a fun way to draft your alt text:

Preview

Houndstooth sophisticated dress in black, ideal for your next formal occasion

LiquidJS Template

{{ai.pattern}} {{ai.style | downcase}} {{ai.category | downcase}} in {{ai.colors | downcase}}, ideal for your next {{ai.occasion | downcase}} occasion

For a cool jacket, it could look something like this:

Preview

Casual denim jacket in blue, perfect for winter outings

LiquidJS Template

{{ai.style}} {{ai.material | downcase}} {{ai.category | downcase}} in {{ai.colors | downcase}}, perfect for {{ai.occasion | downcase}} outings"

SEO Title

The SEO title is the shining beacon that tells search engines and users what your page is all about. It’s like your product’s catchy jingle that gets stuck in users' heads.

For a dress, you could sing it like this:

Preview

Sequined feminine dress in black for your next nightout event | Your Brand Name

LiquidJS Template

{{ai.pattern}} {{ai.style | downcase}} {{ai.category | downcase}} in {{ai.colors | downcase}} for {{ai.occasion | downcase}} | {{product.vendor}}"

And for a jacket, it might sound something like this:

Preview

Casual Denim Jacket in Navy for Casual Outings | Your Brand Name

LiquidJS Template

{{ai.style}} {{ai.material}} Jacket in {{ai.colors}} for {{ai.occasion}} outings | {{product.vendor}}

SEO Description

SEO descriptions are your chance to reel in searchers. They're the exciting trailer for the blockbuster that is your product page.

For a gorgeous dress, your SEO description could sound like this:

Preview

Experience minimalism with our retro dress in white. Perfect for any winter event. Express yourself with Your Brand Name

LiquidJS Template

Experience {{ai.style | downcase}} with our {{ai.pattern | downcase}} {ai.category | downcase}} in {{ai.colors | downcase}}. Perfect for any {{ai.occasion | downcase}} event. Express yourself with {{product.vendor}}

And for a stylish jacket:

Preview

Elevate your style with our casual cotton jacket in blue. Ideal for winter outings. Make a statement with Your Brand Name

LiquidJS Template

Elevate your style with our {{ai.style | downcase}} {{ai.material | downcase}} jacket in {{ai.colors | downcase}}. Ideal for {{ai.occasion | downcase}}. Make a statement with {{product.vendor}}."

Remember to have fun with it! SEO is not just about keywords, it’s about connecting with your audience and making them click that link. Go forth and conquer the SEO world with these tips. Happy optimising!

Create unique templates for different categories

You can use conditional logic with an if statement to check the category and then print a corresponding template. This means that when you analyse a product that belongs to a specific category, you will see results that reference the template tailored specifically to that category. Unique templates can help improve the relevancy of the metadata.

By using the category attribute and incorporating it within your template logic, you can create custom templates that are unique to each category.

Here's an example of a default template and 3 unique SEO meta description templates combined:

Preview

Discover the perfect bohemian and feminine paisley a-line dress in multicolor cotton, ideal for summer wear from Reactify. Free shipping over $100.

LiquidJS Template

Discover the perfect {{ai.style | split: ", " | join: " and " | downcase}} {{ai.pattern | downcase}} {{ai.fit | downcase}} {{ai.subcategory | downcase}} {{ai.category | downcase | replace: "necklet", "" | replace: "neckwear", "" | replace: "bag", ""}}{% if ai.other %} with {{ai.other | downcase}}{% endif %} in {{ai.colors | downcase}}{% if ai.material %} {{ai.material | downcase}}{% endif %}{% if ai.occasion %}, ideal for {{ai.occasion | split: ", " | join: " or " | downcase}} wear{% endif %} from {{product.vendor}}. Free shipping over $100.

In the example, the second tab, the default template will apply for products that are not in the Dress or Pants category.

Use autocomplete for creating Templates

Say goodbye to the hassles of manually entering variables, which can often lead to errors. With our new autocomplete feature, all available variables, including product title and attribute options, are just a click away. By simply tapping the '@' symbol, you can access a comprehensive list of variables, eliminating the potential for errors and expediting the template setup process. Enjoy a seamless experience with the power of autocomplete at your fingertips.

Last updated