Shopify Editions 2023 is a major update to Shopify
In this article, you’ll find out what’s new in the latest major Shopify update called Shopify Edition Winter ’23.
Shopify periodically releases a large batch of updates and they are usually called the Shopify Edition “Season” “Year”.
Since there are a lot of updates, this article will cover the main changes in the winter update 2023. In case you want to read the full list of updates – link.
The following topics will be covered:
Updating a version of a theme with modified source code
Custom CSS dynamic sections
Translate and adapt
metaobjects
Upcoming updates
Theme update
If you want to update the version of the theme and there are changes in its code, now Shopify does not transfer code changes to the updated version of the theme. This is a rather serious update, because there are a lot of topics in which the code has been changed in one way or another.
What can I say, in every store in which I worked, I had to change the code.
And then what to do? Shopify recommends that you create a copy of the theme you want to update, and after updating, simply transfer the changed code sections. It sounds easy, but it’s actually harder.
Custom CSS
Each dynamic section a new opportunity. Now you can add custom styles directly in the customizer or welcome to WordPress. As for me, this innovation is connected with the first update. That is, if you changed some styles in the code, then when you update the theme, they will be lost, but if you changed the styles in the section through the admin panel, then when you update the theme, they will remain. But there is a nuance, styles are applied only to the section in which you write them.
To find this new feature, open any section through the customizer, scroll to the bottom, and after the theme settings, you will see the “Custom CSS” dropdown menu.
This innovation is useless, at least for me. Half a year has passed since the update and I have never used this function. Most likely, it was created for ordinary users. But I can’t imagine if some styles are added to each section and after some time you need to change them. At least you need to remember where they are, because there is no search there.
Translate and adapt
Appeared official app for multilingual store which allows you to automatically translate the site into different languages. The free version can translate a maximum of two languages.
A useful update, because before you had to manually update every word on the site, of course, if you do not have some application installed. But at the time, I was working with clients who didn’t want to pay $20 a month for an app that would translate their store, so I had to work with what I had.
metaobjects
Now this is a very interesting update. Now you can create your own meta-objects, and not as before only metafields (hereinafter metafields).
When creating a meta-object, you yourself configure which fields (fields) will be in it. Previously, it was possible to create fields only in prepared objects, which are shown in the screenshot below:
Their number is slowly increasing, which pleases. In any case, you can now create your own objects.
An example of using meta-objects
Your store features clothing brands and you collaborate with different designers. You need to display the designer on every product page with the following details: designer photo, name, description, and social media link. net. You also need to create a page with all the designers.
In order not to create different sections with similar content, you can create a meta object with the fields listed above.
Create a section with a designer on the product page
I created a meta object Designers and added the metafields I needed there. Now we need to add the first designer:
After adding the designer, you need to associate the meta object with some meta field. Since I want to display designers on the product page, I need a product meta object.
In order to open the meta fields, go to the following path:
Settings → Custom Data → Products
Now we need to open the Products object and create a new definition (definition)
Great! Now we can add different designers to different products.
Let’s assign our designer to some product. To do this, open any product through the admin panel and scroll to the very bottom. In field Designer add the desired designer:
Now open the product page through the customizer, create a new section. I will create a section Image with textsince it contains everything I need for the current object.
After the section is created, you need to add values to the picture, title, description, and link. So that they are pulled from the meta field of our designer.
Now the product page has a new section with our designer:
But if the designer’s meta field is not filled on the product, then there will be empty values:
Create a page for all designers
Metaobjects can also be inferred through code. For example, in our case, you can create a separate page with all the designers. Let’s try.
We create a new page, change its template because I want to show the list of designers only on the designers page.
Create a new section, call it designers.liquid
. In the first line we include CSS, you can write styles directly inside the file, I prefer to have a separate file.
We create a wrapper container for all designers, inside the wrapper we use liquid
an object for
to iterate over all designers inside meta object. At this stage, we create the layout and substitute the data from the object.
The end result should be something like this:
{{ 'component-designers.css' | asset_url | stylesheet_tag }}
<div class="designers page-width">
{% for designers in shop.metaobjects.designers.values %}
<div class="designer color-background-2">
<div class="designer__img">
<img src="https://habr.com/ru/articles/733480/{{ designers.picture" img_url: '200x' }}" alt="Designer picture">
</div>
<div class="designer__body">
<h2 class="h1">{{ designers.name }}</h2>
<p class="desginer__body-text">
{{ designers.description }}
</p>
<a class="button button--secondary" href="https://habr.com/ru/articles/733480/{{ designers.link }}" target="_blank"> Visit </a>
</div>
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Designers",
"settings": [],
"presets": [
{
"name": "Designers"
}
]
}
{% endschema %}
Now we need to add styles to make the page look prettier, because right now it looks something like this:
Add styles and another designer:
component-designers.css
.designers {
display: flex;
flex-direction: column;
gap: 20px;
}
.designer {
display: flex;
align-items: center;
border-radius: 10px;
color: #fff;
padding: 20px;
transition: transform 0.2s;
border: 2px solid #1d1d1d;
width: 80%;
margin: 0 auto;
}
.designer:hover {
transform: translateY(-5px);
}
.designer__img img {
width: 200px;
margin-right: 20px;
}
.designer__body h2 {
margin: 0;
}
@media screen and (max-width: 430px) {
.designer {
flex-direction: column;
width: 95%;
}
.designer__img {
text-align: left;
width: 100%;
}
.designer__img img {
width: 150px;
}
}
That’s all! Now we know how to work with metaobjects.
Artificial intelligence for product descriptions
Shopify introduced artificial intelligence that uses keywords to write product descriptions:
Cool update! I give a like.
Upcoming Updates – Shopify Bundles
Shopify announced that they would release their bundles for products. The Shopify community has been discussing bundles for a long time and complaining that Shopify does not include them in the store for free. Now, in order to connect bundles, store owners need to install a plugin. Plugins are usually paid and the price varies from 5 to 20+ dollars per month.
Conclusion
In this article, I tried to talk about the most important of the winter Shopify update, and we also created a dynamic object with designers. Updates are cool, the whole list here.