Horizon v3.4.0 Update Guide - Account Management Revamp and Single Variant Display Improvements

On February 18th, v3.4.0 of the official Shopify theme "Horizon" was released.

In the previous article, " How to safely customize Shopify's new theme 'Horizon' ," we explained how to create a system for theme updates - version control using upstream/horizon branch.

This time, we will be putting this system into practice . We will explain what has changed in v3.4.0 and provide some tips for deciding when to incorporate the update.

v3.4.0 Change Summary

94 files were changed, with a difference of +1,828 lines / -1,364 lines. Looking at the numbers alone, it seems like a big change, but most of it is updates to locale files (translations) and internal CSS optimizations for the header.

The changes that store operators should be aware of in this update can be broadly divided into the following two points.

Both are applied automatically without any configuration changes , meaning you can benefit from them just by updating.

Change 1: Revamped account management system

This is the biggest change in v3.4.0.

What has changed?

Up until v3.3.1, clicking the account button in the header displayed a theme-specific popover (desktop) or drawer (mobile). This UI included a "Sign in with Shop" button, an "Other sign in options" link, and navigation links to "Orders" and "Profile."

In v3.4.0, all of these custom UIs have been removed and replaced with a Web Component provided by Shopify called <shopify-account> .

What specifically has disappeared and what has been created?

Deleted files:

• snippets/account-actions.liquid - Account menu contents (223 lines)
• snippets/account-button.liquid - Account Button (92 lines)
• assets/account-login-actions.js - JS for the login button (37 lines)

A total of 352 lines of code have been removed and replaced with a single <shopify-account> tag.

What makes you happy?

The fact that there is no longer a need to manage the authentication UI on the theme side means that when improvements are made to the account on the Shopify platform, they will be reflected automatically without having to wait for a theme update , reducing the maintenance burden for both theme developers and store operators.

<shopify-account> is a Web Component provided by Shopify, and inherits the theme's color scheme and font settings via CSS custom properties. This means that the visual consistency is maintained, but the implementation has been moved to the platform side.

Impact on customization

If you've styled the account UI with custom CSS, you'll need to check it because the selector has changed. However, since <shopify-account> is rendered inside the Shadow DOM, there's little chance of external CSS interference. If you've customized the style of the account popover, it's likely that you won't need that custom CSS.

Change 2 - Display changes for single variant products

This is a change that affects the appearance.

What has changed?

Up until v3.3.1, the variant picker was displayed in a drop-down format even for products with only one variant (e.g., one size fits all). Because the drop-down UI was displayed even though there was only one option, it looked strange to visitors as though they could select something, but they couldn't select anything.

In v3.4.0, if there is only one variant, the dropdown will be replaced with a text display , which simply shows the option name and value in plain text.

Technical changes

A new conditional branch has been added to snippets/variant-main-picker.liquid :

{%- if product_option.values.size == 1 and variant_style != 'swatch' -%}
  <div class="variant-option" data-testid="variant-option-single">
    {{ product_option.name | escape }}
    <span class="variant-option__swatch-value">
      {{ product_option.selected_value }}
    </span> 
</div>

This is a simple branch: if product_option.values.size == 1 (there is only one option), then display the text in a plain div instead of a dropdown fieldset.

However, when the swatch is displayed ( variant_style == 'swatch' ), the swatch will be displayed as usual. This is because a color swatch can convey visual information (a color sample) even if it only has one value.

Impact on customization

If you have customized the styles for the variant picker, you may need to adjust them for the new .variant-option[data-testid="variant-option-single"] selector, unless you're happy with the default look.

Other changes

These are the two major changes, but there are also other smaller improvements:

Update Procedure

If you're using upstream/horizon branch setup we built in the previous article , here's how to do it:

1. Update the upstream/horizon branch

 # 作業ブランチに移動
git checkout main

 # Shopifyからv3.4.0のテーマをダウンロード
# （Shopify CLIまたは管理画面からエクスポート）

 # upstream/horizonブランチに切り替えて上書き 
git checkout upstream/horizon
 # After overwriting with the downloaded file:
 git add -A
 git commit -m "Update upstream Horizon theme to v3.4.0"
 git tag v3.4.0 

2. Merge into the main branch

 git checkout main
 git merge upstream/horizon 

3. Check for conflicts

If you separate your custom files (such as custom.css and custom.js ), conflicts should rarely occur. If a conflict does occur, it is because you have directly edited the theme's main files. We recommend adopting the changes in v3.4.0 and migrating your customizations to custom files.

4. Operation check

In particular, please check the behavior of the account button. <shopify-account> is a Shopify component, so it works properly even with the development theme ( shopify theme dev ).

summary

Updating to v3.4.0 is recommended .

There are no major breaking changes, and it includes some positive changes like platforming account management, and single-variant text display is a subtle but welcome change that improves the store UX.

Since you can benefit from both features without changing any settings, the hurdles to updating are low.

Theme updates also include major improvements, such as replacing UI components. Even if your store is in production, you can take advantage of these improvements by keeping your store up and running so that you can easily incorporate updates.

If you don't have an update system in place yet, please refer to our previous article, " How to safely customize Shopify's new theme, Horizon," and start by creating a version control system.