DEV Community: CheckoutWorks | Shopify Dev

Why We Replaced Shopify Horizon’s Hidden Homepage H1

CheckoutWorks | Shopify Dev — Mon, 17 Aug 2026 07:16:47 +0000

Shopify’s Horizon themes give the home page an H1 even when you have not added one to the visible layout.

By default, the heading contains the store name and is visually hidden:

{%- if request.page_type == 'index' -%}
  <h1 class="visually-hidden">{{ shop.name }}</h1>
{%- endif -%}

The default H1 is not a bug. It gives the page a main heading in its document structure, and screen readers can still access it. But a store name does not always explain what an unfamiliar business offers.

On the CheckoutWorks home page, we replaced the hidden CheckoutWorks H1 with a visible, more descriptive heading:

<h1><strong>Shopify Development & Bug Fixes</strong></h1>

Why a descriptive home-page H1 is more useful

The store name answers “Who is this?” A descriptive H1 can also answer “What does this page offer?”

That distinction matters when someone arrives from a search result, a shared link, or another page without knowing the brand. They should not need to interpret the navigation, product cards, and several paragraphs before understanding the home page.

A visible H1 also aligns the visual presentation with the document structure. The W3C guidance on headings explains that headings organize content and support navigation. When the main heading is visible, all visitors can use it to identify the page’s primary subject.

This does not mean every large line of text should be an H1. The goal is one clear main heading, followed by H2 and H3 headings that organize the sections below it.

What this may mean for SEO

An H1 is one of several signals a search engine can use to understand and represent a page. It is not a shortcut to higher rankings.

Google says it may use the main visual title, headings such as <h1>, the HTML <title>, og:title, and other prominent text when generating a title link in search results.

A descriptive H1 can therefore give Google a clearer statement of the page’s subject and make that statement more consistent with the page title, meta description, and surrounding copy. The value comes from accurate, consistent language—not from repeating keyword variations.

The possible relationship with clicks and page views is indirect. Google may use the H1 when understanding or representing the page. A clearer search result may help the right searcher recognize its relevance. If that leads to a click, the visit can produce a page view.

None of those steps is guaranteed. Search position, query intent, the snippet, brand recognition, competing results, and other traffic sources all affect clicks and page views. A descriptive H1 may improve clarity, but it should not be described as directly increasing rankings, CTR, or traffic.

How we did it

This pattern applies across Shopify’s Horizon theme family, including themes such as Horizon, Fabric, Tinker, Pitch, and Ritual. Shopify presents them as different starting designs within the same Horizon system.

Bug fixes and small development tasks are central to CheckoutWorks, so we expressed that focus in a clear home-page H1: Shopify Development & Bug Fixes.

1. Add a visible H1 in the Theme Editor

From Shopify Admin, go to Online Store → Themes and customize the duplicate theme. Open the home-page template, then add or edit the heading that should describe the page.

In Horizon’s rich-text controls, format the text as H1. The typography preset controls its appearance, while the rich-text heading format determines the rendered HTML element. The block name can vary by section and theme version; on our home page, it is inside the collection area.

2. Remove Horizon’s fallback H1

After the visible H1 is in place, choose Edit code and open sections/header.liquid. Search for <h1 class="visually-hidden">{{ shop.name }}</h1>.

Our theme records the change by commenting out that line:

{%- if request.page_type == 'index' -%}
  {% comment %} <h1 class="visually-hidden">{{ shop.name }}</h1> {% endcomment %}
{%- endif -%}

Commenting it out works and keeps the original behavior visible in the code. For a cleaner finished customization, you can remove the entire home-page condition instead.

Preview the theme on desktop and mobile. Confirm that the home page has one clear H1 and that other templates’ heading structure is unchanged.

If you use a theme outside the Horizon family, inspect its rendered home page and header code before editing. The implementation may differ, but the same principle applies: add a clear visible H1 before removing or replacing a generic fallback.

A small change with a clearer purpose

This is not an SEO shortcut. It simply gives the home page one accurate, visible heading that tells visitors and search engines what the page is about. For CheckoutWorks, replacing the hidden brand-name H1 made the page structure match the message people actually see.

How to Show a Country-Specific Notice at Shopify Checkout Without Code

CheckoutWorks | Shopify Dev — Sat, 15 Aug 2026 15:22:55 +0000

Some international orders need a clear reminder before the customer pays.

For example, a shipping carrier, customs process, or internal fulfilment workflow may require the recipient’s name, address, and phone number to be accurate. You can place that reminder directly in Shopify checkout, where the customer sees it while choosing a shipping method.

You do not need a Shopify Plus plan, an app, or custom checkout code to do this.

Instead, create a country-specific shipping rate and use its Delivery details field to display the message. Because this uses Shopify’s standard Shipping and delivery settings, it works on all Shopify plans.

What this method does

The message appears below the relevant shipping option after the customer enters an address in the selected country.

It is useful for reminders such as:

Confirming the recipient’s legal name, address, or phone number
Explaining possible customs or carrier requirements
Prompting customers to correct delivery details before placing an order
Sharing country-specific delivery information at the most relevant moment

This does not collect, validate, or block customer information. It is simply a visible reminder at checkout.

Example: a notice for orders shipping to Brazil

For this example, the message is:

Brazil notice: Check that the recipient’s name, address, and phone number are correct. Incorrect details may delay delivery.

The wording should match your own carrier, customs, or fulfilment requirements. Keep it short enough to scan quickly on mobile.

Step 1: Create a shipping zone for the country

From Shopify admin, go to Settings → Shipping and delivery.

Open the shipping profile you want to update. Under Shipping zones, add a zone for the country where the message should appear. In this example, that country is Brazil.

Make sure the country is available in an active Shopify market. A country can only belong to one shipping zone within the same shipping profile.

Step 2: Add a shipping rate and write the message

Inside the country-specific zone, add or edit a shipping option.

Give it a clear name, set the price or conditions you need, then enter your customer-facing message in Delivery details.

For example:

Shipping option name: Standard International — Brazil Notice
Delivery details: Brazil notice: Check that the recipient’s name, address, and phone number are correct. Incorrect details may delay delivery.

Shopify allows up to 128 characters in Delivery details, so focus on the action the customer should take.

Save the shipping option when you are done.

Step 3: Test it at checkout

Add a product to cart and proceed to checkout. Enter a delivery address in the country you configured.

Once Shopify loads the relevant shipping option, the message appears directly below it.

Also test a different country. The message should not appear there unless that country uses the same shipping option.

Things to keep in mind

This approach is best for a short, country-specific reminder. It does not add a custom checkout banner, require a checkbox, validate identity details, or prevent checkout when information is missing.

If the country has special import, carrier, or identity requirements, confirm the exact wording with the relevant carrier, customs broker, or compliance adviser. The shipping-rate message helps customers notice the requirement before they place their order.

It is a small native Shopify setup, but it puts the right information at the point where customers make their final delivery decision.

How to Choose a Free Shopify Theme Without Comparing Them All

CheckoutWorks | Shopify Dev — Sat, 15 Aug 2026 09:49:10 +0000

Shopify’s Theme Store gives new merchants plenty of free options. At the time of writing, the free themes collection contains 23 designs.

That sounds like 23 separate technical decisions.

It is not.

The more useful decision is whether to start with Horizon or Dawn. Once you have chosen between those two, you can pick the design that already looks closest to your brand.

The short answer: Horizon is Shopify’s newer-generation theme system, with more layout freedom and room to expand. Dawn is the established system, with a simpler, more familiar setup and a faster route to launch. Both can handle the basics of a new Shopify store.

Do not start by comparing every demo

Theme demos are designed to look different. One uses fashion photography. Another uses bold typography, warm colors, editorial layouts, or product-focused grids.

Those differences matter, but they can make the choice feel larger than it really is.

Within each group, much of what you are seeing comes from the theme’s starting configuration:

Colors and color schemes
Fonts and type scale
Spacing and layout settings
Sections and blocks placed on each page
Default templates
Demo photography and product content

These choices affect how quickly you can reach the look you want. Within the same code base, they do not give you a different technical foundation.

Two groups, two code bases

Shopify’s free themes are built around two main code bases: Horizon and Dawn.

Horizon is the newer generation. Shopify describes Horizon as “the flagship of a new generation of first-party Shopify themes.” It uses newer storefront architecture, including reusable theme blocks and nested blocks.

Within each group, the themes share the same core functionality and technical foundation. What changes is mainly the starting configuration: colors, typography, spacing, sections, blocks, templates, and demo content.

That means choosing Fabric instead of Horizon, or Studio instead of Dawn, is mainly a way to save setup time. You are choosing a starting design, not a different level of underlying capability.

Shopify’s free themes grouped by code base

Horizon	Horizon Fabric Atelier Dwell Heritage Pitch Ritual Savor Tinker Vessel
Dawn	Dawn Craft Colorblock Crave Origin Publisher Refresh Ride Sense Spotlight Studio Taste Trade

Once you choose the code base, pick the design you like

After choosing Horizon or Dawn, the next step should be simple.

The themes within the same code base differ mainly in their starting configuration: colors, typography, spacing, sections, blocks, templates, and demo content. You do not need to compare them as if they offer different levels of functionality.

Browse the designs in your chosen group and select the one that already feels closest to your brand. For example, you might prefer the clean starting point of Horizon or the more expressive presentation of Fabric. In the Dawn group, the same choice might be between Dawn and the art-focused look of Studio.

There is no need to spend hours looking for a technical winner inside the group. Choose the starting point you like, then replace the demo content and adjust the configuration for your store.

How Horizon and Dawn differ

Horizon is Shopify’s newer generation

Its main architectural difference is its deeper use of reusable theme blocks. Theme blocks can be used across sections, and they can contain other nested blocks. This gives merchants and developers more control over how content is assembled inside the Theme Editor.

That flexibility comes with a tradeoff. There are more settings, more block relationships, and more ways to construct a page. A first-time merchant may need longer to understand how everything fits together.

Dawn offers a more familiar starting point

Dawn is Shopify’s established reference theme for Online Store 2.0.

Shopify describes its development approach as HTML-first and JavaScript-only-as-needed. The theme emphasizes server-rendered storefronts, progressive enhancement, performance, and reliability.

For a merchant, the practical advantage is relative simplicity: there are fewer layers of composition to learn before launch.

Dawn still supports sections, blocks, templates, app blocks, color schemes, typography settings, and the standard features required by most new stores. It simply offers fewer layers of composition than Horizon.

Dawn remains actively maintained, so it is still a current choice rather than a discontinued theme.

Horizon vs. Dawn at a glance

Consideration	Horizon	Dawn
Architecture	Shopify’s newer first-party theme architecture, built around reusable theme blocks and nested blocks.	Shopify’s established Online Store 2.0 reference architecture.
Editing experience	More control over how content and blocks are arranged.	A simpler and more familiar section-based experience.
Flexibility	Higher. Better suited to complex layouts and future expansion.	Enough for most standard storefronts, with fewer structural choices.
Learning curve	Higher. The additional block relationships take time to understand.	Lower. Often easier for a first-time merchant to configure.
Setup speed	Fast when the starting design already matches your needs, but deeper customization takes longer.	Often the faster route to a straightforward store launch.
Basic store requirements	Supports the standard pages and features needed to start selling.	Supports the standard pages and features needed to start selling.
Best fit	Merchants who want more design freedom, expect the store to expand, or plan to work with a professional.	Merchants who want a dependable, familiar storefront with less initial configuration.
CheckoutWorks view	Our preference when flexibility and longer-term expansion matter most.	A strong choice when simplicity and the fastest practical launch matter most.

Both systems can support a new Shopify store. The difference is not whether one can sell products and the other cannot. The difference is how much control you want before launch and how much complexity you are prepared to manage.

Which should a first-time merchant choose?

Choose Horizon if you expect the store’s design to become more complex, want to build more of the layout with native theme blocks, or plan to work with a Shopify professional.

Choose Dawn if your priority is a straightforward storefront, fewer structural choices, and the fastest practical route to launch.

If your store only needs a homepage, collection pages, product pages, a cart, and basic content pages, either system can work.

Dawn is often easier for a first launch. Horizon is usually our preference when flexibility and longer-term expansion matter more than the shortest setup time.

How to choose the design after choosing Horizon or Dawn

Once you have chosen your system, stop comparing themes outside that group. Look for the version that requires the fewest visual changes.

Pay attention to:

Product presentation. Check image ratios, product galleries, cards, pricing, variant selectors, and product information.
Homepage structure. Look for a demo whose sections already follow the story you want to tell.
Typography. Fonts can be changed, but a similar type scale and editorial direction will save time.
Catalog size. A theme designed around a small collection may need more work for a large catalog.
Mobile layouts. Preview the homepage, collection page, product page, menu, and cart on a narrow screen.

Do not choose based only on the demo photography. Images are easy to replace. Page structure takes more work.

A theme that already matches 70% of your intended layout is normally a better starting point than a more impressive demo that needs to be rebuilt.

Why CheckoutWorks chose Horizon

CheckoutWorks runs on Shopify, and this website uses Horizon.

We chose it because its native sections and blocks give us room to build service pages, technical content, products, and editorial layouts while keeping custom theme code focused.

That does not mean every merchant should choose the same theme. Our website needs to evolve alongside a Shopify development business, so the additional flexibility is useful to us.

It is also part of how we stay dedicated to Shopify: we use the platform, theme system, checkout, and merchant tools that we work with every day.

Choose the system first. Then choose the starting point. You can safely ignore most of the remaining demos.

How to Remove “Powered by Shopify” Without Editing Code

CheckoutWorks | Shopify Dev — Sat, 15 Aug 2026 08:10:40 +0000

“Powered by Shopify” is a small footer link, but it can make a finished store feel unfinished.

In most Shopify themes, you can remove it without editing theme code. Start with your theme settings if the option exists. If it does not, use Shopify’s built-in Theme content editor instead.

This method works with most themes that use Shopify’s standard Powered by Shopify translation.

Check your footer settings first

Some newer Shopify themes include a footer setting such as Show “Powered by Shopify”.

Go to Online Store → Themes → Customize, open the Footer, and look for that setting. If you see it, turn it off and save.

If there is no setting, use the no-code method below.

Remove “Powered by Shopify” from Theme content

From your Shopify admin, go to Online Store → Themes.

Find the theme you want to update, click the … menu, then select Edit default theme content.

In the Theme content search field, enter powered.

Look for the field named Powered by Shopify. Click inside its text field and enter one single space. Do not leave the field completely empty.

Click Save, then refresh your storefront and check the footer.

Also check the password page

If your store is password-protected, search for Powered by Shopify HTML too. Enter a single space there as well. This removes the message from the “Opening soon” password page.

What if it still shows?

If the footer message remains after you save, the theme may use custom footer code instead of Shopify’s standard translation. This is more common in heavily customized or third-party themes.

At that point, avoid deleting random footer code. The message may be connected to a custom snippet, a theme setting, or another footer component.

The no-code method is still the best place to start: it is quick, reversible, and works with most Shopify themes.

We Built a Tiny Tool to Refresh Shopify Theme Editor Without Reloading Admin

CheckoutWorks | Shopify Dev — Thu, 13 Aug 2026 16:31:59 +0000

If you refresh Shopify’s Theme Editor 1,000 times a day, just like us, this is for you.

The number is exaggerated. The frustration is not.

Sometimes the storefront preview gets stuck or stops reflecting changes.

Refreshing the entire browser tab usually fixes it, but it also reloads the Shopify Admin shell, the Theme Editor, and the storefront preview together — even when only one part needs attention.

A full reload takes more time, interrupts your place in the editor, and may occasionally lead to another login or verification step.

That is why we built Shopify Theme Editor Refresh Controls: a small tool that refreshes only the part you need.

Two controls for two different problems

This free, open-source Tampermonkey userscript adds two buttons beside Sidekick in the Shopify Theme Editor.

Refresh storefront preview

This button reloads only the active storefront preview.

The Theme Editor stays open, your current template remains selected, and your unsaved editor settings stay available.

Use it when the preview is blank, stale, stuck, or no longer reflecting your changes.

Discard and refresh the theme editor

Sometimes the preview is not the problem.

You may have changed several settings, decided not to keep them, and simply want to return to the last saved theme state.

This button asks for confirmation, discards the unsaved Theme Editor changes, and refreshes the editor from Shopify’s last saved state.

When there are no unsaved changes, the button stays disabled.

Important: This action permanently removes all unsaved Theme Editor changes. It returns to the last saved state, not the theme’s original factory settings.

Who is this for?

This userscript is for people who spend a lot of time in Shopify’s Theme Editor:

Shopify developers, freelancers, and agencies working across themes and templates.
In-house ecommerce teams testing content, layouts, and theme settings.
Merchants who regularly customize and maintain their own themes.

If you regularly switch between templates, sections, and preview states, this was probably built for you.

Install the userscript

This project is:

FREE
OPEN SOURCE
AVAILABLE ON GITHUB

Repository:

https://github.com/CheckoutWorks/shopify-theme-editor-refresh-controls

Installation

1. Install Tampermonkey

https://www.tampermonkey.net/

2. Install the userscript

https://github.com/CheckoutWorks/shopify-theme-editor-refresh-controls/raw/main/shopify-theme-editor-refresh-controls.user.js

Note: Make sure "Allow User Scripts" is enabled.

See: https://www.tampermonkey.net/faq.php?q=Q209

Why not refresh the whole browser tab?

You still can.

This userscript does not replace the normal browser refresh when the entire Shopify Admin page is unresponsive.

It is designed for two more focused situations:

Reloading only the storefront preview.
Deliberately discarding the current unsaved editor session.

One click may save only a few seconds.

Repeated throughout a development day, those small interruptions add up.

One less full-page refresh

Use the preview button when only the storefront preview needs to reload.

Use the discard button when you want to remove the current unsaved changes and return to the last saved state.

It is a small tool for one repetitive part of Shopify development.

If it saves a few full-page refreshes — and a little frustration — it has done its job.

Built by CheckoutWorks.

Shopify development tools and technical support for merchants and developers:

https://checkoutworks.dev