# 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. {% hint style="info" %} Don't be afraid to test your template modifications! Preview your template changes with the live example text in the app's Settings section before they appear in the results.\ ![](https://911908903-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvRGHcI7MyNpjTYgS9KdM%2Fuploads%2F1VQpOGt68ZCVYVoGASVG%2Fimage.png?alt=media\&token=44df24e8-02b6-40f8-a2f6-acf36e04b5af)\ [Here’s another playground for you to test](https://liquidjs.com/playground.html#eyUgYXNzaWduIHBlb3BsZSA9ICJhbGljZSwgYm9iLCBjYXJvbCIgfCBzcGxpdDogIiwgIiAtJX0KCjx1bD4KeyUtIGZvciBwZXJzb24gaW4gcGVvcGxlICV9CiAgPGxpPgogICAgPGEgaHJlZj0ie3twZXJzb24gfCBwcmVwZW5kOiAiaHR0cDovL2V4YW1wbGUuY29tLyJ9fSI+CiAgICAgIHt7IHBlcnNvbiB8IGNhcGl0YWxpemUgfX0KICAgIDwvYT4KICA8L2xpPgp7JS0gZW5kZm9yJX0KPC91bD4K,e30=) {% endhint %} ## 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](https://liquidjs.com/filters/upcase.html) * `downcase`: Formats text in lower case. [Learn more](https://liquidjs.com/filters/downcase.html) * `capitalize`: Capitalises the first character of a string. [Learn more](https://liquidjs.com/filters/capitalize.html) * `append:` Joins two strings together and returns the combined result. [Learn more](https://liquidjs.com/filters/append.html) * `prepend`: Adds the specified string to the beginning of another string. [Learn more](https://liquidjs.com/filters/prepend.html) * `join`: Joins the elements of an array into a string with the specified separator character. [Learn more](https://liquidjs.com/filters/join.html) Learn more about [Liquid Filters](https://liquidjs.com/filters/overview.html) ### **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](https://liquidjs.com/tags/if.html) * `unless` is the opposite of `if`. For example, it can display text only if a certain condition is **not** met. [Learn more](https://liquidjs.com/tags/unless.html) * **`for`** for iterating over collections. For example, you can use it to dynamically generate meta descriptions based on product attributes. [Learn more](https://liquidjs.com/tags/for.html) ## 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 {% code overflow="wrap" %} ``` Houndstooth sophisticated dress in black, ideal for your next formal occasion ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid {{ai.pattern}} {{ai.style | downcase}} {{ai.category | downcase}} in {{ai.colors | downcase}}, ideal for your next {{ai.occasion | downcase}} occasion ``` {% endcode %} **For a cool jacket, it could look something like this:** Preview {% code overflow="wrap" %} ``` Casual denim jacket in blue, perfect for winter outings ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid {{ai.style}} {{ai.material | downcase}} {{ai.category | downcase}} in {{ai.colors | downcase}}, perfect for {{ai.occasion | downcase}} outings" ``` {% endcode %} ### **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 {% code overflow="wrap" %} ``` Sequined feminine dress in black for your next nightout event | Your Brand Name ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid {{ai.pattern}} {{ai.style | downcase}} {{ai.category | downcase}} in {{ai.colors | downcase}} for {{ai.occasion | downcase}} | {{product.vendor}}" ``` {% endcode %} **And for a jacket, it might sound something like this:** Preview {% code overflow="wrap" %} ```liquid Casual Denim Jacket in Navy for Casual Outings | Your Brand Name ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid {{ai.style}} {{ai.material}} Jacket in {{ai.colors}} for {{ai.occasion}} outings | {{product.vendor}} ``` {% endcode %} ### **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 {% code overflow="wrap" %} ``` Experience minimalism with our retro dress in white. Perfect for any winter event. Express yourself with Your Brand Name ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid 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}} ``` {% endcode %} **And for a stylish jacket:** Preview {% code overflow="wrap" %} ``` Elevate your style with our casual cotton jacket in blue. Ideal for winter outings. Make a statement with Your Brand Name ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid 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}}." ``` {% endcode %} 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: {% tabs %} {% tab title="Default Template" %} Preview {% code overflow="wrap" %} ``` Discover the perfect bohemian and feminine paisley a-line dress in multicolor cotton, ideal for summer wear from Reactify. Free shipping over $100. ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid 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. ``` {% endcode %} {% endtab %} {% tab title="Dress, Pants & Default Templates" %} Dress Preview {% code overflow="wrap" %} ``` Dress it up or down with the bohemian and feminine paisley a-line dress in multicolor cotton, ideal for summer wear from Reactify. 20% off dresses for a limited time. ``` {% endcode %} Pants Preview {% code overflow="wrap" %} ``` Perfect your outfit with the casual camo straight jogger pants with cargo in khaki, ideal for casual wear from Reactify. Available in sizes 8 to 16. Every pair is designed in Australia. ``` {% endcode %} Default Preview {% code overflow="wrap" %} ``` Discover the perfect bohemian and feminine paisley a-line dress in multicolor cotton, ideal for summer wear from Reactify. Free shipping over $100. ``` {% endcode %} LiquidJS Template {% code overflow="wrap" %} ```liquid {% if ai.category == "Dress" %} Dress it up or down with the {{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}}. 20% off dresses for a limited time. {% elsif ai.category == "Pants" %} Perfect your outfit with the {{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}}. Available in sizes 8 to 16. Every pair is designed in Australia. {% else %} 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. {% endif %} ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="info" %} In the example, the second tab, the default template will apply for products that are not in the `Dress` or `Pants` category`.` {% endhint %} ## 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.