How can I dynamically set SEO titles and descriptions for my Shopify products - shopify

I want to set all my products titles to be like {Product_titles | Store Name}. How can I set that?
The issue I'm seeing is that the products already have some manually put SEO titles, as we have added lots of products recently we want a single formula for all products SEO titles and meta descriptions.
The template already has this dynamic code for titles
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
and for meta description
{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
I want to keep different types of titles and meta descriptions for products, collections, pages and blog posts.
Can I edit them in shopify theme.liquid or is there any app that can help us in this?

To dynamically change title's on the Product page only.
Find your <title></title> tags in your theme.
Add an {% if %} statement in there. Like so:
<title>{% if template == "product" %}Hey I'm a product page{% endif %}</title>
You can have quite a few if statements within the title tag.
In your case:
<title>{% if template == "product" %}{{ product.title }} | {{ shop.name }}{% endif %}</title>

Related

Shopify Liquid tag nested in liquid tag - any workaround?

I'm new to Shopify and Liquid. I know that you can't nest a liquid tag within another liquid tag ie:
{% something {{ something_else }} %}
I was wondering if there is a workaround for this kind of scenario? Possibly involving 'capture' or clever use of 'raw'?
I'm building a site that uses product tags to denote which chocolates go in which products (collection of chocolates). On the product page I can easily return the tags as a list:
<ul class="chocolates-menu">
{% for tag in product.tags %}
<li>{{ tag }}</li>
{% endfor %}
</ul>
However, I'd like to render snippets with file names to match the names of the tags (these will contain an image, chocolate name and chocolate description) ie:
<li>{% render '{{ tag }}' %}</li>
The closest I've got is:
{% for tag in product.tags %}
{% capture chocolate_tag %}
{% raw %}{% render{% endraw %} {% raw %}'{% endraw %}{{ tag }}{% raw %}' %}{% endraw %}
{% endcapture %}
<li>{{ chocolate_tag }}</li>
{% endfor %}
This will output the correct code but as text on the page (rather than parsing it). ie: {% render 'Tag Name Here' %} simply as the text of the list item. Any help from brighter folk, is much appreciated. Thanks.
I would suggest creating a snippet for all your chocolates and using the tag as a variable to output what is needed.
Here is a visual representation of what I mean and is kinda clearer from your discussion with #Fabio Filippi
snippets/chocolate.liquid
{% assign tag_image = tag | append: '.png' %}
{% case tag %}
{% when 'diet' %}
<img src="{{ tag_image | file_img_url: '100x' }}" class="responsive" />
{% when 'dark' %}
<div>My dark chocolate HTML</div>
{% when 'white' %}
<div>My white chocolate HTML</div>
{% endcase %}
and how to use:
{% render 'chocolate', tag: tag %}

How can I downcase array of a looped article.tags in Shopify liquid code

I am trying to loop over the articles in a blog to see if the article.tags contains any of the value in taggs where taggs is an array to be supplied by the user. I want to retrieve an array of related articles by tag.
Below is my example code:
{% assign taggs = "T-shirt,bag,Purse,Handbag" | split: "," %}
{%- assign length = b_s.related_article_blog_count | plus: 0 -%}
{% capture fourthtag %}{{ taggs[3] | downcase }}{% endcapture %}
<div class="jj-post-content">
<div class="item">
{%- for article in blogs[blog].articles limit: length -%}
{% if article.tags contains fourthtag %}
<a href="{{ article.url }}">
<div class="jj-title">{{ article.title }}</div>
</a>
{%- endif -%}
{%- endfor -%}
</div>
</div>
When I run the code it returns no result. But when I created the article tags in lowercase, I got all the articles filtered as expected. Given that many of the users may not be creating tags in lowercase, I need a way to downcase the article.tags from the loop.
I tried {% capture atc %}{{ article.tags | downcase }}{% endcapture %} before the loop but it was not working.
I came up with this. Make a string, normalize the strings to remove as many oddities as possible, remake into an array to use with iteration.
{%- assign normalized_article_tags = article.tags | join:"," | downcase | split:"," %}
{% if normalized_article_tags contains fourthtag %}
You should also strip excess whitespace, end of lines, html and or handleize the tags to further normalize data being matches to potentially ambiguous user data.
Further
{% capture fourthtag %}{{ taggs[3] | downcase }}{% endcapture %}
can become
{% assign fourthtag = taggs[3] | downcase %}
Try to reserve using capture for outputs that will be repeated , such as snippets rendering , trying to do a kind of pseudo-interpolation, or long form text that would be obnxious to use with only an assign statement. https://shopify.dev/api/liquid/tags/variable-tags#capture

Display links to other colors on Shopify product page

I have an online store on Shopify with one product in 10 different colours. So for SEO purposes, I've created 10 products like T-Shirt Black, T-Shirt Blue, T-Shirt Red, etc. To each product, I assigned its own tag and unique description.
What I am trying to do is to link all products between each other from each product page, for instance, the current viewing product is T-Shirt Black, on that page I'd like to show 10 clickable colours/swatch with images of each colour and to the current viewing one add the active class, when clicked on another colour it takes user to another product page. How do I make it happen?
Any help would be much appreciated!
I'd like to share with other people who might need to solve the same task.
Here's what I've done to get this work;
First, I've added a tag to each product based on its collection, in an example for all products in collection SMALL I've added tag small, then I had to write this code to get a list of all the products with the same tag.
{% if product.tags contains "small" %}
{% assign current_product_tag = "small" %}
{% elsif product.tags contains "medium" %}
{% assign current_product_tag = "medium" %}
{% elsif product.tags contains "large" %}
{% assign current_product_tag = "large" %}
{% endif %}
{% assign current_product = product %}
<div id="sw_container">
<p class="sw_title">Select Colour</p>
<ul class="sw_list">
{% for product in collections.all.products %}
{% if product.tags contains current_product_tag %}
<li class="sw_item{% if product.handle == current_product.handle %} active{% endif %}">
<a title="{{ product.title | escape }}" href="{% if product.handle == current_product.handle %}#{% else %}{{ product.url }}{% endif %}">
<img src="{{ product.images.last | product_img_url: 'small' }}" alt="{{ product.title | escape }}">
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>

Change Title Format on Shopify

I would like to ask if how to change the title format for Tag Page on Shopify?
I could see that the code for the title is like this:
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
this code returns this title for example the Tag is "Star Wars Aircrafts" from the Collection "Star Wars Canvas Art":
Star Wars Canvas Art | Domain.com - Tagged "Star Wars Aircrafts" - Shop Name
all I want is to simplify it to:
Star Wars Aircrafts | Star Wars Canvas Art | Domain.com
Note: All I want is to apply this to Page Created by Tags.
I think this is what you want:
{% if current_tags %}
<title>
{% assign meta_tags = current_tags | join: ', ' %}{{ meta_tags }} | {{ collection.title }} | {{ shop.domain }}
{% endif %}
{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}
</title>
{% else %}
-- regular title code
{% endif %}

Shopify - remove store title from products page <title> tag

I am working on a shopify store and I cannot seem to get the code right for removing the store name from only the product pages.
Here is the code:
<title>
{{ page_title }}
{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %}–
{{ 'general.meta.tags' | t: tags: meta_tags }}
{% endif %}{% if current_page != 1 %} –
{{ 'general.meta.page' | t: page: current_page }}{% endif %}
{% unless page_title contains shop.name %}
{% if template != 'article' %} – {{ shop.name }}{% endif %}{% endunless %}
</title>
I have tried using an if statement above this to change page_title to product_title but it breaks this code and no titles show up on any other pages.
Also this code prevents the store name from coming up on articles. I tried using the same code but replaced it with 'product' and it did not work!
All help is appreciated. Thanks!
Try this: before and after your shop name add an unless, like this:
{% unless template contains 'product' %}
{% unless template contains 'article' %}
– {{ shop.name }}
{% endunless %}
{% endunless %}
Also, you should think about using different lines in your code, makes things more readable. Also, using contains instead of = is more foolproof, so I took the liberty of changing that for you
Found the solution ... an if/else statement. I thought I had tried this without success but it is working now.
{% if template == 'product' %}
<title>{{ page_title }}</title>
{% else %}
<title>{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %}{% if template != 'article' %} – {{ shop.name }}{% endif %}{% endunless %}</title>
{% endif %}