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.

Message about updating the version of the theme with changed code

Message about updating the version of the theme with changed code

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:

Adding a new designer via metaobject

Adding a new designer via metaobject

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

Shopify store meta fields page

Shopify store meta fields page

Now we need to open the Products object and create a new definition (definition)

Associating a custom meta-object with a product meta-field

Associating a custom meta-object with a product meta-field

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:

Choose which designer to display on the page of this product

Choose which designer to display on the page of this product

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.

Creating an Image with text section

Creating an Image with text section

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.

Connecting dynamic values ​​to a section

Connecting dynamic values ​​to a section

Now the product page has a new section with our designer:

Designer section with meta object data

Designer section with meta object data

But if the designer’s meta field is not filled on the product, then there will be empty values:

In this product, the designer is not added through the admin panel

In this product, the designer is not added through the admin panel

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:

Designers page, no styles

Designers page, no styles

Add styles and another designer:

Designers page, with styles

Designers page, with styles

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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *